概要

テーマをカスタマイズしたり、テーマディレクトリ下のfunctions.phpを変更したりした後に、テーマをアップデートすると、カスタマイズや変更の内容が元に戻ってしまう。

これを回避するために、適用しているテーマの「子テーマ」を作って、これをカスタマイズする。

テーマの場所

WordPressのテーマは複数のファイルで構成され、テーマ名と同じディレクトリにそれらが格納されている。

たとえば”First”というテーマはfirstというディレクトリで、その内容は次のようになっている。

子テーマ作成の流れ

1. 子テーマのディレクトリを作る
2. ディレクトリ下に必要なファイルを準備する
   • style.css
   • カスタマイズ対象ファイル(header.php、footer.phpなど)
   • functions.php(カスタマイズする場合)
3. 子テーマを有効化する

子テーマのディレクトリを作る

子テーマのディレクトリの場所は、親テーマと同じwp-content/themes/の下。ディレクトリ名は親テーマ名に接尾辞-childを付けることが推奨されている。Firstというテーマなら、first-child。

必要なファイルを準備する

ここでは、必須のstyle.cssだけを準備する。たとえば”First”の子テーマを作る場合は以下を記述。

コメント行のうち必須なのは、TemplateとTheme Nameの2つ。

• Templateには親テーマのディレクトリ名を設定(テーマ名ではない)
• Theme Nameには子テーマのテーマ名を設定(ディレクトリ名ではない)

@import文は、url()の内容をインポートして適用する。ここで親テーマのcssを設定することで、親テーマのスタイルのすべてがインポートされる。

その後の行で、必要に応じてスタイルをカスタマイズ。

子テーマを有効化する

ダッシュボードの「外観」→「テーマ」で確認すると、子テーマが加えられているので、これを有効化する。

子テーマをオーバーライドする

style.css

@import url()で親テーマのスタイルを継承した以降、独自のスタイル設定を記述することで親テーマのスタイルをオーバーライドできる。

たとえば以下の例では、h1タグの色を青にするよう設定している。

実行結果は以下の通りで、h1タグの内容の前景色が青になっている。