WordPressのカスタマイズで、子テーマのstyle.cssをFTPにアップロードしても、更新内容が反映されない場合がありました。
管理画面の「追加CSS」なら反映されるのに、style.cssだとダメなのはなぜ？と原因を調べていたところ、子テーマのfunctions.phpの書き方に問題がありました。
ブラウザに無視されやすい子テーマの書き方
シンプルに読み込みだけを指定しています。この書き方だと、CSSを更新しても反映されないことがありました。
- // ブラウザに無視されやすい子テーマの書き方
- add_action( 'wp_enqueue_scripts', function() {
- wp_enqueue_style( 'child-style', get_stylesheet_uri() );
- });
この書き方だと、CSSのURLの後ろに付くバージョン（?ver=...）がWordPress自体のバージョンになります。style.cssを何回書き換えても、URLが変わらないため、サーバー（CDN）やブラウザが古いコピーを出し続けていました。
ファイル更新を反映させる書き方
そこで、ファイルの最終更新日時を自動でバージョン番号として付与するこの書き方にしました。
- // CSSを上書き保存するとURLが自動更新されるコード
- add_action( 'wp_enqueue_scripts', function() {
- // ファイルの更新時刻を数値として取得
- $version = filemtime( get_stylesheet_directory() . '/style.css' );
-
- wp_enqueue_style(
- 'child-style',
- get_stylesheet_uri(),
- array(),
- $version
- );
- });
この書き方のメリット
キャッシュクリアが不要。 クライアントに「Ctrl + F5を押してください」と言う必要がなくなります。
CDN環境にも強いので、強力なキャッシュサーバー（CDN）を挟んでいても、URLが変わるので確実に最新版が読み込まれます。
読み込むたびに番号を変えるtime()関数を使わず更新した時だけ番号が変わるので、キャッシュの良さを活かしつつ更新もされます。
Azure Front Doorのような強力なCDN環境はもちろん、最近のレンタルサーバー全般にも有効です。
