Wordpressで開発をしているとCSSやJSのキャッシュにより更新がされていないように見えて困ったことはないでしょうか？

確認するのが自分だけなら常にハード読み込みをすれば問題ないですが、社内チェックorクライアント確認の時などは「変更されていないのですが・・・・」と言われがちです。

そして、サイト公開前なら「キャッシュ削除をお願いします・・・」と言えばよいものの、公開後となるとユーザがCSSやJSを更新されたことを知るはずもないので表示がおかしな状態で見られてしまう可能性があるので問題です。

今回紹介するのはブラウザキャッシュを活かしつつ対応する方法です。

やりたいこと

• CSSやJS更新時に「キャッシュ削除」をすることなく修正を反映させる
• CSSやJSを変更した時だけ対応する

対処方法

CSSやJSファイル名の末尾に更新日時のパラメータを付与します。
前提として、wp_enqueue_style / wp_enqueue_scripts を使用してCSSとJSを読みこんでいるものとします。

function.php に下記を追記します。

function add_files(){
define("TEMPLATE_PATH", get_template_directory());
function wp_css($css_name, $file_path){
wp_enqueue_style($css_name, get_theme_file_uri($file_path), [], date('YmdGis', filemtime(TEMPLATE_PATH . $file_path)));
}
function wp_script($script_name, $file_path, $bool = true){
wp_enqueue_script($script_name, get_theme_file_uri($file_path), [], date('YmdGis', filemtime(TEMPLATE_PATH . $file_path)), $bool);
}
wp_script('bundle','/static/js/function.js');
wp_css('style','/static/css/style.css');
}
add_action('wp_enqueue_scripts', 'add_files', 1);

大事なのは、第4引数で渡している
date('YmdGis', filemtime(TEMPLATE_PATH . $file_path))
の部分。
ファイルのタイムスタンプをパラメータとして付与するようにしています。

filetime()というPHPの関数を利用する事でファイルの更新日時を取得し、date() 関数で時刻フォーマットを整えて出力します。

<script type='text/javascript' src='path_to_themes/static/js/function.js?ver=2020082722156'></script>
<link rel='stylesheet' id='style-css' href='path_to_themes/static/css/style.css?ver=2020092813645' type='text/css' media='all' />

出力されたソースを確認すると、ファイル名の後ろにパラメータが付与されているのが確認出来ます。
?ver=2020082722156 の部分がそれになります。

上記の例では更新日時を秒まで取得していますが、秒までは必要ない場合は第一引数の 'YmdGis' を変更してみてください。

パラメータが付与されない

上記コードでパラメータが付与されないことがあれば、パラメータの付与を禁止しているような記述がないか確認してください。

function remove_wp_ver($src) {
if(strpos($src, 'ver='))
$src = remove_query_arg('ver', $src);
return $src;
}
add_filter('style_loader_src', 'remove_wp_ver', 9999);
add_filter('script_loader_src', 'remove_wp_ver', 9999);

こちらは、強制的にパラメータを削除しているため、今回の対処方と併用は出来ません。