【WordPress】子テーマのstyle.cssが反映されない

初めてWordPressの子テーマを編集している時、付随のCSSエディターではできるのにstyle.cssを管理画面から直接編集するとサイトに反映さなくて困ったので、調べたことをメモしておきます。

結論から言うと、スタイルシートを読み込むためのfunction.phpに不備があったようです。子テーマ(stinger8 Child)をダウンロードした段階では、function.phpにこのような記述がありました。

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/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' );

}

この部分について公式ドキュメントではこのような解説がされています。以下、子テーマ – WordPress Codex 日本語版から引用

子テーマのスタイルシートは、通常は自動的に読み込まれます。そうでない場合は、同様にエンキューする必要があります。依存関係として「parent-style」を設定し、その後に子テーマのスタイルシートをロードしましょう。詳細についてはこちら :

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') );

1
2
3
4
5
6
7

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')
    );

今回自動的に読み込まれなかったので、2つ目のwp_enqueue_style()で子のスタイルシートの指定が必要ということでした。

ただし、この通りに書き換えてもすぐには読み込んでくれませんでした。原因はブラウザのキャッシュのようで、書き換える前のCSSを保持したままで更新していたようです。キャッシュを無視するスーパーリロードをしてもいいのですが、なんか紛らわしいので確実に更新されるようにしたいですね。

そこで、wp_enqueue_style()の第四引数にバージョン情報を指定することにしました。以下参考になった記事です

合同会社ジョートー

Wordpressで子テーマのCSS修正が反映されない場合 - 合同会社ジョートー

https://jyo-to.okinawa/20170523/1157/

WordPress を利用していてテーマに手を入れる場合は子テーマを使うことが多いかと思いますが、子テーマのCSSに内容を修正・追加しても反映されないことがあります。その場合、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'),
        filemtime( get_theme_file_path( 'style.css' ) )
    );
}