WordPressで子テーマのCSS修正が反映されない場合

WordPress を利用していてテーマに手を入れる場合は子テーマを使うことが多いかと思いますが、子テーマのCSSに内容を修正・追加しても反映されないことがあります。

その場合、CSSのバージョンを指定してあげると、読み込んでくれます。
子テーマのfunctions.php の冒頭でCSSを読み込む記述を以下のようにします。

<?php
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'),
                        filemtime( get_theme_file_path( 'style.css' ) )
        );
}

子テーマの読み込みの wp_enqueue_style に、第4引数にバージョン(上記の場合はfilemtime)を指定します。

こうすると、子テーマのCSSの修正が反映されます。

2020/1/8追記
コメントにてご指摘いただきましたので補足します。
上記は、WordPress Codex の子テーマ利用の説明で子テーマのスタイルシートが自動的に読み込まれない場合の対応として記述されていたものを元に、2つ目のwp_enqueue_style の呼び出しのところで、第4引数を追加したものとなっております。

親テーマで子テーマのstyle.cssを読み込むようになっているテーマの場合は、2つ目の wp_enqueue_style は不要です。(子テーマのstyle.cssが二重に読み込まれてしまいます)
当時使っていたテーマでは親テーマで子テーマのstyle.cssを読み込まないものであったため、上記記述が有効でしたのでご紹介しましたが、子テーマのstyle.cssを読み込むものの方が多いかもしれないですね。

読み込み処理の記述後、必ずHTMLソースにてCSSの読み込みの順番も確認しましょう。
ご使用のテーマによりますが、functions.php でCSSを読み込む、header.phpを子テーマディレクトリにコピーし、既存のCSSの読み込み箇所を修正する、などの対応を行い、適切な順番でCSSが読み込まれるよう必要に応じて対応します。

6 COMMENTS

YP

どこのページを見ても解決しませんでしたが、このページを参考にすると解決しました。

困っていたので大変助かりました。どうもありがとうございました。

返信する
sato

YPさん
コメントありがとうございます。承認遅くなり失礼致しました。
解決できてよかったです。

返信する
kokoro

これやるとCSSが2回読み込まれますね…。

公開する以上ちゃんと検証していただければ、
原因がわからずえらい苦労しました。

自己責任ですが。。

返信する
sato

コメントありがとうございました。
親テーマで子テーマのstyle.cssを読み込むようになっているテーマの場合は、ご指摘のようにご紹介したやり方ですと2重にstyle.cssを読み込んでしまいますね。
説明不足でご苦労をお掛けしてしまい申し訳ありませんでした。

頂いたご指摘をもとに注記を追加しました。ありがとうございました。

返信する

[wordpress]twentyseventeenの引用デザインを変更する方法 | Atomblog へ返信する コメントをキャンセル

コメントは当サイト運営者の承認後に反映されます。
お名前はニックネームでも結構です。