WordPressで子テーマを作ったのに、親テーマのCSSが反映されないと「作り方を間違えたのでは？」と不安になります。
しかし、この問題は珍しいものではなく、原因の多くはstyle.css のヘッダー記述ミス、親テーマの読み込み設定不足、子テーマの有効化ミスのどれかです。
子テーマは、親テーマを直接編集せずにカスタマイズを行うための重要な仕組みです。正しく設定できれば、親テーマのアップデート時に変更内容が上書きされにくくなり、安全に運用できます。
この記事では、WordPressの子テーマとは何か、親テーマのCSSが反映されない主な原因、正しい子テーマの作成方法、よくある確認ポイントまでわかりやすく解説します。
WordPressの子テーマとは？
子テーマとは、親テーマの機能やデザインを引き継ぎながら、独自のカスタマイズを追加するためのテーマです。
親テーマをそのまま編集すると、テーマのアップデートが入ったときに変更内容が上書きされる可能性があります。子テーマを使えば、親テーマ本体を触らずにCSSやテンプレート、functions.php の追加修正ができます。
つまり、WordPressで既存テーマを安全にカスタマイズしたい場合は、基本的に子テーマを使うのが定石です。
子テーマを使うメリット
親テーマのアップデートに強い
親テーマ本体を直接編集しないため、アップデート時に修正内容が消えにくくなります。
カスタマイズ範囲を分けて管理しやすい
親テーマの標準機能と、自分で追加した変更を分けて管理できるため、あとから見直しや修正がしやすくなります。
テンプレートやCSSを必要な分だけ上書きできる
全体を作り直す必要はなく、変更したいファイルだけを子テーマ側に置いてカスタマイズできます。
子テーマを作ったのに親テーマのCSSが反映されない主な原因
子テーマで親テーマのCSSが反映されないときは、次のどれかが原因であることが多いです。
style.css のヘッダー情報が正しく書けていない
子テーマの style.css には、テーマ情報を記述するヘッダーが必要です。特に Template は必須で、ここには親テーマのフォルダ名を正確に書く必要があります。
親テーマの style.css を正しく読み込めていない
子テーマを作っただけでは、環境によっては親テーマのCSSが自動で反映されないことがあります。functions.php で親テーマのスタイルシートを明示的に読み込む設定が必要です。
子テーマ側の style.css だけが読み込まれている
子テーマの style.css は存在していても、親テーマのCSSが読み込まれていなければ、元の見た目が崩れることがあります。
有効化しているテーマが違う
子テーマを作成したあと、WordPress管理画面でその子テーマを有効化していなければ反映されません。ファイルを作っただけでは適用されないため注意が必要です。
WordPressの子テーマの正しい作成方法
1. 子テーマ用フォルダを作成する
wp-content/themes の中に、子テーマ用のフォルダを作成します。
たとえば親テーマが twentytwentyfiveなら、子テーマのフォルダ名は twentytwentyfive-child のようにしておくとわかりやすくなります。
フォルダ名に空白は使わず、英数字とハイフンで管理するのが安全です。
2. style.css を作成する
子テーマフォルダの中に style.css を作成し、テーマヘッダーを記述します。
@charset "UTF-8";
/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Text Domain: twentytwentyfive
*/このうち特に重要なのは次の2つです。
Theme Name：子テーマとして管理画面に表示される名前Template：親テーマのフォルダ名
Template にテーマ名ではなくフォルダ名を書く点は間違えやすいため注意してください。
3. functions.php を作成して親テーマのCSSを読み込む
子テーマフォルダの中に functions.php を作成し、親テーマのCSSを読み込む設定を追加します。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}まずはこの記述で親テーマのスタイルシートを読み込みます。
4. 子テーマのCSSも明示的に読み込む
環境によっては、親テーマのCSSは読めても子テーマのCSSがうまく反映されないことがあります。その場合は、子テーマの style.css も明示的に読み込む形にします。
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
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' )
);
}この形にしておくと、親テーマ → 子テーマの順にCSSが読み込まれやすくなり、上書きの意図も明確になります。
5. 子テーマを有効化する
ファイルの準備ができたら、WordPress管理画面の「外観」→「テーマ」から作成した子テーマを有効化します。
ここで親テーマのままになっていると、子テーマ側の設定は反映されません。
親テーマのCSSが反映されないときの確認ポイント
Template の値が親テーマのフォルダ名と一致しているか
もっとも基本的で、もっとも多いミスです。テーマ名ではなく、実際のフォルダ名と一致しているか確認してください。
functions.php に記述ミスがないか
セミコロンの抜け、引用符の不一致、関数名の重複などがあると、CSS以前にPHPエラーで正常に動作しないことがあります。
親テーマのCSSパスが正しいか
get_template_directory_uri() は親テーマを指し、get_stylesheet_directory_uri() は有効化中のテーマ、つまり子テーマを指します。両方の役割を混同しないようにしましょう。
ブラウザキャッシュが残っていないか
コードを修正しても見た目が変わらない場合は、ブラウザキャッシュやキャッシュ系プラグインの影響も疑ってください。
子テーマを本当に有効化しているか
ファイル作成後に有効化し忘れているケースも少なくありません。外観メニューで現在有効なのが子テーマになっているか確認してください。
子テーマでカスタマイズするときの基本
CSSだけを変えたいなら style.css を編集する
見た目の微調整だけであれば、まずは子テーマの style.css で対応できます。
テンプレートを変更したいなら必要なファイルだけコピーする
たとえば single.php や page.php を変更したい場合は、親テーマから子テーマへ必要なテンプレートだけコピーして編集します。
functions.php には追加分だけを書く
親テーマの functions.php を丸ごとコピーするのではなく、子テーマでは追加したい処理だけを書くのが基本です。
よくある疑問
まとめ
WordPressで子テーマを作ったのに親テーマのCSSが反映されない場合は、次の順で確認すると整理しやすくなります。
style.cssのヘッダー情報は正しいかTemplateに親テーマのフォルダ名を書いているかfunctions.phpで親テーマのCSSを正しく読み込んでいるか- 必要に応じて子テーマのCSSも明示的に読み込んでいるか
- 子テーマを有効化しているか
子テーマは、WordPressを安全にカスタマイズするための基本です。作成手順を正しく押さえておけば、親テーマの更新を気にしすぎずに運用しやすくなります。
