[WordPressテーマを安全カスタマイズ！]更新の影響を受けない「子テーマ」の作り方

初めに – 子テーマのススメ
「子テーマ（Child Theme）」とは
子テーマの作り方
お終いに – 子テーマは公式で提供されることも

初めに – 子テーマのススメ

　以前ブログで使用しているテーマのアップ―デートを行った際、直接PHPファイルに書き込んでいたコードが全てリセットされ、サイトの外観が大きく崩れたことがあった。見て分かる通り、当ブログはカスタマイズを多く施しているので、それらの修正には時間がかかり、定期的にこの作業を行うのは現実的ではないと思った。

　そこで調べたところ、「子テーマ」というシステムを利用することで、この手の問題は解決できるのだと知った。ここではWordPessテーマのアップデートへの備えとして、子テーマに関する基本的な知識と、その具体的な作成方法を記していく。これで面倒な二度手間作業とはおさらばグッバイだ！

「子テーマ（Child Theme）」とは

　子テーマ（Child Theme）とは、親テーマ（Parent Theme）の機能を継承しながら、そのデザインや機能をカスタマイズするためのテーマで、これを作成するのには以下のようなメリットがある。

安全なカスタマイズ:
　親テーマのファイルを直接編集することなく、カスタマイズが可能。これにより、親テーマにアップデートがあってもカスタマイズが失われることがない。
簡単なリバート:
　子テーマを無効化するだけで、簡単に元の親テーマの状態に戻すことができる。これにより、カスタマイズがうまくいかなかった場合でも、簡単にリバート（取り消し）できる。
オリジナルテーマの保護:
　親テーマのコードをそのまま保護しつつ、必要な変更だけを子テーマで行うことができる。これにより、親テーマの開発者が提供する新機能や修正をそのまま利用できる。
組織化されたコード:
　カスタマイズを子テーマにまとめることで、コードが整理され、管理しやすくなる。特に大規模なカスタマイズを行う場合に便利。
学習と実験:
　子テーマを使うことで、テーマ開発の学習や実験がしやすくなる。親テーマを壊す心配がないため、安心して新しい技術やアイデアを試すことができる。
テーマの互換性:
　子テーマを使うことで、親テーマの互換性を保ちながらカスタマイズが可能。これにより、他のプラグインや機能との互換性も維持しやすくなる。

子テーマの作り方

①子テーマフォルダの作成

　wp-content/themesディレクトリ内に新しいフォルダを作成する。フォルダ名はそれがあるテーマの子テーマだと認識しやすいと便利なので、例えば親テーマが「twentytwentyfour（WordPress 6.4のデフォルトテーマ）」ならば、「twentytwentyfour-child」という名前にするのがいいだろう。※以降、登場するコードなどはこのテーマであることを前提とする。

②スタイルシートの作成

　フォルダを作成しただけでは、テーマとして動作せず、フォルダ内にスタイルシートを持たなければ破損したテーマとして扱われる。よって子テーマフォルダ内に「style.css」ファイルを作成し、以下の内容を追加する：

/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/
@import url("../twentytwentyfour/style.css");

/* 追加CSSの内容をここに貼り付け */

　スタイルを引き継いでも、親テーマの「追加CSS」おぼび「カスタマイズ」で変更したスタイルは引き継げないので、手動で「/* 追加CSSの内容をここに貼り付け */」コメントの下にコピーする。しかしそれではプレビューを見ながらのカスタマイズができないので、子テーマの「追加CSS」にコピーするのが一番いいかもしれない。

　また先ほどのコード「Tenplate: 〇〇〇」によって、以後それが親テーマだと判別されるので、そこに指定する名前は”親テーマのフォルダ名”と一致していなければならないことに注意する。一方、子テーマ名は自由に付けることができるが、これも曖昧さ回避のため自身のフォルダ名と一致させるのが無難だろう。

③「functions.php」の作成

　子テーマフォルダ内に「functions.php」ファイルを作成し、親テーマのスタイルシートを読み込むコードと、任意のカスタム関数を追加する。以下のコードにより子テーマのスタイルシートが読み込まれる前に、親テーマのスタイルシートが読み込まれる（継承される）ことになり、またカスタム関数でカスタムウィジェットの登録や、独自のショートコードの作成などができるようになる。つまりこれで子テーマを自由にカスタマイズできるようになるのだ。

<?php
function my_theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

// ここにカスタム関数を追加
function my_custom_function() {
// カスタム関数の内容
}
?>

　最初に定義された「my_theme_enqueue_styles」関数が、親テーマのスタイルシートを子テーマに適用（キュー登録）するための関数で、内容としては「get_template_directory_uri()」関数で親テーマのディレクトリURIを取得し、そこの「/style.css」を参照して「wp_enqueue_style」関数でスタイルをキュー登録している。

　次の「add_action」では定義した「my_theme_enqueue_styles」関数を、「wp_enqueue_scripts」という「アクションフック（action hooks）」に追加（紐づけ）している。アクションフックとはWordPress独自の機能で、特定のイベントやタイミングでカスタム関数を実行するための仕組みである。先ほどの「wp_enqueue_scripts」に登録された関数は、スクリプトやスタイルが読み込まれるタイミング――つまりページが読み込まれる際に呼び出される。

　呼び出し順は基本的にキューに登録した順番だが、以下のように関数にプライオリティ（優先度）を設定することで、実行順序を制御することができる。デフォルトのプライオリティは10だが、より優先度を高く場合は数値を低くし、低くしたい場合は数値を高くすればいい。例えば以下のコードでは、上に記載された関数が先にアクションフックに追加されるが、実際にはプライオリティの差によって下の関数から実行される。

add_action('wp_enqueue_scripts', 'my_custom_script_function', 20);
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles', 10);

④子テーマに要素を追加する方法

　テンプレートファイルのコピーと編集を行う。例えばヘッダーに要素を追加したい場合、親テーマの「header.php」ファイルを子テーマフォルダにコピーして、それを編集して必要な要素を追加して保存する。必要に応じて子テーマの「style.css」を編集して、追加した要素の見た目を整える。

　なお子テーマにコピーされたファイルは、同名の親テーマファイルと置き換えて処理されるため、以後コピーされたファイルへの更新は行われないことになる。よって長期間子テーマを使い続ける場合どこかの時点でWordPressバージョンとの互換性が保てなくなるか、セキュリティが不十分になる可能性を秘めていることは念頭に置いておく。

⑤子テーマの有効化

　WordPress管理画面にて「外観」→「テーマ」に移動し、子テーマを見つけて「有効化」ボタンをクリックする。こうするだけで、WordPressのテンプレート階層に従って、子テーマにファイルが存在する場合はそれが優先され、子テーマに存在しないテンプレートファイルやスタイルシートは、親テーマから自動的に読み込まれる（継承される）ことになる。これでやっと、安全にカスタマイズした外観を適用できるわけだ。