WordPressで子テーマを使った正しいカスタマイズ

WordPressのテーマを導入するには大きくわけると2つのパターンがあります。

ひとつは、自分で一からテーマを作成する方法で、思い通りのテーマを作ることができますが、それなりに知識が必要で、一人ですべてやるとしたらかなりの仕事量になります。

もうひとつは、配布されているテーマをそのままインストールして使う方法です。WordPressには、あらかじめインストールされているTwenty Seventeenなどのテーマやwordpress.org が配布している無料テーマもありますが、有料のテーマを購入することもできます。

これらの配布されているテーマをそのまま使うのであれば、問題はありませんが、少しでもオリジナルのカスタマイズを加えるとしたら、子テーマを利用する必要があります。

子テーマを使う意味

子テーマというのは、単独で活用されることは決してありません。

必ず親テーマが存在して、その親テーマの設定を継承しつつ、部分的に修正（カスタマイズ）するためのテーマが子テーマになります。

では、なぜ子テーマが必要なのかというと、WordPressのテーマは定期的にアップデートされるものだからです。

たとえば、購入してきたテーマのCSSファイルを少し修正して、オリジナルの色に変更したとします。でも、そのテーマに不具合が見つかり、アップデートされたとすると、CSSファイルも上書きされてしまい、元の状態に戻ってしまいます。

なので、カスタマイズしたいところ（ファイル）だけを子テーマに登録しておいて、それ以外は親テーマを参照する形にしておけば、親テーマのみがアップデートされ、子テーマは以前のままになるので、カスタマイズしたところが上書きされる心配はありません。

子テーマの仕組み

子テーマがどのように作用するのか、親テーマと子テーマの関係がどうなっているのかを理解しておきましょう。

ざっくりいうと、親テーマのファイルが読み込まれて、そのあとに子テーマのファイルが読み込まれると、思ってもらって良いのですが、CSSファイルとテンプレートファイル（single.php、archive.phpなど）、そしてfunctions.phpとで、違う動きをするのでこれらの違いをまとめておきます。

CSSファイルの場合

スタイルシートは、親テーマがまず読み込まれて、後から子テーマのスタイルシートが読み込まれます。（というか、そのように指示するんですが、それは後ほど説明します）子テーマのCSSファイルには、カスタマイズしたい部分だけを記述します。

たとえば、下記のように親テーマのstyle.cssファイルには、h3タグに下記のような設定がされていたとします。

これをフォントの色だけを変えたいというのであれば、子テーマのstyle.cssファイルに下記のように、変更したい部分だけを記述すればOKです。

子テーマの記述で注意しておきたいのは、（h3.hoge）のようにセレクタの記述を統一しておくことです。

テンプレートファイルの場合

テンプレートファイルの場合は、ファイルが丸ごと子テーマのものに置き換わるところが、CSSファイルとは違うところです。

もし、投稿ページのテンプレートファイル（single.php）をカスタマイズしたい場合は、子テーマのフォルダに親テーマからsingle.phpファイルをコピーしてきた上で、カスタマイズしたい部分を修正します。

functions.phpの場合

functions.phpもCSSと同様にカスタマイズしたい部分だけを記述すればOKです。

ただし、子テーマのfunctions.phpが先に読み込まれるので注意が必要です。

もし、子テーマのfunctions.phpに記述した関数と同じ名前の関数が親テーマで定義されていたら、エラーになってしまいます。

 

子テーマの作り方

仮に「themea」という親テーマがあって、これの子テーマを作るとします。子テーマのフォルダ名はわかりやすく「themea_child」としておきます。

子テーマのフォルダの中には「functions.php」と「style.php」の2つのファイルが存在していますが、子テーマを作るためにはこれらの2つのファイルは必ず必要です。

style.cssの記述

style.cssファイルには自分がどの親テーマの子供なのかを示すために記述しておかなければならないことがあります。

上記のフォルダのように「themea」の子テーマである場合には、下記のような記述をstyle.cssの先頭に書いておきます。

上の記述の中で、重要なのはTemplate: themeaの部分です。テーマ名ではなく、親テーマのフォルダ名なので、ここだけは間違いのないよう注意しましょう。

functions.phpの記述

子テーマのfunctions.phpには、CSSが正しく読み込まれるための記述をしておきます。

古い参考書などでは子テーマのCSSファイルに@import url();を記述する方法が紹介されていることもありますが、今ではこの方法は非推奨となっていますので、気をつけたいところです。

wp_enqueue_style()はテーマにスタイルシートを読み込ませるための関数です。上記の例では、親テーマのCSSファイル読み込んだら、次に子テーマのCSSファイルを読み込むという意味です。

逆にスタイルシートを読み込ませたくない場合はwp_dequeue_style()を使います。