キャッシュ対策！WordPressで読み込んでいるCSSにファイルの最終更新日時をバージョン番号として追加する方法

WordPressで読み込まれるCSSに、ファイルの最終更新日時のバージョン番号を付与する方法をご紹介いたします。

「style.css?ver=1521411592」のように、UNIXタイムスタンプのバージョン番号を追加するため、CSSを変更した際にいちいちキャッシュをクリアしなくてもよくなります。

WordPressのCSSにファイルの最終更新日時をバージョン番号として追加する方法

以下のコードをfunctions.phpに追加することで、CSSにファイルの最終更新日時をバージョン番号として付与することができます。

function update_styles_ver( $styles ) {
  $mtime = filemtime( get_stylesheet_directory() . '/style.css' );
  $styles->default_version = $mtime;
}
add_action( 'wp_default_styles', 'update_styles_ver' );

filemtimeでCSSファイルの最終更新日時(UNIXタイムスタンプ)を取得して、「$styles->default_version」に値を入れることでバージョン番号を付与しています。

wp_enqueue_styleで読み込んでいる場合

wp_enqueue_styleでCSSファイルを読み込んでいる場合は、以下のようにします。

function my_enqueue_scripts() {
  wp_enqueue_style(
    'my-style',
    get_theme_file_uri('/css/example.css'),
    array(),
    filemtime( get_theme_file_path( '/css/example.css' ))
  );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );

wp_enqueue_styleの第4引数で、ファイルの最終更新日時をバージョン番号として指定しています。

あとがき

テーマの制作中など、頻繁にCSSを変更するサイトでは設定しておくと便利です。

自分「変更しました」
クライアント「変わっていません」
自分「キャッシュをクリアしてください」

みたいなやり取りがなくなりますね。