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

シェアしてね♪
Tweet

24時間注文・入稿受付OK。実績と信頼の「印刷の通販グラフィック」

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を変更するサイトでは設定しておくと便利です。

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

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

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