初めてWordPressの子テーマを編集している時、付随のCSSエディターではできるのにstyle.cssを管理画面から直接編集するとサイトに反映さなくて困ったので、調べたことをメモしておきます。
結論から言うと、スタイルシートを読み込むためのfunction.phpに不備があったようです。子テーマ(stinger8 Child)をダウンロードした段階では、function.phpにこのような記述がありました。
1 2 3 4 5 |
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」を設定し、その後に子テーマのスタイルシートをロードしましょう。詳細についてはこちら :
1234567 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()の第四引数にバージョン情報を指定することにしました。以下参考になった記事です
1 2 3 4 5 6 7 8 9 |
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' ) ) ); } |
最終的にはこうなりました。filemtimeはファイルの最終更新時刻を取得する関数です。常に最新のバージョンを指定するので、子テーマのCSSを書き換えると必ず反映されるようになりました
途中、php.functionを不用意に書き換えてエラーで真っ白に。管理画面にも入れなくなり、焦りました・・・。FTPで直接ファイルをかきかえてすぐに直せましたが、そもそも管理画面から直接書き換えるのが間違いなようなので、なるべくエディタを使おうと思います。

web技術を学習中です。