WordPressをインストールしたものの、自分好みにカスタマイズしたい。そんな時にやるべき必須項目を挙げてみます。
子テーマを作る
テーマを選んだら、そのままカスタマイズしてはいけません。
なぜならテーマはアップデートされることがしばしば。アップデートしたためにカスタマイズした内容がごっそり消えてしまっては涙もの。
カスタマイズする時は必ず子テーマを作りましょう。
子テーマの作り方
まず子テーマのフォルダを親テーマフォルダと同階層に作ります。
フォルダの名前はなんでも構いません。
例として「child_theme」とします。
その中に「style.css」ファイルを作りましょう。
style.cssの記述は以下のようになります。
[html]/*
Template:親テーマ名
Theme Name:親テーマ名_child
Theme URI:http://●●●.com/
Description:親テーマ の子テーマです
Author:サイト名
*/
@import url(“親テーマまでのパス/style.css”);
[/html]
Template:親テーマの名前 （必須）
Theme Name:親テーマ名_child 親テーマ名+child (必須）
Theme URI:http://●●●.com/ サイト名
Description:サイトの説明
Author:サイト名または名前
@import url：親テーマのCSSを読み込むための記述
これだけで子テーマが読み込まれます
この他にテンプレートファイルやfunctions.phpなどをカスタマイズしたい場合は別に作ってアップロードします。
テンプレートファイルは親テーマのものをコピーして上書きすることで、カスタマイズ可能です。
functions.phpは新規に作り、書き換えたい部分を新規のfunctions.phpに記述することで親テーマのfunctions.phpと連動して追記した部分が反映されます。
カスタマイズの際に便利なプラグイン
カスタマイズする時にどのテンプレートが動いているのか、このページはどのテンプレートがincludeされているのかわからない時があるので、テンプレートファイルを表示してくれるプラグインを入れています。
Show Current Template
「Show Current Template」はそのページのどのテンプレートファイルが使われているかが管理バーに表示されるプラグインです。これを入れることにより、テンプレートファイルの構造がわかるので、いちいちテンプレートを確認しなくてもカスタマイズしやすくなります。
Image Widget
「Image Widget」は再度バーに画像を入れたり、バナーを入れたりが簡単にできるプラグインです。
imageファイルまでのパスをHTML記述しなくてよく、CSSも簡単に入れられるので使いやすいプラグインです。
ウィジェットから簡単に投稿できます。
style.cssの記述
次に子テーマに作ったstyle.cssの記述をカスタマイズしたいように書き換えます。
とはいってもどこをどうカスタマイズしたらいいのかテンプレートファイルを見ただけではわかりません。
そういう時はブラウザ上からCSSの記述をテストで変えてみます。
例えばfirefoxのブラウザなら右クリックで「要素を検証」を押します。
すると下にソースが出ますので、その右側にあるCSS部分を書き換えてみます。
Chomeは右クリック「検証」で右側にソースと下にCSSが出ます。
IEはF12でソースがでます。
こうやってあらかじめどこの部分を書き換えるかをテストしてみるのもひとつの手です。
CSSを書き換える場合は親テーマの記述はいらないので、書き換える部分だけ記述するようにしましょう。
