WordPress既存テーマをカスタマイズするなら子テーマを使うべきと思います。
これは、Wordpress codexにある子テーマの項目でも推奨されています。
ただ、Wordpressを使い始めたばかりの時に「子テーマ」「親テーマ」と言われても、「何だそれ？」とか、「そもそもテーマ自体にカスタマイズしたらなんでだめなの？」とも思うかもしれません。
僕も、テーマ配布サイトでカスタマイズ用に子テーマを配布してはいるものの、そういったことについては詳しく説明していませんでした。
なので、一度それについて書いておこうと、今回はWordpressの子テーマについて書きたいと思います。
photo by Alexander Gounder
目次
子テーマとは
そもそも子テーマとは、既存のWordpressテーマのカスタマイズ専用のテーマです。
既存のWordpressテーマは、「親テーマ」とも呼ばれ、テーマの機能とスタイルを継承したものが「子テーマ」です。
- 親テーマ：既存のWordpressテーマ
- 子テーマ：親テーマに属し、機能とスタイルを引き継いだ上で編集するためのテーマ
図にするとこんな感じです。
「親テーマ（既存のテーマ）」の機能とスタイルを「子テーマ」が引き継いだところに、スタイルなどの変更（カスタマイズ）を加え、ブラウザに表示させます。
このように、書いてもまだちょっとややこしいとは思います。
そもそも「なぜ、こんなややこしいことをして子テーマを使うのか？」と思われるかもしれません。
それについては、以下で説明していきます。
なぜ子テーマでカスタマイズする必要があるのか
子テーマは、Wordpressを始めたばかりの方にとって、ややこしい概念だと思います。
実際に、僕も最初は、よくわかりませんでした。
そんな、ややこしい、よくわからないことをするのは面倒なので「親テーマを直接カスタマイズすればいいのでは？」とも思われるかもしれません。
もちろん、親テーマを直接カスタマイズして使用するのも、その人の自由です。ただ、親テーマを直接カスタマイズすると以下のような難点があります。
親テーマを直接カスタマイズした場合
WordPressの「親テーマ（既存のテーマ）」は、機能などが追加されたりするとアップデートを行います。公式テーマなどは、自動でアップデートが行われます。
親テーマは、アップデートが行われると、親テーマに施されたカスタマイズはお構いなしに、すべてのファイルが上書きされ、カスタマイズはなかったことになってしまいます。
これまで「カスタマイズしたけど、テーマはアップデートしたら元に戻ってしまったことがある」という方も結構おられるのではないでしょうか。僕もあります。
それまで、テーマのカスタマイズに何時間かけようと、ポチッと「テーマの更新」ボタンを押してしまえば、全ての苦労が無に帰してしまいます。同様のカスタマイズをしようと思ったら、また1から編集するしかありません。
なので、親テーマをカスタマイズすることは基本的に「次のアップデートまでしか効果のない掛け捨ての手間」になってしまいます。
子テーマをカスタマイズした場合
では、子テーマにカスタマイズを施した場合は、どうなるかというと以下のようになります。
子テーマにカスタマイズを施すことによって、子テーマ側で行われた変更（カスタマイズ）は、テーマがアップデートされた後も、確実に保持されます。
最初こそ、子テーマのセットアップという手間がかかりますが、子テーマに施されたカスタマイズは、何度、親テーマをアップデートしようと、変更した部分は必ず残るということが保証されています。
なので、子テーマをカスタマイズすることは、「貯蓄型」となります。子テーマを、さらにカスタマイズしようと思えば、子テーマ上にさらに編集を加えていくことで、どんどんカスタマイズが上積みされていきます。
ですので、Wordpress運営者にとっては、「子テーマ」はテーマをカスタマイズする上での「ちょっとした財産」と言っていいと思います。
子テーマの作り方
では、カスタマイズを保持するための「子テーマ」を作るにはどうしたらよいかを以下で説明したいと思います。
最近では、子テーマ自体を配布しているテーマも多いので、既に子テーマある場合は、そっちを利用した方が良いと思います。
もう子テーマがある場合は、次の項目まで飛ばしてください。
子テーマを作る主な手順
子テーマを作るには、以下のようなちょっとした手順が必要です。
- 子テーマのフォルダを作る
- 子テーマに必要なファイルを作る
- 親テーマを継承するためのコードを書く
やることといったらこの3つです。それぞれの手順もたいしたことをしないので、5分もあれば終わる作業です。
以下では、Wordpressデフォルトで付属している「Twenty Fifteen」の子テーマの作り方を例にして説明したいと思います。
子テーマのフォルダを作る
まずは、子テーマ用のフォルダを作ります。名前は何でも構いません。（半角英数字＋α）
「Twenty Fifteen」の子テーマなので、「twentyfifteen-child」とでもしてフォルダを作成すればOKです。
1つ目の手順はたったこれだけです。
子テーマに必要なファイルを作る
次に、作成したフォルダの中に以下の2つの空ファイルを作成します。
- style.css
- functions.php
こちらも難なくできると思います。
親テーマを継承するためのコードを書く
最後に、子テーマ用のコードを記入します。
style.cssの編集
style.cssには、子テーマ情報を以下のように記入します。
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
他のテーマで利用するには、上記のコードを、コピーしてstyle.cssに貼り付けて必要な部分を編集すればOKです。
特に必要な記入項目は以下です。その他の項目は、必要なければ無理して書く必要はないと思います。
- Theme Name：子テーマを識別するための名前を書く
- Template：親テーマのフォルダ名を書く
簡易版は以下になります。
/* Theme Name: Twenty Fifteen Child Template: twentyfifteen */
他のテーマで利用するには、名前を変更し、「twentyfifteen」部分を他のテーマの親テーマフォルダ名にします。
functions.phpの編集
functions.phpでは、親テーマのstyle.cssがちゃんと、子テーマを適用した際にも呼び出されるようにするコードを記入します。
functions.phpを開いて以下のコードをコピペします。
<?php //子テーマで利用する関数を書く
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
これを書くことにより、親テーマのスタイルが子テーマに引き継がれます。
以前は、子テーマ側のstyle.cssで@importを利用して呼び出す方法が主流でしたが、「@importを利用すると呼び出しが遅くなる」などの弊害があるので、functions.php側で呼び出す方法が現在推奨されています。
子テーマの有効化
最後にWordpress管理画面から「外観→テーマ」を選択して、作成した子テーマを有効化します。
これで、子テーマの設定は完了です。
この子テーマを適用した状態は、親テーマをそのまま表示した状態と変わりがありません。
しかし、子テーマのstyle.cssにスタイルを書き足していったり、テンプレートを追加してカスタマイズしていくことによって、デザインなどを自由に変更することができるようになります。
子テーマを呼び出す仕組み
ここで、子テーマがどのように呼び出されるかの仕組みも簡単に説明しておきたいと思います。（※詳しく書くと長くなりすぎるので）
カスタマイズをする上で、この仕組みを少し知っておくだけで、やりたいことができるようになります。
まず、全体のデザインの土台となる「親テーマ」があり、カスタマイズ用ファイルのみがある「子テーマ」を通して呼び出され、ブラウザで表示されます。
薄いピンク色のファイルが呼び出されるファイルを表しています。
「style.css（スタイルファイル）」と「functions.php（関数ファイル）」の2つのファイルは「親テーマ」「子テーマ」双方のファイルがどちらも呼び出されます。
反面、テンプレートファイルは子テーマにあるものが優先して読み込まれ表示されます。（親テーマのものは呼び出されない）
なので、例えば投稿ページ部分を編集したければ、親テーマの「single.php」を子テーマディレクトリ直下（style.cssがある場所と同じ階層）にコピーして、そのテンプレートファイルをカスタマイズすれば、「カスタマイズした子テーマ内のsingle.php」が優先して呼び出されます。
その他のテンプレートファイルも、もちろん同名のテンプレートファイルを子テーマ内に置くと、そのファイルが優先して呼び出されます。
その後、親テーマにアップデートがあった場合でも、子テーマのテンプレートファイルが呼び出されるので、カスタマイズした部分は保持されます。
カスタマイズしたテンプレートに親テーマ側で新機能が追加されたときは、その恩恵が受けられないという難点はあります。
まとめ
以上、簡単ではありますが子テーマの概要についてまとめてみました。
以前、配布しているWordpressテーマに自動アップデート機能を付けたところ、「余計な機能をつけたせいでカスタマイズが全部消えてしまったじゃないか」と言われたことがあるので、1度子テーマの必要性について書いておこうと思いました。
子テーマを利用すると、親テーマのアップデートの恩恵を受けながら、カスタマイズにかけた手間を蓄積しておくことができます。
ですので、「親テーマをカスタマイズしていたら更新で消えてしまった」なんて方や、「親テーマをカスタマイズしているのでアップデートはしていない」なんて方がおられましたら、最初にかける手間以上の恩恵があるので、初期投資と思って利用してみることをおすすめします。
小テーマは有効にしておく必要がありますか？