WordPress CSSやJSのキャッシュを強制的に更新する方法
WordPressでCSSやJSのキャッシュを強制的に更新する方法です。
CSSやJSファイルを更新した後にお客様へ確認を依頼すると「変更されてないけど？」みたいな回答が来ることがあります。これは使っているブラウザにキャッシュされて変更が反映されない場合があるからですね。個人的にはSafariを使っている人に多い印象です。あ、Safari使いの方、すみません。m(_ _)m
とはいえ公開後にサイトに訪れた人が同じ状況になったりすると、表示がおかしく見えたりして離脱率がアップされては困ります。
ここでは WordPressでCSSやJSのキャッシュを強制的に更新する方法 を紹介します。
最終更新日時をバージョンに設定する
style.cssへの設定方法は「WordPressのstyle.cssに最終更新日時をバージョンに設定する方法」でも紹介していますが、今回はJSファイルにも適用できる方法です。
仮に app.min.js というファイルだった場合、下記のようにphpファイルに記述します。
<script src="<?php echo get_template_directory_uri(); ?>/js/app.min.js?ver=<?php echo filemtime( get_template_directory() . '/js/app.min.js');?>"></script>
<script src="https://{ドメイン}/wp-content/themes/(テーマ名)/js/app.min.js?ver=1613382601"></script>
「ver=」の後ろにUNIXタイムスタンプでの時刻表現の数値が表示されました。ファイルを更新するたびにこの値が変化するので常に最新が適用されるというわけです。
ふむ、これは簡単でよいですな。
まとめ
WordPressでCSSやJSのキャッシュを強制的に更新する方法を紹介しました。
使うCSSやJSファイルの情報をfunction.phpに記述して管理する方法もあるけど、筆者はこの方法は使っていません。CSSやJSを使いたいだけなのにfunction.phpに記述するってめんどくさくないですか？function.phpって何気に書くことがたくさんあるし、結構前に書いたこととか埋もれていって忘れてしまうんですよね。可読性も悪いし、CSSやJSファイルを読み込むごときでfunction.phpには書きたくないですね。
そんなわけで、めんどくさがり屋のエンジニアはぜひ活用ください。
おつかれさまでした。