WordPress子テーマのスタイルが読み込まれない
子テーマの style.css が読み込まれないのは、WordPress が自動でエンキューしてくれないからです。子テーマのスタイルシートは
公開
子テーマの style.css が読み込まれないのは、WordPress が自動でエンキューしてくれないからです。子テーマのスタイルシートは、子テーマの functions.php で手動で登録する必要があり、そのエンキュー処理にはほぼ必ず2つのうちどちらかのバグがあります。処理がそもそも書かれていないか、あるいは親スタイルシートを依存関係として宣言せずに読み込んでいるために、自分のルールがカスケードの中で間違った位置に来て上書きされてしまうか、です。エンキューを直せばスタイルは戻ってきます。おそらく2013年あたりのチュートリアルからコピーしてきた古い @import の小技は、正しい対処法ではありません。
なぜ起きるのか
典型的な子テーマは、必須の2ファイルで構成されます。親テーマ名を記載したヘッダーブロックを持つ style.css と、functions.php です。ヘッダーの Template: の行が、WordPress にどの親からテンプレートを継承するかを伝えます。WordPress が自動でやってくれるのはそれだけです。ヘッダーを読み、テンプレートのフォールバックを設定し、そこで終わりです。フロントエンドで子テーマの style.css をエンキューすることは一切ありません。
一方で親テーマは、wp_enqueue_scripts にフックした 自身の functions.php から 自身の スタイルシートをエンキューします。子テーマの functions.php が先に実行され、次に親のものが実行され、その後にそのフックにぶら下がった処理がすべて発火します。子テーマが自分のファイルに対して wp_enqueue_style を呼ばなければ、ブラウザはそのファイルを一切リクエストしません。ページが素の親テーマのように見えるのは、まさにそれが素の親テーマだからです。
2つ目の失敗はもっと分かりにくいものです。子テーマのスタイルシートをエンキューし、読み込まれているのに、上書きが何も効かない。これは読み込み順の問題です。2つのルールの詳細度が同じ場合、後に 読み込まれた方が勝ちます。子テーマの CSS が親のものより先に読み込まれていれば、引き分けは毎回親が勝ちます。wp_enqueue_style の依存関係の配列が、この順序を強制するためのものです。
もう1つよくある間違い。get_template_directory_uri() は 親 テーマのフォルダを指し、get_stylesheet_directory_uri() は 有効化中の（子） テーマのフォルダを指します。これを入れ替えると、親の style.css をもう一度エンキューするだけで、子の方には一切触れないことになります。
手順どおりの修正方法
まず、実際に何が読み込まれているのかを確認します。 崩れているページを開き、ソースを表示して、子テーマのフォルダ名で検索します。WordPress はエンキューされたスタイルを <link id="handle-css" href="..."> としてレンダリングします。id はハンドル名に -css を付けたものです。子テーマの style.css が <head> の中に全く見当たらなければ、エンキュー処理が動いていません。そこにあるのにスタイルが適用されないなら、依存関係・順序の問題です。このチェック1つで、2つのバグのどちらなのかが分かります。
次に、親の本当のハンドル名を突き止めます。 最近のテーマの多く（Astra、GeneratePress、Twenty-* 系テーマ）は、すでに自身のスタイルシートを特定のハンドル名でエンキューしています。astra-theme-css、generate-style-css、twenty-twenty-four-style といった具合です。その正確な文字列が必要です。親テーマを grep するか、ソース表示の <link id="...-css"> から読み取ってください（末尾の -css を外します）。
3つ目に、エンキュー処理を書きます。 親がすでに自身のスタイルシートを読み込んでいるという一般的なケースでは、親を再エンキューは しません。子だけをエンキューし、親のハンドル名を依存関係として指定して、自分のものが親の後に読み込まれるようにします。
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles', 20 );
function child_enqueue_styles() {
wp_enqueue_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( 'astra-theme-css' ), // <-- the parent's REAL handle
wp_get_theme()->get( 'Version' )
);
}親テーマが自身のスタイルシートをエンキュー しない 場合（一部の古いテーマやミニマルなテーマは @import に頼っています）は、両方をエンキューし、子を親に依存させます。
<?php
add_action( 'wp_enqueue_scripts', 'child_enqueue_styles' );
function child_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' ),
wp_get_theme()->get( 'Version' )
);
}wp_get_theme()->get('Version') の引数がキャッシュバスターの役割を果たします。子テーマの style.css ヘッダーの Version: の行を上げると、ブラウザが再取得します。これを省くと、CSS を編集しても何も変わらないと悪態をつくことになりますが、実際はただキャッシュされているだけです。
functions.php に構文エラーがあると、ファイル全体が何のエラーも出さずに死に、エンキュー処理は一切実行されません。これはまさに「スタイルが読み込まれない」という形で現れます。WP_DEBUG を有効にするか、debug.log を当社の WordPress エラーログ解読ツール に貼り付けて、致命的エラーをすばやく見つけてください。
やってはいけないこと
@import を使わないこと。 Codex 時代のアドバイスは、子テーマの style.css の先頭に @import url("../parenttheme/style.css"); を置くというものでした。動くには動きますが、遅いです。ブラウザは子テーマの CSS をパースし終えるまで親テーマの CSS のダウンロードを開始できないため、2つのリクエストが並行ではなく直列で走ってしまいます。WordPress 公式のハンドブックも、何年も前からこの方法を推奨していません。あなたのチュートリアルがこれをやれと言ったのなら、そのチュートリアルこそがスタイルがガタつく原因です。
ハンドル名 'parent-style' をハードコードして、親ファイルを闇雲にエンキューしないこと。 あの有名な Codex のスニペットはまさにこれをやっており、すでに別のハンドル名でスタイルシートを登録しているテーマではすべて間違いになります。結果として親の CSS を2回読み込み、依存先が存在しないかもしれないハンドル名を指すことになります。
functions.php のトップレベルで wp_enqueue_style を呼ばないこと。 これは wp_enqueue_scripts にフックした関数の中で実行される必要があります。呼ぶのが早すぎると、何も起こりません。
親の functions.php を丸ごと子にコピーしないこと。 両方とも読み込まれ、子の方が先に実行されます。コピーすると関数の重複宣言が起き、致命的エラーになります。
1つ注意点。ここまでの話はすべて クラシック（PHP テンプレート）テーマについてのものです。親が ブロックテーマ の場合、スタイルの流れは主に theme.json とサイトエディターを経由し、style.css による上書きの挙動も異なります。その場合はこのエンキューが正解だと決めつけず、あまり信用せずに直接テストするのが私のおすすめです。
それでも解決しないなら
子テーマの style.css ヘッダーの Template: の行が、親の表示名ではなく、親の フォルダ 名と大文字小文字まで完全に一致しているか確認してください。それからソース表示をもう一度チェックします。ハンドルが存在し、親の後に読み込まれ、バージョンのクエリ文字列が上がっているか。<link> があって、最後に読み込まれていて、それでも CSS が適用されないなら、もはやエンキューの問題ではありません。詳細度の問題であり、修正の舞台はルールそのものへと移ります。