WordPressテーマの子テーマで親テーマをカスタマイズする際の落とし穴｜現場で使える実践テクニック

#functions.php #WordPress #カスタマイズ #テーマ開発 #子テーマ
C
クリオ
Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「WordPressの子テーマで親テーマをカスタマイズする際の落とし穴」についてお話しします。

子テーマの仕組みをちゃんと理解していない罠

僕も最初、子テーマって「親テーマの上に乗っかるだけ」みたいな軽い気持ちで扱ってたんですよ。
でも現場で仕事をしていく中で、意外とそんなシンプルじゃないなってわかりました。

子テーマの本当の役割って、「親テーマの更新に対応しながら、自分たちのカスタマイズを守る」ことなんです。
でも多くの人は「とりあえず子テーマを作れば安全」くらいの理解で、実は親テーマのファイルをそのまま上書きしちゃってたりするんですよ。

子テーマで絶対に押さえておきたいのが、style.cssの正しいヘッダーです。
これを甘く見ると、本当にめっちゃなことになります。

正しい書き方はこうです：

<!--
Template: （親テーマのフォルダ名）
-->

ほんま大事なのは、このTemplateの部分が親テーマと完全に一致してることなんです。
スペースが違っても、大文字小文字が違っても、WordPressが親テーマを認識してくれません。
僕の現場でも、テンプレート名の綴りが違ってて「子テーマが効かない」って騒いでたケース、何度も見ました。

functions.phpの読み込み順序で起きるよくあるミス

ここからが本当の落とし穴なんですよ。
WordPressのフック・アクションのタイミングを理解していないと、子テーマのfunctions.phpで思った動きをしないことがめっちゃあります。

重要なのは「子テーマのfunctions.phpが親テーマのfunctions.phpより先に読み込まれる」ってことです。
これを知らないと、子テーマで定義した関数が親テーマでも同じ名前で定義されてて上書きされちゃう、みたいなことが起きます。

例えば、こんなケースがあります：

親テーマ側：

function custom_excerpt_length() {
return 55;
}
add_filter('excerpt_length', 'custom_excerpt_length');

子テーマで同じことをしたいと思って、このコードを子テーマのfunctions.phpにコピペしたら、どっちが優先されるかよくわかんなくなっちゃうわけです。
子テーマのfunctions.phpが先に読み込まれるので、親テーマの定義で上書きされちゃいます。

正しい方法は、remove_filter()を使って親テーマの処理を外したうえで、新しい処理を追加することです：

remove_filter('excerpt_length', 'custom_excerpt_length');
add_filter('excerpt_length', function() {
return 30;
});

こうすることで、親テーマの更新があってもちゃんとカスタマイズが活きているか確認できるわけですね。

スタイルシートの継承で失敗する現場パターン

CSS周りでほんまよくある失敗が、子テーマのstyle.cssで親テーマのCSSをうっかり打ち消しちゃってるパターンです。

子テーマのstyle.cssは、親テーマのスタイルをすべて継承してから、自分たちのカスタマイズを上に重ねるんです。
だから、親テーマでmargin: 20pxって指定されてたら、子テーマでは「違う値にしたい」時だけ上書きすればいいんですよ。

でも多くの人が、親テーマのstyle.cssをゴッそり子テーマにコピーして、そこからカスタマイズしようとするんです。
これやると、親テーマが更新されたときに新しいスタイルが反映されなくなるんですよ。めっちゃリスキーです。

正しい流れはこう：

  1. 子テーマのstyle.cssには自分たちのカスタマイズだけを書く
  2. 親テーマのstyle.cssは子テーマのfunctions.phpでwp_enqueue_style()を使って明示的に読み込む
  3. 読み込み順序は「親テーマのスタイル → 子テーマのスタイル」になるようにする

子テーマのfunctions.phpにはこう書くといいですよ：

function my_theme_enqueue_styles() {
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'));
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

こうすることで、親テーマが更新されてもちゃんと新しいスタイルが反映されるようになります。

あと、テンプレートファイルのオーバーライドにも気をつけてください。
子テーマでindex.phpとかsingle.phpをコピーする人も多いんですけど、これも親テーマの更新に対応できなくなる原因になります。
本当に必要なテンプレートだけを、ほんの少しだけ変更するくらいの気持ちでいるといいですよ。

まとめ

子テーマは「親テーマの上に乗っかる」って思うんじゃなくて、「親テーマとの関係を正しく保ちながら、安全にカスタマイズする仕組み」なんだってことが大事です。

ほんま現場で見るのは、子テーマを作ったはいいけど、結局親テーマのファイルをがっつりコピーして「カスタマイズしたもの」になってしまってるケースなんですよ。
親テーマが更新されたら全部が死ぬ、みたいな状況に陥ってます。

大事なのは：

  • style.cssのTemplate名を正確に合わせる
  • functions.phpの読み込み順序を理解する
  • 親テーマのスタイルとテンプレートは「参考にはするけど、原則コピーしない」
  • 「親テーマの更新があったときも動きますか？」を常に意識する

この4つを念頭に置いて子テーマを作れば、保守性めっちゃ高いテーマになります。