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__ )
);

参考URL(WordPress Codex)

wp_enqueue_script関数

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_script

wp_enqueue_style関数

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style

目次へ戻る
この記事をシェアする:

東日本橋の制作・開発会社 プレスマンのスタッフブログ