WordPress CSSを更新するたびに自動的にブラウザキャッシュを無効にするテクニック

WordPressテーマ作ってるけど、CSSを更新してもブラウザキャッシュが残っててなかなか反映されない…。毎回キャッシュ削除するの面倒くさいな。

よくある問題ですね。何十回、何百回とキャッシュ削除に時間と手間をかけるのはムダ。CSSを更新したら自動的にキャッシュをクリアしたい。そんなお悩みを解決するための小技をご紹介します。

CSSを更新ごとにブラウザキャッシュを無効にするサンプルコード

9行目 filemtimeが今回のポイントです。

<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

function my_enqueue_scripts() {
  my_enqueue_style(
    'my-style',
    get_theme_file_uri( 'path/to/style.css' ),
    array( 'simpfire' ),
    filemtime( get_theme_file_path( 'path/to/style.css' ))
  );
}

解説

wp_enqueue_script の第4引数には、CSSファイルのバージョン名を入れますが、ここに入力したものは、こんな感じ↓でURLパラメーターとして出力されます。

<link rel='stylesheet' id='my-style-css'  href='https://my-site.com/wp-content/themes/my-theme/path/to/style.css?ver=[バージョン名]' type='text/css' media='all' />

このバージョン名がどんな値でもCSSの参照先が変わったりはしないので、任意の文字列を入れても大丈夫です。

ですが、参照するCSSが同じでも、パラメーターが変わるとブラウザ的には別のURLと認識され、キャッシュも別のものとなります。つまり、~style.css?ver=1 と ~style.css?ver=2 はブラウザ的は違うキャッシュを残すのです。

つまり、ver=1 から ver=2 に変えてあげることでver=1のキャッシュは（残っていても）読み込まれず、純粋に ver=2の新しいCSSが読み込まれます。

結論、CSSを更新ごとにこの第4引数のパラメータを変更してあげればよいのです。それも自動で。

では、どのように自動化するか。たとえばランダム変数や時刻を出力する関数では、CSSを更新していなくてもキャッシュが読み込まれなくなってしまうので、開発環境ではよくても本番環境ではキャッシュの意味が薄まってしまうので本末転倒ですね。

そこで filemtime です。filemtime とは、ファイルの更新時刻を取得するPHPの関数で、正しく今回の課題にうってつけですね。

というわけで実装方法ですが、ポイントは、引数はファイルのURLではなくパスで指定する必要があること。get_theme_file_uri() ではなくget_theme_file_path() の方を使いましょう。

紛らわしいですが、第2引数は get_theme_file_uri()の方です。

出力を確認してみましょう。