WordPressの子テーマとは？親テーマを直接編集せず変更を残す作り方

WordPressのテーマへ継続して残したい変更は、親テーマへ直接書かず、子テーマへ分けます。子テーマは、親テーマの機能やテンプレートを利用しながら、変更するファイルだけを別のディレクトリで管理するテーマです。

最小構成はstyle.css一つです。子テーマのstyle.cssで親テーマを指定し、親のスタイルを@importで読み込んでから差分を書きます。ただし、子テーマは更新時の上書きを避ける仕組みであり、親テーマを更新したあとの互換性まで保証するものではありません。

子テーマは親テーマの変更部分だけを分ける

WordPress CodexのChild Themesは、子テーマを、親テーマの機能を使いながら機能を追加または変更できるテーマとして説明しています。親テーマのファイルを直接編集しないため、親テーマを更新しても、別のディレクトリに置いた変更は残ります。

親テーマは、元となるテンプレート、スタイル、機能を持ちます。子テーマに親テーマ全体を複製する必要はありません。通常は、変更または追加するCSS、テンプレート、機能だけを置きます。親テーマは引き続き必要なので、子テーマを有効にしたあとも削除しません。

この分け方には、変更箇所を特定しやすくする役割もあります。親テーマのどこを編集したか分からない状態では、更新前に差分を探す作業が必要です。子テーマに変更を集めれば、親から受け取る部分と、自分で保守する部分を分けられます。

最小構成は別のディレクトリとstyle.css一つ

子テーマは、wp-content/themesの中に、親テーマとは別のディレクトリを作って置きます。次は説明用の仮例です。親テーマのディレクトリ名をcompany-theme、子テーマをcompany-theme-childとします。

wp-content/
└── themes/
    ├── company-theme/
    └── company-theme-child/
        └── style.css

子テーマのstyle.cssには、WordPressがテーマを認識するための情報を書きます。必須なのは、子テーマの名前を示すTheme Nameと、親テーマのディレクトリ名を示すTemplateです。

/*
Theme Name: Company Theme Child
Template: company-theme
*/

@import url("../company-theme/style.css");

.site-title a {
  color: #333333;
}

style.cssを保存したら、WordPressのテーマ画面で子テーマを有効化します。

Templateへ書くのは、親テーマの表示名ではなく、ディレクトリ名です。大文字と小文字も区別します。名前を推測せず、サーバーのwp-content/themesにある親テーマのディレクトリ名を確認してください。

style.cssは親のスタイルを自動では追加しない

子テーマのstyle.cssは、親テーマのstyle.cssへ自動的に追加されるファイルではありません。子テーマを使うと、親テーマのスタイルシートに代わって子テーマのスタイルシートが使われます。

親テーマの見た目を引き継ぐなら、先ほどの例のように、@importで親テーマのstyle.cssを明示して読み込みます。@importより前へ別のCSS規則を書くと、親テーマのスタイルシートを読み込めません。変更するCSSは@importのあとへ書きます。

同じセレクターへ子テーマ側で規則を書けば、後から読まれる規則で親テーマの見た目を変更できます。ただし、詳細度や!importantなど、CSSの優先順位によっては上書きできない場合があります。子テーマを作っただけで、すべての指定が優先されるわけではありません。

テンプレートは変更するファイルだけを置く

親テーマと同じ名前のテンプレートファイルを子テーマへ置くと、子テーマ側のファイルが使われます。たとえば、親テーマのsingle.phpを変更したいなら、子テーマへsingle.phpを置き、そのファイルを編集します。

親テーマの全ファイルを子テーマへコピーする必要はありません。必要なファイルだけを置いたほうが、どこを変更したか分かります。コピーしたテンプレートは、親テーマ側の同名ファイルが更新されても、自動では置き換わりません。親テーマを更新したあとは、元のテンプレートとの差を確認します。

新しいテンプレートを追加する使い方もできます。親テーマにない、より具体的なテンプレートを子テーマへ置けば、WordPressのテンプレート階層に従って選ばれます。どのファイルが使われるかを確認してから追加してください。

functions.phpは親より先に追加で読み込まれる

子テーマのfunctions.phpは、同名の親ファイルを置き換えません。子テーマのfunctions.phpが先に読み込まれ、そのあとに親テーマのfunctions.phpも読み込まれます。WordPress 3.4.1の処理でも、この順序を確認できます。

親テーマのfunctions.phpを丸ごと子テーマへコピーして編集すると、同じ処理を二重に読み込むおそれがあります。子テーマには、追加または変更に必要な処理だけを書きます。

親と子へ同じ名前のPHP関数を書くと、定義が衝突する場合があります。親テーマが関数の存在を確認してから定義する作りでなければ、同名の関数で置き換えようとしないでください。テンプレートとfunctions.phpでは、同じ名前のファイルを置いたときの働きが違います。

子テーマを作っても更新前後の確認は必要

子テーマが守るのは、親テーマと別に保存した変更ファイルです。親テーマの更新によってHTMLの構造、関数、CSSが変われば、子テーマのファイルが残っていても、表示や処理が合わなくなることがあります。

親テーマを更新する前に、次の順で準備します。

1. データベースとファイルをバックアップする
2. 親テーマへ直接加えた変更がないか確認する
3. 残す変更を子テーマへ一つずつ分ける
4. 更新後に、変更したページと主要なページを確認する

子テーマは、バックアップや動作確認の代わりではありません。子テーマのファイルを誰が保管し、親テーマを誰が更新し、更新後の表示を誰が確認するかも決めます。

まず、使用中の親テーマで直接編集したファイルがあるかを調べてください。変更があるなら、親テーマを更新する前にバックアップと差分を取り、子テーマへ移す対象を一つずつ決めます。