カスタマイズしてみる

　WordPressに慣れてくると、このテーマ全体的にはいいんだけどここが気に入らないんだよなとか、もっとこういう機能がほしいなといったことが出てくると思います。そういうときは自分でカスタマイズしてしまいましょう。

テーマのカスタマイズ

「外観」→「テーマの編集」を開くと、現在使用しているテーマのソースコードが以下のように表示されると思います。（以前なぜか「テーマの編集」がないときがあったので、その場合はプラグイン「Theme Editor」などをインストールすれば問題なしです。）



右側に並んでいるテンプレートというものたちは、このテーマはこれだけのテンプレートから構成されていることをあらわしています。ここからカスタマイズしたいテンプレートを選んで、その中の変更を加えたい部分をソースコードから見つけ出し編集すればテーマのカスタマイズができるというわけです。
　ただ、どのテンプレートがどんな意味を持っているのかがわからなければ探しようがないのでまずはその説明をします。

・style.css
HP全体のデザインやレイアウトを記述してあります。色や配置やサイズなどを変更したい場合は基本全てこれです。
・index.php
フロントページのテンプレート。HPを開いて一番初めに表示されるページです。
・header.php
ヘッダーのテンプレート。ヘッダーというのは各ページのはじめの共通する部分のことです。一般的にはサイトタイトルロゴやメニューなどが含まれるかなと思います。
・footer.php
フッターのテンプレート。フッターというのは各ページのおわりの共通する部分のことです。メニューやコピーライトなどがよく含まれます。
・sidebar.php
サイドバーのテンプレート。ないテーマもありますが、2列になっているHPにおいてメインでない方の列のことです。
・function.php
関数を定義したり呼び出したりするためのテンプレート。気を付けなければいけないのが、ちょっとした記述ミスでHPに何も表示されなくなって取り返しのつかないことになったりしますというかなったことがあります。かじった程度の知識しかない僕はとても焦りました。なので、よくわからなければあまり触らないのが無難だと思います。


　で、これらテンプレートをいきなり書き換えていいのかというとそれは少し危険です。なんでかというと、テーマをバージョンアップするとコードが書き換わるので、せっかく書き換えたものがすべて消えてしまうんです。そうならないために、テーマのカスタマイズをするときには「子テーマ」というものを作ります（必然的にもとのテーマは「親テーマ」と呼ばれます）。
　子テーマの役割としては、基本的には親テーマの情報を呼び出すが、子テーマに記述されている部分だけは そっちを優先する、というものです。つまり変更点は子テーマにだけ記述していく方式です。
　簡単な例でいうと、親テーマに

#gnav {
　background: #0f0;
　font-size: 16px;
}

という記述があり、子テーマに

#gnav {
　background: #00f;
　font-size: 20px;
}

という記述がある場合は、gnavの部分の背景色が緑から青に変わり、文字サイズは16pxから20pxに変わります。
　これならば親テーマをバージョンアップしても自分が編集した部分は生き残るので安心です。

①子テーマの準備
　まず、子テーマ用のフォルダを作成します。名前は自由です。一般的には間違えないように「親テーマ名_child」なんかにするようですが、まあなんでも大丈夫です。その中に「style.css」と編集したいテンプレートファイルと同じ名前「○○.php」を新しく作ります。ここは親テーマと全く同じ名前をつけてください。style.cssは変更しないとしても必須です。
ファイルはメモ帳でつくればOKです。
　style.cssに関しては、親テーマを呼び出すための記述が必要です。以下4行を記述してください。

/*
Theme Name: （子テーマの名前）
Template: （親テーマの名前）
*/

　○○.phpに関しては、親テーマの内容を完全に上書きする形になるので、元のファイルの内容をコピーして貼り付けましょう。


②子テーマのアップロード
　準備はこれでOKで、style.cssや○○.phpが入っている子テーマ用のフォルダごと

wordpress/wp-content/themes

の階層にアップロードします。これで子テーマが使えるようになったはずです。

　ほかのサーバーではどうかわからないのですが、ロリポップ！では「ロリポップ！FTP」からこんな感じに直接フォルダやファイルを作れるのでFTPソフトは必要ないです。



③子テーマの編集
　管理画面の「外観」→「テーマ」を見てみると、新しく作った子テーマが追加されているはずなので有効化します。そしたらあととは「外観」→「テーマの編集」からソースコードを好きに編集しましょう。



　「編集するテーマを選択」からいつでも親テーマも見ることができます。○○.phpの方は全文コピーしたので問題ないと思いますが、style.cssの場合は親テーマを見て編集する箇所を探し、その部分をコピーして子テーマに貼り付けて編集するというのがやりやすいと思います。



　

プラグインのカスタマイズ

　「プラグイン」→「プラグインの編集」からソースコードの画面を開けます。プラグインのカスタマイズするということはあまりないかもしれませんが、テーマのときと同様にして編集できます。

作ったもの

　まえがきにも書いた学生団体「Best Career」の団体HPもここに書いたような流れでつくりました。参考までにのせておきます。