WordPress特集 - 子テーマの使い方
公開日：2021年11月14日
子テーマとは親テーマと呼ばれる別のテーマの機能とスタイルを継承したテーマです。既存テーマをカスタマイズして使う場合、既存テーマのアップデートに伴い変更内容が失われる可能性がありますが、子テーマを使うと親テーマのアップデートとテーマに加えた変更を両立することができます。
【記事執筆時の環境】
WordPress 5.8
【参考ページ】
Codex 日本語版 - 子テーマ
Theme Handbook - Child Themes
子テーマを使うメリット
多くの既存テーマでは、バグフィックスや機能向上、WordPress バージョンとの整合性をとるため定期的にアップデートされます。アップデートするとテンプレートなど構成ファイルも上書きされます。
もし既存テーマのファイルに直接変更を加えている場合は、アップデートによってその変更内容も失われてしまいます。
子テーマはそうした状況を防ぐために用意された仕組みです。
また既存サイトの機能やデザインを踏襲した類似サイトを制作したい場合も子テーマは活躍します。
例えば既存の日本語サイトをそっくりそのまま英語サイトにするケースでは、英語サイトに日本語サイトの子テーマを適用すると効率的な制作が可能となります。
子テーマに必要なファイル
子テーマは通常のテーマと同様、wp-content/themes フォルダ直下にテーマフォルダを作成しファイルを格納します。
子テーマのフォルダ名は親テーマが判別しやすいような名前を付けることが推奨されていますが、任意で付けて構いません。
子テーマに必要なファイルは下記の２つです。
- style.css
- functions.php
style.cssの記述
一般のテーマと同様、WordPress の規定に従い冒頭にスタイルシートヘッダを記述します。
子テーマ独自の項目として、「Template:」に親テーマのフォルダ名を記述する部分だけが異なります。
下記はサンプルの記述ですが、この２つの項目だけは必須です。
|
1 2 3 4 |
/* Theme Name: Twenty Thirty Child Template: twentythirty */ |
functions.phpの記述
子テーマでは通常、親テーマのスタイルシートを継承し、必要な部分だけ子テーマのスタイルシートで追加を行います。そのため親テーマと子テーマのスタイルシートを適切な順番で読み込む必要があります。
その方法としては functions.php にテンプレートタグ wp_enqueue_style を使ってスタイルシートをエンキュ―するコードを記述します。
下記はコード例ですが、style.css 以外の複数のスタイルシートを使っている場合は、すべてのファイルについて適切な順番でエンキュ―する必要があります。これについては後述します。
|
1 2 3 4 5 6 |
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' ); function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style )); } |
子テーマの動作
スタイルシートの読み込み
スタイルシートはその性質から、複数読み込まれてもファイル内容を上書きすることはありません。すべてのコードが追加で読み込まれ、セレクタ記述の優先度に従い、どのコードを有効とするかブラウザが判断するだけです。同じ優先度の場合は、後から読み込まれたコードが採用されます。
従って、子テーマで使用するスタイルシートと親テーマのスタイルシートとの依存関係を判断し、正しい順番で読み込むようにします。子テーマのスタイルシートを親テーマのスタイルシートの後から読み込むのが原則です。
functions.phpの読み込み
子テーマの functions.php がまず先に読み込まれ、それに続いて親テーマの functions.php が読み込まれます。上書きではなく追加で読み込まれますので、記述内容は両方有効です。
functions.php には関数を定義するのですが、親テーマと子テーマで同じ名前の関数を定義しているとエラーになります。PHPでは関数の重複定義は許されません。
しかし子テーマで親テーマの関数の処理を上書きしたいこともあります。その場合は、まず親テーマでどのように関数を定義しているか調べます。
親テーマで「! function_exist('関数名')」を用い、関数が存在しているか条件判断し関数を定義している場合は、子テーマは同名の関数を定義できます。そして読み込み順番から子テーマでの定義が有効となります。このように子テーマの使用を想定している親切なテーマもあります。
「! function_exist('関数名')」を親テーマで使っていない場合は、フックの優先順位を変更することで対応できる場合があります。
functions.php で定義した関数は、だいたいは add_action もしくは add_filter でフックして処理させます。優先順位を低くし処理が後から実行されるようにすることで、期待する結果が得られることもあります。
優先順位は add_action / add_filter の第3引数で指定しますが、何も指定しないと初期値の10となります。数値が小さいほど優先順位が高くなり早く実行されます。
テンプレートの読み込み
子テーマフォルダにテンプレートファイルがある場合は、そのファイルが使用されます。子テーマフォルダにない場合は、親テーマフォルダにあるファイルが使用されます。
なお、親テーマフォルダにないテンプレートでも子テーマフォルダに含めることができます。
スタイルシートの適切なエンキュ―
スタイルシートの構成と読み込みをどうしているかはテーマにより異なります。WordPress で必須の style.css だけで済ませているテーマもありますが、メンテナンス性からいくつかのファイルに分割しているテーマも数多くあります。
読み込むコードを、header.php に直接記述しているテーマもあり、それも１つの方法です。その場合はコードを記述した順番にファイルが読み込まれますので、子テーマでもその方法を踏襲すればよいと思います。
functions.php にテンプレートタグ wp_enqueue_style を使ってスタイルシートを読み込むことが WordPress ではできるのですが、子テーマでこの方法を採用する場合にどうするか検討します。
親テーマも子テーマも style.css だけしか使っていないとすると、子テーマの functions.php に下記コードを追加すればだいたいは OK です。
このコードで、親テーマの style.css -> 子テーマの style.css の順番で読み込まれます。
|
1 2 3 4 5 6 |
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' ); function child_theme_enqueue_styles() { $parent_style = 'parent-style'; wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style )); } |
次に親テーマで style.css の他に design.css も使っているとしたらどうでしょう？
そして子テーマでも同名の２つのファイルを後から読み込みたいとします。
まず親テーマが、wp_enqueue_style を使ってスタイルシートを読み込んでいるか調べます。今回は下記のようなコードを functions.php に記述しエンキュ―しているとします。
|
1 2 3 4 5 |
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'my-theme-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'my-design-style', get_template_directory_uri() . '/css/design.css' ); } |
この場合は、子テーマの functions.php に下記のコードを記述すれば、読み込み順番は以下となり期待どおりの動作をします。
親テーマの style.css
親テーマの design.css
子テーマの style.css
子テーマの design.css
|
1 2 3 4 5 6 7 |
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' ); function child_theme_enqueue_styles() { $parent_style1 = 'my-theme-style'; $parent_style2 = 'my-design-style'; wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style1, $parent_style2 )); wp_enqueue_style( 'child-design-style', get_stylesheet_directory_uri() . '/css/design.css', array( $parent_style1, $parent_style2 )); } |
コードについて少し説明します。
「array( $parent_style1, $parent_style2 )」となっている部分は、先に読み込むスタイルシートのハンドル名を記述しています。配列の先頭にあるスタイルシートほど先に読み込まれます。
子テーマを使っている場合、get_stylesheet_directory_uri は、子テーマのディレクトリパスを示します。そして、get_template_directory_uri は親テーマのディレクトリパスを示します。
今回親テーマは、get_template_directory_uri を使ってエンキューしているので正しく動作しますが、get_stylesheet_directory_uri を使ってエンキュ―している場合は、親テーマのスタイルシートは読み込まれなくなってしまいます。
そのケースでは子テーマの functions.php に記述するコードは下記のようにします。
|
1 2 3 4 5 6 7 8 9 |
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles' ); function child_theme_enqueue_styles() { $parent_style1 = 'my-theme-style'; $parent_style2 = 'my-design-style'; wp_enqueue_style( $parent_style1, get_template_directory_uri() . '/style.css' ); wp_enqueue_style( $parent_style2, get_template_directory_uri() . '/css/design.css' ); wp_enqueue_style( 'child-theme-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style1, $parent_style2 )); wp_enqueue_style( 'child-design-style', get_stylesheet_directory_uri() . '/css/design.css', array( $parent_style1, $parent_style2 )); } |
子テーマのインストール
既存テーマの子テーマをインストールする場合は、既存テーマの開発元が子テーマのサンプルファイルを配布していることもありますので、入手すればよいでしょう。
ただし公式テーマでも管理画面の検索では子テーマは出てきませんので、開発元のサイトを参照してみてください。
自分で子テーマを作成しインストールする場合は、子テーマフォルダごと圧縮し ZIPファイルにします。そのファイルを通常のテーマと同じように管理画面からアップロードします。
あるいは直接、wp-content/themes フォルダ直下に FTP で子テーマフォルダごと格納しても構いません。
«次の特集記事» マルチサイトの構築
«前の特集記事» 高度な設定でクラス追加
スポンサーリンク
