WordPress開発をしているとき、jsやcssを編集したのに表示が変わっていないぞという経験は、ありませんか?
wp_enqueue_script()やwp_enqueue_style()関数で、jsとcssファイル編集後にキャッシュを更新させる対策を紹介します。
ブラウザキャッシュとは
chromeやfirefoxなどの多くのブラウザには、Webページの表示高速化を目的にキャッシュという機能があります。
このキャッシュは、Webページにアクセスした時、ブラウザで見える内容のデータ(js、css等)をキャッシュして表示を速くします。
便利な機能ですが、jsやcssを編集してあと、Webページを更新してみると、表示が変わっていないことがあります。
これは、ブラウザにキャッシュされた古いjsとcssを読み込んでいるためです。
キャッシュを更新して最新のページを表示させる対策として、以下があります。
①スーパーリロードをする。
スーパーリロードとは、ブラウザのキャッシュを無視してWebページの最新のデータを読み込む機能です。
これによって、キャッシュが上書きされ、最新のWebページが表示されます。
ただ、サイトを閲覧している人誰もがスーパーリロードを知っているとは限らないし、jsやcssが変わっていることを知りません。
誰もが最新の状態でWebページを見ることができるように開発者側が配慮する必要があります。
そのため、この方法は好ましくありません。
chromeスーパーリロードのショートカット
// Windows版
Shift + F5
// Mac版
Cmd + Shift + R
②クエリパラメータにタイムスタンプを指定する。
クエリパラメータにタイムスタンプを指定することで、プラウザが別のファイルとして認識され、最新のjsとcssが読み込まれます。
タイムスタンプの指定例
// js
<script type="text/javascript" src="example.js?date=20190101120000"></script>
// css
<link rel="stylesheet" type="text/css" href="style.css?date=20190101120000">
パラメータ名は、特に決まりはありません。書かなくても動作します。
今回は、分かりやすいようにパラメータ名をdateにしています。
あとは、jsとcssファイル更新日時のタイムスタンプを動的に変えてやればOKです。
WordPressでブラウザキャッシュ対策
WordPressでも簡単にキャッシュ対策できます。
jsとcssを読み込むwp_enqueue_script()やwp_enqueue_style()関数には、第4引数にバージョンを指定するパラメータが用意されています。
バージョンを指定しない場合、デフォルトで設定されるWordPressのバージョンが指定されるようです。
そのため、jsとcssを編集しても、WordPressをアップデートされない限りは、最新のjsとcssが読み込まれないことになります。
バージョンにタイムスタンプを指定することで、上記で紹介したクエリパラメータにタイムスタンプを指定する対策と同様のことが可能です。
タイムスタンプの指定例
// js
wp_enqueue_script( 'example',
plugins_url( '/js/example.js', __FILE__ ),
array(),
date_i18n( 'YmdHis', filemtime( plugins_url( '/js/example.js', __FILE__ ) ) )
);
// css
wp_enqueue_style( 'style',
plugins_url( '/css/style.css', __FILE__ ),
array(),
date_i18n( 'YmdHis', filemtime( plugins_url( '/css/style.css', __FILE__ ) ) )
);
filemtime関数でファイルの更新日時のタイムスタンプを取得しています。
ちなみに、以下方法でも可能のようです。
こちらの方法では、date以外にデフォルトで設定されるWordPressのバージョンのクエリパラメータも追加で付与されるようです。
dateのクエリパラメータだけを表示させたい場合は、上記の方法が良いです。
// js
wp_enqueue_script( 'example?date=' . date_i18n( 'YmdHis', filemtime( plugins_url( '/js/example.js', __FILE__ ) ) ),
plugins_url( '/js/example.js', __FILE__ )
);
// css
wp_enqueue_style( 'style?date=' . date_i18n( 'YmdHis', filemtime( plugins_url( '/css/style.css', __FILE__ ) ) ),
plugins_url( '/css/style.css', __FILE__ )
);