アップデートしても消えない!WordPressの子テーマを作ってカスタマイズしやすくする

ブログって記事を書くのも楽しいですが、デザインを変えたりするのも楽しかったりしますよね。
ブログ初心者にありがちなのが、親テーマにそのまま変更を加える、いわゆる直書きをしてしまうこと。直書きするとテーマのアップデートをした時に変更がすべて消えてしまいます。でもWordPressには子テーマという機能があるので、それを回避することができます。

sponsored link

子テーマとはなにか?

WordPressの子テーマとは、別のテーマ(親テーマ)の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

via 子テーマ – WordPress Codex 日本語版

子テーマは基本的に親テーマ(元になるテーマ)の後に読み込まれるため、親テーマで指定したcssなどを上書き(オーバーライド)することができます。※CSSは基本的にあとに読み込んだ方が優先されます。
また、子テーマは親テーマとは別のファイルになるためテーマのアップデートをしても内容は変更されないというメリットがあります。

自分でオリジナルのテーマを作成しているなら必要ありませんが、ほとんどの人は既存のテーマをカスタマイズしていると思うので有効な機能です。僕もブログを始めた頃は子テーマという存在を知りませんでしたが、使わないと損です。ほんとに。

最終的にこのようになります。(ローカル環境)
ローカル環境の子テーマ

style.cssの子テーマを作る

子テーマは親テーマと同じ階層(ディレクトリ)にフォルダを作り、その中にそれぞれの子テーマのファイルを作っていきます。

このブログは「emphaino」というテーマを使っているので「emphaino-child」というフォルダを作っています(ファイル名は任意)。この時点ではまだ、サーバーにアップロードしなくても大丈夫です。

次にcssを変更するためのstyle.cssの子テーマを作成していきます。
先ほど作成したフォルダの中にテキストエディタを使ってutf-8という形式のファイルを作ります。アプリによってうまく形式を変更できない場合があるようです。MacならCot Editorというソフトが使いやすいです。エンコーディングという項目でUnicode(UTF-8)を選択します。

style.cssの冒頭にはこのように記述します。

Theme NameとTemplateは必須です。ディレクトリ名は大文字小文字を区別するので間違えないように親テーマのフォルダの名前をコピーしておきましょう。

僕の場合はこのように記述しています。必須項目以外は若干省いています。

@importというものが追加されていますね。これを指定することで親テーマのCSSを読み込んだ上で子テーマを適応するという指定になります。追加しないと親テーマのCSSを読み込まずに、いちからCSSを記述することになります。

[../emphaino/style.css]というのはこのファイル(style.css)のひとつ上の階層(../)にあるemphainoというファイル名の中のひとつ下の階層(/)にあるstyle.cssというファイル名を読み込むという意味です。
子テーマのフォルダは親テーマと同じ階層ですが、style.cssはフォルダの中に入っているので、親テーマから見て、ひとつ下の階層ということになります。

CSSは@import以降に記述することになります。
フォルダにstyle.cssを追加する

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が開始タグ、?>が終了タグになります。関数は開始タグと終了タグの間に記述します。開始タグの前や終了タグのあとにスペースや改行などが入っているとエラーになることがあるので注意しましょう。

functions.phpではこのようなこともできます。


あとはフォルダを[wp-content/themes]にアップロードすれば完了です。FTPを使わなくてもzip形式に圧縮すれば管理画面の[テーマ]から新規追加することもできます。

それほど難しくもないので数分でできます。ローカル環境といっしょに始めに作っておくと効率的にカスタマイズをすることができますよ。