CSSやPHPをファイルで書き換えるなら、作業前に子テーマを用意するのが基本よ。子テーマは変更分だけを別フォルダに持つから、親テーマを更新しても変更は消えないの。
あら、いらっしゃい、のりお。今日はどんな顔してるのかと思ったら、また青いわね。
サチエさん、大変なんです。テーマをカスタマイズしたんですけど、テーマを更新したら消えるって聞いて……。せっかく直したのに、怖くて更新ボタンを押せないんです。
あら、それは正しい怖がり方よ。消える前に来たあんた、今日は少し偉いじゃない。いいこと教えてあげるから、よく聞いてちょうだい。
子テーマとは何か｜なぜ必要になるのか
あのね、テーマを直接編集してカスタマイズしていると、アップデートで編集内容が上書きされて、元に戻ってしまうのよ。それはね、他人の家を勝手にリフォームするようなもの。持ち主が新しい家具に入れ替えれば、あんたの工夫なんて一緒に片付けられちゃうの。
この事故を防ぐ仕組みが「子テーマ」よ。結論を先に言うわね。CSSやPHPをファイル単位で書き換えるなら、作業前に子テーマを用意するのが基本。子テーマは親テーマのデザインと機能を引き継ぎ、変更分だけを別フォルダに持つテーマで、親テーマだけを更新しても変更は残るの。
公式のTheme Handbookでも、子テーマは「親テーマのコードを直接編集せずに既存テーマを変更できる、親テーマの拡張」と説明されているわ。変更を親テーマから分離して、更新しても失わないこと。それが中心的な役割なのよ。
親テーマを直接編集すると更新で消える
テーマ更新というのは、テーマフォルダの中身を新しいファイルで置き換える処理なの。だから、親テーマのstyle.cssやfunctions.php、テンプレートファイルを直接編集していると、更新で編集ごと置き換わって、カスタマイズが消えてしまうわ。
慌てる男はモテないわよ。順番よ、順番。まず仕組みを分かってから、手を動かすの。
子テーマの仕組み
子テーマが有効な状態では、WordPressはまず子テーマ側を確認して、無いものは親テーマ側から読み込むの。見た目と機能は親テーマから継承して、子テーマには差分だけを置く。ここが肝心よ、よく聞いて。
ただし、ファイルの種類で扱いが違うの。
- テンプレートファイル：親テーマと同名のファイル（例：single.php）を置くと、子テーマ側が優先されて上書きする
- functions.php：上書きではないの。親子両方が読み込まれて、子テーマ側が先に読み込まれる。親テーマのfunctions.phpを丸ごとコピーすると、同名関数の二重定義などで致命的エラーになりやすいから、避けてちょうだい
- style.css：必須ファイルだけど、中身のCSSが自動で読み込まれるとは限らないの。手順の中で読み込みを明示するわ
それと、テーマの階層は親と子の2階層まで。「孫テーマ」は作れないのよ。欲張って階層を深くしようとしないこと。
子テーマが不要なケースもある
何でもかんでも子テーマ、じゃないのよ。カスタマイザーの設定変更、「追加CSS」への記述、ウィジェットやメニューの設定はデータベースに保存されるから、基本的に更新で消える心配はないわ。
逆に、テンプレートの書き換え、functions.phpへの処理追加、CSSファイルの直接編集は子テーマの出番。「ファイルを開いて編集するかどうか」が目安なの。ファイルを開かない変更なら、無理に作らなくていいのよ。
じゃあ、僕が触ったのはファイルなので、子テーマが要るんですね。作り方って、難しいんですか？
難しくないわ。型があるのよ。公式の型どおりに進めればいいの。
子テーマの作り方｜公式ハンドブックに沿った手順
ここではクラシックテーマを想定した自作手順を紹介するわね。必要なものは子テーマ用フォルダと、中に入れるstyle.css、多くの場合はfunctions.php。必須なのはstyle.cssだけで、functions.phpは読み込みのために用意するの。
なお、ブロックテーマではスタイルの中心がtheme.jsonだから、後で出てくるstyle.cssの読み込みが不要なケースもあるわ。そこは読み替えてちょうだい。
手順1：子テーマフォルダを作る
wp-content/themes/の中に子テーマ用フォルダを作りなさい。フォルダ名に厳密な決まりはないけれど、「親テーマのフォルダ名-child」の形が分かりやすくて、公式ハンドブックでもケバブケース（小文字とハイフン）が例示されているわ。たとえば親テーマがTwenty Twenty-Fourなら、twentytwentyfour-childのようにするの。
作業はFTPでサーバーに置く方法と、ローカルで作ってZIP化して「外観＞テーマ＞新規追加＞テーマのアップロード」から入れる方法があるわ。親テーマが先にインストールされていることが前提で、無い状態では子テーマは動作しないから、そこは忘れないで。
手順2：style.cssに必須ヘッダーを書く
style.cssを子テーマフォルダに作って、先頭にコメント形式のヘッダーを書くの。最低限必要なのは、次の2項目よ。
/*
Theme Name: Twenty Twenty-Four Child
Template: twentytwentyfour
*/- Theme Name：子テーマの名前。テーマ一覧に表示される必須項目よ
- Template：親テーマの「フォルダ名」。表示名ではなく、wp-content/themes/直下のフォルダ名と完全に一致させるの。1文字でも違うと親テーマが見つからず、子テーマとして認識されないわ
Descriptionなどを足すこともできるけど、必須なのはこの2つ。ヘッダーの下にCSSを追記していくのよ。名前って大事なの。1文字違うだけで、別人の扱いになるんだから。
手順3：functions.phpでスタイルシートを読み込む
ここ、つまずく子が多いのよ。子テーマを作っただけでは、style.cssに書いたCSSが読み込まれないことがあるの。親テーマが子テーマ側まで読み込む作りなら不要な場合もあるけれど、テーマで挙動が異なるから、子テーマのfunctions.phpからwp_enqueue_style()で明示的に読み込むのが確実よ。
公式ハンドブックの基本形は、wp_enqueue_scriptsフックに関数を登録して、その中でwp_enqueue_style()を呼ぶ形。親子両方のstyle.cssを読み込む例は、次のとおりよ。現行のハンドブックでは、親のパスの取得にget_parent_theme_file_uri()を使う例が載っているわ。あわせて見ておきなさい。
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_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 ),
wp_get_theme()->get( 'Version' )
);
}混同しやすいのが、パスの取得関数なの。get_template_directory_uri()は親テーマを、get_stylesheet_directory_uri()は有効なテーマ、つまり子テーマを指すわ。子テーマのCSSを後に読み込ませるため、第3引数（依存関係）に親テーマのハンドル名を指定しているの。順序が逆だと、同じセレクタは親側に上書きされて、「書いたのに効かない」状態になるわよ。
公式ハンドブックでは、親CSSの読み込みはwp_enqueue_style()を使う形で説明されているわ。それと、さっきも言ったけれど、ブロックテーマではスタイルの中心がtheme.jsonのため、style.cssの読み込みが不要なケースもあるわ。
手順4：子テーマを有効化して確認する
ファイルを用意したら、「外観＞テーマ」で子テーマが表示されることを確認して、「有効化」をクリックなさい。有効化は子テーマ側で、親テーマはインストールしたままにするのよ。
有効化直後は、見た目が親テーマと変わらないのが正常。差分がまだ空だからね。焦らないの。そこからstyle.cssへの追記やテンプレート編集を進めるのよ。テンプレートを上書きする場合は、親テーマから対象ファイルを子テーマへコピーして、コピー側だけを編集すること。親側の原本には手を付けない。それができない男との違いよ。
自分で作れるんですね。でも、僕の使っているテーマには公式の子テーマがあるみたいで……。
あら、いいところに気づいたじゃない。公式があるなら、まず公式よ。無理に自作して遠回りする必要はないの。
テーマ別の事情｜公式子テーマがあるケースと自作するケース
公式が子テーマを用意しているテーマもあるわ。代表例がSWELLとLightning。公式品がある場合は、原則としてそちらを使うのが安全よ。
SWELL子テーマ｜公式のものを使う
有料テーマSWELLには、公式が用意している子テーマがあるわ。入手方法や更新の扱いは、SWELLの公式サイトの案内を確認してちょうだい。
親子両方をインストールして、有効化は子テーマ側にすること。CSS追記や処理追加は、公式子テーマ側に書きなさい。自作も可能だけど、公式品がある以上、指定ミスなどのリスクを取る理由は乏しいケースよ。
Lightning子テーマ｜公式サンプルを使うか自作するか
無料テーマLightningにも、公式の子テーマ(サンプル)の案内があるわ。自作も可能だけど、公式のものを使えばヘッダーや基本構成を一から書かずに済むの。内容は版によって変わるから、公式サイトの最新の案内を確認してちょうだい。
配布物の構成は世代で違うことがあるから、置き場所は必ず公式の案内どおりにすること。
公式子テーマが無いテーマでは自作する
公式子テーマが無いテーマでは、前の章の手順で自作するのよ。重要なのは、Templateに書くフォルダ名の正確さ。見た目上のテーマ名と一致しないことが多いから、wp-content/themes/の中を直接確認すること。それを怠ると、名前違いで認識されないわ。
作ったあとに、画面が真っ白になったらどうしよう……って、つい心配で。
心配は悪くないわ。ただ、心配するなら対処までセットで覚えなさい。よくある失敗は、だいたい決まっているのよ。
よくある失敗と対処法
サイトが真っ白になる・致命的エラーと表示される
有効化直後に真っ白になったり、「致命的なエラーが発生しました」と表示されたりする場合は、functions.phpのPHP構文エラーが典型的な原因よ。閉じ括弧やセミコロンの抜け、全角文字の混入、関数名の重複などが考えられるわ。
対処は、FTPなどでfunctions.phpを空に近い状態へ戻すか、フォルダ名を変更して子テーマを無効化して、復旧するか確認すること。復旧したら、追加コードを少しずつ戻して原因を特定するの。作業前のバックアップと、可能ならテスト環境での確認が安全よ。
なお、先頭には<?phpを書くけれど、末尾の閉じタグ?>は省略が一般的で、余分な空白による不具合を避けられるわ。
CSSが反映されない
デザインが変わらない場合は、次の順で確認なさい。順番よ、順番。
- 読み込まれているか：functions.phpでwp_enqueue_style()の読み込みを行っているか。style.cssは置くだけで自動的に読み込まれるとは限らないわ
- 読み込み順：子テーマ側が先だと、同じ詳細度では後勝ちの原則で親側が優先されるの。依存関係を見直してちょうだい
- キャッシュ：ブラウザやプラグイン、サーバーのキャッシュが古いCSSを返していることがあるわ。キャッシュ削除後に再確認すること
- 詳細度と競合：親側のセレクタの詳細度が高いと子側が負けるの。追加CSSなど別途出力されるCSSとの競合もあるわ
- 場所と有効化：親側のstyle.cssを編集していないか、有効化が親テーマのままになっていないかを確認なさい
テーマ一覧に子テーマが表示されない・「壊れている」と出る
style.cssがフォルダ直下に無い、Theme Nameが無い、Templateが親テーマのフォルダ名と一致していない、といったヘッダー周りの不備が主な原因よ。Templateは表示名ではなくフォルダ名で、大文字小文字まで一致させることを再確認してちょうだい。親テーマ自体が無い場合も、子テーマは使えないわ。
子テーマを有効化したら設定が初期化されたように見える
カスタマイザーの設定やメニュー、ウィジェットの一部はテーマごとに保存されるため、子テーマへ切り替えると引き継がれず、初期状態に見えることがあるの。故障ではなく、仕様に近い挙動よ。切り替え前に設定をメモして、切り替え後に再設定する前提で進めてちょうだい。本番では、アクセスの少ない時間帯かテスト環境での確認が無難よ。
よくある質問
「追加CSS」に書いたCSSも、テーマの更新で消えますか。
基本的に消えないわ。カスタマイザーの設定変更や「追加CSS」への記述は、データベースに保存されるからよ。
親テーマの functions.php を、子テーマにそのままコピーしてもいいですか。
避けなさい。functions.php は上書きではなく、親子両方が読み込まれるの。丸ごとコピーすると、同名関数の二重定義などで致命的エラーになりやすいわ。
子テーマをもとに、さらに「孫テーマ」を作れますか。
作れないわ。テーマの階層は、親と子の2階層までよ。
ありがとうございます、サチエさん。消えるのが怖くて止まってたけど、やる順番が見えました。
そうよ。怖いから何もしない男は、もっとモテないわよ。ファイルを開く前に受け皿を用意する。それだけでいいの。今度は更新の前に、子テーマの相談にいらっしゃい。
まとめ
- 親テーマのファイルを直接編集すると、テーマ更新で編集内容が上書きされて消える。カスタマイズは子テーマ側に分けて持つ
- 自作の最小構成は子テーマフォルダとstyle.css。Theme Nameと、親テーマのフォルダ名を正確に書いたTemplateが必須ヘッダーになる
- CSSを確実に読み込むには、functions.phpでwp_enqueue_scriptsフックとwp_enqueue_style()を使う。読み込みは、公式ハンドブックが説明するwp_enqueue_style()を使う
- functions.phpは親子両方が読み込まれるため、親テーマのコードを丸ごとコピーしない。テンプレートファイルは同名ファイルを置くことで上書きできる
- SWELL子テーマやLightning子テーマのように公式品・公式サンプルがあるテーマでは、まず公式のものを使う
- 真っ白ならfunctions.phpの構文を、CSSが反映されなければ読み込み・順序・キャッシュ・詳細度の順に切り分ける
