アップデートしても消えない！WordPressの子テーマを作ってカスタマイズしやすくする
ブログって記事を書くのも楽しいですが、デザインを変えたりするのも楽しかったりしますよね。
ブログ初心者にありがちなのが、親テーマにそのまま変更を加える、いわゆる直書きをしてしまうこと。直書きするとテーマのアップデートをした時に変更がすべて消えてしまいます。でもWordPressには子テーマという機能があるので、それを回避することができます。
クリックorタップ!!
子テーマとはなにか？
WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。
via 子テーマ – WordPress Codex 日本語版
子テーマは基本的に親テーマ（元になるテーマ）の後に読み込まれるため、親テーマで指定したcssなどを上書き（オーバーライド）することができます。※CSSは基本的にあとに読み込んだ方が優先されます。
また、子テーマは親テーマとは別のファイルになるためテーマのアップデートをしても内容は変更されないというメリットがあります。
|
1 2 3 4 5 6 7 |
/* こういうイメージ */ body { font-size: 16px;/* 親テーマのフォントサイズを */ } body { font-size: 14px;/* 子テーマで上書き・変更する */ } |
自分でオリジナルのテーマを作成しているなら必要ありませんが、ほとんどの人は既存のテーマをカスタマイズしていると思うので有効な機能です。僕もブログを始めた頃は子テーマという存在を知りませんでしたが、使わないと損です。ほんとに。
最終的にこのようになります。（ローカル環境）
style.cssの子テーマを作る
子テーマは親テーマと同じ階層（ディレクトリ）にフォルダを作り、その中にそれぞれの子テーマのファイルを作っていきます。
このブログは「emphaino」というテーマを使っているので「emphaino-child」というフォルダを作っています（ファイル名は任意）。この時点ではまだ、サーバーにアップロードしなくても大丈夫です。
次にcssを変更するためのstyle.cssの子テーマを作成していきます。
先ほど作成したフォルダの中にテキストエディタを使ってutf-8という形式のファイルを作ります。アプリによってうまく形式を変更できない場合があるようです。MacならCot Editorというソフトが使いやすいです。エンコーディングという項目でUnicode(UTF-8)を選択します。
style.cssの冒頭にはこのように記述します。
|
1 2 3 4 5 6 7 8 9 |
/* Theme Name: 子テーマの名前 *必須 Theme URI: http: //example.com/ Description: 子テーマの説明・概要 Author: 作者の名前 Author URI: http: //example.com/about/ Template: 親テーマのディレクトリ名 *必須 Version: 1.0 */ |
Theme NameとTemplateは必須です。ディレクトリ名は大文字小文字を区別するので間違えないように親テーマのフォルダの名前をコピーしておきましょう。
僕の場合はこのように記述しています。必須項目以外は若干省いています。
|
1 2 3 4 5 6 7 8 |
/* Theme Name: emphaino-child Description: emphainoの子テーマです Author: gaku0318 Template: emphaino */ @import url("../emphaino/style.css"); |
@importというものが追加されていますね。これを指定することで親テーマのCSSを読み込んだ上で子テーマを適応するという指定になります。追加しないと親テーマのCSSを読み込まずに、いちからCSSを記述することになります。
[../emphaino/style.css]というのはこのファイル(style.css)のひとつ上の階層（../）にあるemphainoというファイル名の中のひとつ下の階層（/）にあるstyle.cssというファイル名を読み込むという意味です。
子テーマのフォルダは親テーマと同じ階層ですが、style.cssはフォルダの中に入っているので、親テーマから見て、ひとつ下の階層ということになります。
CSSは@import以降に記述することになります。
functions.php以外のテンプレートファイルの子テーマを作る
テンプレートは、訪問者から要求されたページを生成するために使われる PHP ソースファイルです。テンプレートファイルは HTML、PHP、そして WordPress テンプレートタグで構成されています。
via テーマの作成 – WordPress Codex 日本語版
続いてテンプレートファイルの子テーマを作っていきます。テーマを表示させるための重要なファイルなのでカスタマイズする機会も多いと思います。functions.phpは他のphpファイルと異なるので後述します。
ここで作成するのは主にトップページの表示などをしてくれるindex.phpです。
作り方は簡単。親テーマのindex.phpをコピーして子テーマのフォルダにペーストするだけです！
先ほどのstyle.cssもそうでしたが、子テーマは親テーマを上書きするので子テーマが優先して表示されます。ファイル名は変えてはいけないので注意しましょう。
index.phpのほかにもcontent.phpやsingle.phpなどは比較的よく使うので、いっしょに作成しておきましょう。
functions.phpの子テーマを作る
style.css と違い、functions.php は同名ファイルでオーバーライドできません。その代わり、親の functions.php に追加して読み込まれます。正確にいうと、親テーマの functions.php の直前に読み込まれます。
via 子テーマ – WordPress Codex 日本語版
さいごにfunction.phpの子テーマを作ります。
functions.phpは子テーマと親テーマの両方が二重に読み込まれる（上書きではない）ので、他のテンプレートファイルのようにコピーするとエラーになってしまい、うまく表示することができなくなります。
なのでfunctions.phpは親テーマにない関数を追記したり、add filterなどを使用します。
phpファイルは<?phpが開始タグ、?>が終了タグになります。関数は開始タグと終了タグの間に記述します。開始タグの前や終了タグのあとにスペースや改行などが入っているとエラーになることがあるので注意しましょう。
|
1 2 3 |
<?php // ここに追記していく。 ?> |
あとはフォルダを[wp-content/themes]にアップロードすれば完了です。FTPを使わなくてもzip形式に圧縮すれば管理画面の[テーマ]から新規追加することもできます。
それほど難しくもないので数分でできます。ローカル環境といっしょに始めに作っておくと効率的にカスタマイズをすることができますよ。