WordPressで読み込むCSSやJavaScriptのキャッシュ対策

WordPressでCSSを変更後、ブラウザをリロードして見ても変更結果が表示されません。
毎回、ブラウザのキャッシュを削除して閲覧するのは億劫ですし、公開後にCSSを変更した場合、閲覧しているユーザーに対して「キャッシュ削除してください」とはいえません。

そこでWordPressのキャッシュについて対策しました。

クエリパラメータでキャッシュを解消

解決方法は「クエリパラメータ」を付与する事で、ブラウザのキャッシュをクリアにします。
具体的にどうするのかと言うと、ファイル名の後に更新日時を付与します。

■付与前

<link rel='stylesheet' href='style.css'>

クエリパラメータを付与前の場合、更新したファイルをアップしても、読み込んだCSSファイル名は「style.css」です。
この為、何度読み込みし直しても、キャッシュされた更新前の「style.css」を読み込みます。

■付与後

<link rel='stylesheet' href='style.css?ver=210714045333'>


一方、更新日時を付与した場合、付与されたクエリパラメータ(?ver=210714045333 の部分)は更新の度にかわるので、ブラウザ側ではクエリパラメータが更新されたと認識され「style.css」のキャッシュがクリアされます。

今回はバージョン番号の部分に更新時間を付与します。

header.phpに記述する場合
<link rel='stylesheet' href="<?php echo get_stylesheet_uri(); ?>?<?php echo date('YmdGis', filemtime( get_stylesheet_directory() . '/style.css')); ?>" >
functions.phpでwp_enqueue関数で読み込む場合
wp_enqueue_style( 'スタイル名', get_template_directory_uri() . '/style.css', array(), date('ymdHis', filemtime( get_stylesheet_directory() . '/style.css')) );

スタイルシートのURLは絶対パスで指定します。

■ wp_enqueue_style 関数

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

引数は次の通りです。
※ 今回は、$ver に更新時間を付与しています。

  • $handle
     スタイルシートを識別する為のスタイル名(重複しないように)
  • $src
     スタイルシートのURLを指定(絶対パスにする事)
  • $deps
     依存するスタイルシートのスタイル名を配列で記述。指定されたCSSは先に読み込まれる。(指定が無ければ、array())
  • $ver
     バージョン情報を表示(指定しなければ空)
  • $media
     スタイルシートが指定されているメディアを指定(指定しなければall。他、screen、handheld、print)

@import urlで他のスタイルシートを読み込んでいる場合

こちら、検証したところ、@import urlで読み込んでいるCSS(仮に「yomikomi.css」とします)を更新しても、style.cssは更新されませんでした。(当然ですね...)
念のため、yomikomi.cssを更新後、style.cssの内容を更新してみましたが、yomikomi.cssの更新内容が反映される事はありませんでした。(当然ですね...)

@import urlで読み込んでいるCSSのキャッシュを削除するには、こちらにもクエリパラメータを設定する事になります。
色々検証した結果、私は、@import urlでの読み込みをやめて、全てfunctions.phpで読み込むことにしました。

この問題を解決する為に参考にした記事

WordPressで読み込むCSSやJSファイルにクエリパラメータを付与し、ブラウザキャッシュは有効のまま変更箇所をすぐに反映させる方法。|WEMO
 https://wemo.tech/316

WordPress CSSやJavaScriptファイルの読み込み|Web Design Leaves
 https://www.webdesignleaves.com/pr/wp/wp_func_style_script.html

おすすめの記事