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」のキャッシュがクリアされます。

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

<link rel='stylesheet' href="<?php echo get_stylesheet_uri(); ?>?<?php echo date('YmdGis', filemtime( get_stylesheet_directory() . '/style.css')); ?>" >

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で読み込んでいるCSS（仮に「yomikomi.css」とします）を更新しても、style.cssは更新されませんでした。（当然ですね…）
念のため、yomikomi.cssを更新後、style.cssの内容を更新してみましたが、yomikomi.cssの更新内容が反映される事はありませんでした。（当然ですね…）

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