閉じる

WordPressで子テーマのCSSが読み込まれない原因と解決策

広告

WordPressで子テーマを作成し、独自のカスタマイズを加えようとした際、変更したはずのCSSが反映されないというトラブルは非常に多く発生します。

子テーマは親テーマの機能を維持しつつ安全にデザインを変更できる便利な仕組みですが、CSSの読み込み順序や記述方法には特有のルールが存在します。

本記事では、2026年現在の最新のWordPress仕様に基づき、子テーマのCSSが読み込まれない主な原因とその解決策について詳しく解説します。

初心者の方から中級者の方まで、スムーズにトラブルシューティングが行えるよう、具体的なコード例を交えてご紹介いたします。

目次 [ close ]
  1. WordPress子テーマでCSSが反映されない際の基礎知識
  2. 原因1：functions.phpでの読み込み設定ミス
    1. wp_enqueue_styleの記述内容を確認する
    2. 依存関係（dependencies）の指定漏れ
  3. 原因2：親テーマと子テーマの優先順位（詳細度）の問題
    1. 親テーマのスタイルが強力すぎるケース
  4. 原因3：キャッシュ機能による反映遅延
    1. ブラウザキャッシュのクリア
    2. キャッシュ対策としてのクエリ文字列付与
  5. 原因4：style.cssのヘッダー情報の記述ミス
  6. 原因5：構文エラーと全角スペースの混入
  7. 正しいCSS読み込みのテンプレート
  8. まとめ

WordPress子テーマでCSSが反映されない際の基礎知識

子テーマのデザインが反映されない原因を探る前に、まずはWordPressにおける子テーマの基本的な動作原理を理解しておく必要があります。

子テーマは、親テーマのファイルを継承しながら、特定のファイルだけを上書きするための仕組みです。

CSSに関しても、基本的には親テーマのスタイルを読み込んだ後に、子テーマのスタイルを読み込むことで上書きを成立させます。

しかし、近年の高度なテーマでは、CSSの読み込みをプログラム（PHP）で制御しているため、単純なファイルの作成だけでは反映されないケースが増えています。

まずは、子テーマの「style.css」が正しく認識されているかを確認することが解決への第一歩となります。

原因1：functions.phpでの読み込み設定ミス

もっとも頻繁に見られる原因は、子テーマのfunctions.phpにおけるwp_enqueue_style関数の記述ミスです。

以前のWordPressではCSS内で@importを使用する方法が一般的でしたが、現在はパフォーマンスの観点から推奨されていません。

wp_enqueue_styleの記述内容を確認する

子テーマのfunctions.phpで、親テーマと子テーマのスタイルシートを適切な順番でキュー（登録）できているか確認しましょう。

以下のコードは、親テーマのCSSを先に読み込み、その後に子テーマのCSSを読み込むための標準的な記述例です。

PHP
<?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' ), // ここで親テーマのハンドル名を指定
        wp_get_theme()->get('Version') // キャッシュ対策としてバージョンを付与
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

このコードを実行すると、HTMLのヘッダー部分に以下のような順序でリンクタグが出力されます。

実行結果
<link rel='stylesheet' id='parent-style-css' href='https://example.com/wp-content/themes/parent-theme/style.css?ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css' href='https://example.com/wp-content/themes/child-theme/style.css?ver=1.0.0' type='text/css' media='all' />

依存関係（dependencies）の指定漏れ

上記のコード内にあるarray( 'parent-style' )という記述は、「parent-style」というIDのCSSを読み込んだ後にこのCSSを読み込むという依存関係を示しています。

この指定が漏れていると、子テーマのCSSが先に読み込まれてしまい、後から読み込まれた親テーマのCSSによって上書きされてしまう可能性があります。

ブラウザの「ページのソースを表示」機能を使って、子テーマのCSS（child-style-cssなど）が親テーマのCSSよりも下側に記述されているか必ず確認してください。

原因2：親テーマと子テーマの優先順位（詳細度）の問題

CSSファイル自体は正しく読み込まれているものの、記述したスタイルが適用されない場合は、CSSの「詳細度」が原因である可能性が高いです。

CSSには、より具体的なセレクタ（IDやクラスの組み合わせ）が優先されるというルールがあります。

親テーマのスタイルが強力すぎるケース

例えば、親テーマで#main .content pのようにIDを含めて詳しく指定されている場合、子テーマで単にpタグに対してスタイルを書いても反映されません。

この問題を解決するには、子テーマ側でも同等以上の詳細度でセレクタを記述する必要があります。

ブラウザのデベロッパーツール（F12キー）を使用し、適用したい要素を選択して、どのセレクタが優先されているかを確認してください。

もし自分の書いたスタイルに打ち消し線（横線）が引かれている場合は、詳細度で負けている証拠です。

無理に!importantを多用すると後の管理が困難になるため、まずは親テーマと同じセレクタをコピーして子テーマに貼り付け、そこから調整を行うのがベストな方法です。

原因3：キャッシュ機能による反映遅延

コードを修正した直後に反映されない場合、サーバーやブラウザに古いデータが残っている「キャッシュ」が原因であることが非常に多いです。

特に高速化プラグインを導入しているサイトや、CDN（Cloudflareなど）を利用しているサイトでは注意が必要です。

ブラウザキャッシュのクリア

まずは、ブラウザのキャッシュを完全に無視して再読み込みを行う「スーパーリロード（Ctrl + F5 など）」を試してください。

また、シークレットモード（プライベートブラウズ）でサイトを開き、同様に反映されていないか確認することも有効です。

キャッシュ対策としてのクエリ文字列付与

WordPressのwp_enqueue_style関数では、第4引数にバージョン番号を指定できます。

これをファイルの更新日時に合わせるように設定すると、CSSを更新するたびにブラウザが「新しいファイル」として認識するようになります。

PHP
// ファイルの更新日時をバージョンとして付与する例
wp_enqueue_style( 'child-style',
    get_stylesheet_uri(),
    array( 'parent-style' ),
    filemtime( get_stylesheet_directory() . '/style.css' )
);

このように記述することで、URLの末尾に?ver=1715832000のような数値が付与され、キャッシュによる古いスタイルの保持を強制的に解除できます。

原因4：style.cssのヘッダー情報の記述ミス

子テーマのstyle.cssの冒頭には、必ず特定の形式でコメントアウト（ヘッダー情報）を記述しなければなりません。

ここが間違っていると、WordPressは「このフォルダはあのアクティブな親テーマの子テーマである」と認識してくれません。

CSS
/*
 Theme Name:   Child Theme Name
 Template:     parent-theme-folder-name
 Description:  My Child Theme
 Version:      1.0.0
*/

ここで最も重要なのは、「Template:」の項目に親テーマの「フォルダ名（ディレクトリ名）」を正確に記述することです。

親テーマの表示名（スクリーンネーム）ではなく、サーバー上のフォルダ名である点に注意してください。

一文字でもスペルミスがあったり、大文字・小文字が異なったりすると、子テーマとして機能しなくなります。

原因5：構文エラーと全角スペースの混入

意外と盲点になるのが、CSSファイル内でのタイピングミスや、プログラム的なエラーです。

CSSの一部に閉じカッコ忘れ}や、セミコロン忘れ;があると、その後のスタイルがすべて無視されることがあります。

また、日本語環境で特に多いのが、全角スペースの混入です。

インデントを整える際に誤って全角スペースを入れてしまうと、ブラウザはそれを不正な文字列として扱い、スタイルの読み込みを停止してしまいます。

VS Codeなどのコードエディタを使用し、全角スペースが可視化される設定にして確認することをおすすめします。

正しいCSS読み込みのテンプレート

これまでの内容を踏まえ、2026年時点で最も安全かつ確実に子テーマのCSSを読み込むためのテンプレートをまとめました。

子テーマのフォルダ内にstyle.cssとfunctions.phpを作成し、以下の内容を記述してください。

ファイル名必須の記述内容
style.cssTheme Name, Template の記述
functions.phpwp_enqueue_style を使った読み込み定義

以下に、より実用的なfunctions.phpの完全なコードを示します。

PHP
<?php
/**
 * 子テーマのスタイルシート読み込み最適化
 */
add_action( 'wp_enqueue_scripts', function() {
    // 1. 親テーマのスタイルを登録
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    // 2. 子テーマのスタイルを親の後に読み込む
    // filemtimeを使用することで、保存するたびに自動でキャッシュを更新
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        filemtime( get_stylesheet_directory() . '/style.css' )
    );
});

このテンプレートを使用することで、キャッシュの問題と読み込み順序の問題を同時に解消できます。

まとめ

WordPressで子テーマのCSSが読み込まれない問題は、多くの場合、単純な設定ミスやキャッシュの影響に集約されます。

まずはfunctions.phpでの記述が最新の推奨方式になっているかを確認し、次にCSSの詳細度や構文エラーを疑ってみてください。

デベロッパーツールを活用して「そもそもファイルが読み込まれていないのか（404エラー）」「読み込まれているが上書きされているのか」を切り分けることが解決への近道です。

正しい手順で子テーマを構築すれば、テーマのアップデートによるカスタマイズ消失を防ぎ、安全にサイトの個性を表現することができます。

一つずつ原因を潰していくことで、必ず理想のデザインを反映させることができるはずですので、焦らずに取り組んでみてください。

URLをコピーしました！