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

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

キャッシュ対策!WordPressで読み込んでいるCSSにファイルの最終更新日時をバージョン番号として追加する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

  • 広告主様募集中
    格安で広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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

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

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

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。