WordPressのオリジナルテーマを作る時にまずやることは『何をやるのかを知る』|手順1

Wordpressオリジナルテーマの作り方
こちらは、オリジナルのWordpressテーマを作るべく、日々の備忘録として書いてあります。
作成後にはまとめページとして記事を作る予定です。

ワードプレスに慣れてくると、デザインが気になってきますよね。
私もその内の一人です。
ワードプレスは無料のブログソフトみたいなものですので、どうしてもデザインがブログに偏りがちです。
(ホームページ風にも出来ますが、やはりブログっぽさは拭えません)

とはいえ、やはりワードプレスで小説サイトを作れるならば、その方が楽です。
なので、小説サイトとして最適なオリジナルテーマを作ることにしました。

私と同じくオリジナルのテーマを作りたい方のお役に立てるといいなと思い、備忘録的に日々綴っていこうと思います。

 

「Wordpressオリジナルテーマの作り方」で検索し、複数のサイトを調べる

何をすればテーマが完成するのか? を全体的に把握しておきましょう。ざっくりでもいいです。
行き止まりかもしれない先の見えない洞窟よりも、宿屋のある村に抜け出せる大きな森に冒険に行く方が断然いいです。ゴールが見えますし。
ですので、何をするかを調べておきましょう。

そして、何をしなくていいかも知っておくといいです。
やらなくていいこと(人に任せた方がいいこと)は、どんなことでも存在します。
それを知るだけでもかなり効率はいいです。基礎力がついたら、あとはそぎ落とすって感じですね。

最初の基礎力をつけるということで、1つポイントです。
最低でも5つのサイトは調べてみて下さい。
1つのサイトを参考に進めていき、途中でどうしてもわからない部分や(PCなどの)環境の違いで手詰まり状態になることもありますので、複数のサイトを参考にしましょう。
web上だけでなく、本もとても有益です。
本は下手なことが書けないので、最新のもので自分に合ったものを一冊持っておくことをおすすめします。

参考にしているサイト

XAMPPを使ってWordPressテーマをローカルで作成・編集する

WordPress オリジナルテーマの作り方 3.0+

おそらく最もわかりやすいWordPressテーマ制作チュートリアル

WordPress経験の浅い、PHP苦手の僕が初テーマ作成までにやったこと

WordPressのテーマを自分で作成してみたら意外と簡単だった!

書籍

基礎からのWordPress 改訂版【電子書籍】[ 高橋 のり ]
created by Rinker

本は少し古いのですが、こちらと一番最初にご紹介したサイトをメインに参考にさせてもらっています。

 

調べてわかった全体的なやることリスト

  • WordPressをローカルで動かせる状態にする
  • ローカルで動かせるソフトをインストール、設定する
  • オリジナルテーマの元となるWordpressをインストールする
  • 簡単にかつキレイにコードを打ち込めるソフト(エディタ)のインストール
  • どんなサイトデザインにするかネット検索し、紙に書く
  • テーマカラー(アクセントカラー)を決める
  • htmlとcssの知識
  • htmlとスタイルシートの作成
  • PHP(WP仕様)にコードを変えていく
  • デザインをカスタマイズする

一つずつ簡単に説明します。

WordPressをローカルで動かせる状態にする

例えるなら、「写真の出来上がり具合をいちいち現像しないとわからないカメラではなく、スマホのカメラで撮影すればいいですよね」ってことです。

テーマをカスタマイズするのに、FFFTPソフトでサーバーへアップロードし、ネット上で更新しながら確認するなんて作業ははっきり言って面倒くさいし手間です。時間もかかります。

それならばFFFTPにアップせずとも、コードを変更した後、ブラウザの更新で確認できればそちらの方がいいですよね。

これがWordpressをローカルで動かす状態ということです。

ローカルで動かせるソフトをインストール、設定する

Macなら『MAMP』、Windowsなら『XAMPP』というソフトを利用しましょう。
(本来はローカルサーバーと言うのですが、こちらでは敢えてツールやエディタも「ソフト」と表現します)

私は『XAMPP』を利用しています。こちらの説明は、別記事でお伝えしますね。

オリジナルテーマの元となるWordpressをインストールする

WordPressの原本みたいなものです。
初めてインストールした状態みたいになります。

簡単にかつキレイにコードを打ち込めるソフト(エディタ)のインストール

メモ帳ではないテキストエディタならそちらでも十分ですが、コードというのは、ある程度整頓されていないと修正する時に非常に面倒くさいです。

↑↑こんな風に段落分けされていた方がマトリョーシカのような構図みたいでわかりやすいですよね。
そのためのソフトです。

私は『ATOM』を利用しています。

どんなサイトデザインにするかネット検索し、紙に書く

頭使って疲れていると思いますので、ここでテンション上げましょう。
私はやっぱり「どんな演出にしようかな~?」とデザインを考えている時間が好きです。
どんなデザインにするかは「かっこいいサイト」など検索すればたくさん出てきます。色々と調べてみるのもいいですよ。

デザインを見るだけなら『pinterest』のようなデザインサイトでイメージを掴むのもありです。私はよく参考にさせてもらってます。

こんなサイトにしたい!と思ったら、まず紙にラフ画を描きましょう。メインカラーを決めてもいいですよね。

テーマカラー(アクセントカラー)を決める

小説サイトなので基本は『白』が鉄則です。文字は『黒』
よく『黒』などの暗い色を背景にされている方もいらっしゃいますが、はっきり言って読みにくいです。
ファンが既にいらっしゃる作家さんならいいのですが、やはり読者さんに負担はかけないようにするのがサイト運営では大切なことになります。

好きな色を3色ほど選んでおくといいですね。
もし白黒以外でないという方は、以下のカラーサイトを参考にするといいと思います。(私もよく利用しています)

https://www.palettable.io/FFFFFF

html&cssを学ぶ

先にhtmlでページを作り、後からPHP形式(Wordpress仕様)にするイメージです。
サイト作成やデザインをカスタマイズするには、やはりこの知識は必須です。

私は15年くらい前に数年間、ホームページを作成していたのですが、仕様が変わってくると知識不足で手詰まります。

行き詰まってからネット検索してもいいし、プログラミングが学べるサイトでスキルアップしてもいいし、本を買ってもいいと思います。

私は『プロゲート』というサイトでプログラミングを学び、わからないところはネット検索しています。
ゲーム感覚で進められるので楽しいです。
(本も買いましたが、長いコードの場合は電子書籍でない限りかなり厳しいです)

あとは『ドットインストール』というプログラミング学習サイトも有名ですよね。こちらのサイトでは『ATOM』(コードエディタ)を利用するので、『ATOM』にも慣れてプログラミングも学べるならこちらの方がいいかもしれません。
3分くらいの動画を見ながら一緒にコードを打ち込んでいく感じです。

 

オリジナルテーマを作る時は、まず自分は何をやらなきゃいけないか、を考えてみましょう!

 



 

おススメは「Xserver

アクセスが早いので読者さんのストレスを軽減! 離脱を防げる!
安心のSSL化が無料
大量アクセスでもダウンしない! ちゃんと表示される!



WordPressテーマなら「スワロー

初心者に優しい設定で、すぐに執筆にとりかかれる!
カスタマイズ方法がわからなくてもキレイなデザイン!
何もしなくても自動的にスマホ対応!!





ABOUT US

声優小説家
爽やかな下ネタとクソまじめな自己啓発を融合した文章を世に放つインディーズ小説家。役者経験を活かし、人生を面白く豊かにさせるのが生きがい。 ⇒note|https://note.mu/ucon_tachibana 【得意】 演技・人間観察・雰囲気読む・感覚を落とし込む・小説書く・サプライズ考える・男性を理解し応援する・難しいことをわかりやすく説明する