CSS・JSファイル編集後はブラウザキャッシュを読み込まず、直接ファイルを読み込むようにするWordPressカスタマイズ方法

WordPressテーマのCSSやJavaScriptファイルを編集していて、こういった経験のある方も多いかと思います。

style.cssを編集してみた目を変更したぞ！

あれ？ブラウザで見てもスタイルが反映されていない…

リロードしたら反映された。ブラウザキャッシュが原因だったか…

これは、サイト管理者本人だから気づくものの、閲覧するのが訪問者だったら意図した表示になっていない可能性が高いです。

なので、そんなことになりづらいように「編集したCSS・JSファイルは、ブラウザキャッシュを読み込まないで新たにファイルを読み込むようにしたい」ということで、WordPressのカスタマイズ方法を考えてみました。

ファイル編集後はキャッシュは使用しないようにする方法

とは言っても、カスタマイズ方法は簡単で、functions.phpファイル等の末尾に、以下のコードをコピペで付加すればOKです。

//CSS、JSファイルに編集時間をバージョンとして付加する（ファイル編集後のブラウザキャッシュ対策）
add_filter( 'style_loader_src', 'add_file_ver_to_css_js_demo');
add_filter( 'script_loader_src', 'add_file_ver_to_css_js_demo');
if ( !function_exists( 'add_file_ver_to_css_js_demo' ) ):
function add_file_ver_to_css_js_demo( $src ) {
  //サーバー内のファイルの場合
  if (strpos( $src, site_url() ) !== false) {
    // //Wordpressのバージョンを除去する場合
    // if ( strpos( $src, 'ver=' ) )
    //   $src = remove_query_arg( 'ver', $src );

    //クエリーを削除したファイルURLを取得
    $removed_src = preg_replace('{\?.+$}i', '', $src);
    //URLをパスに変換
    $resource_file = str_replace(site_url('/'), ABSPATH, $removed_src );
    //ファイルの編集時間バージョンを追加
    $src = add_query_arg( 'fver', date('Ymdhis', filemtime($resource_file)), $src );
  }
  return $src;
}
endif;

参考 【WordPress】キャッシュを有効化しつつ［CSS］や［JavaScript］ファイルの変更を確実に反映させる方法。 – ONZE

このカスタマイズにより、テーマやプラグインでwp_enqueue_styleやwp_enqueue_script関数を用いて読み込まれる全てのCSS、JavaScriptファイルに対して以下のような、日付形式のバージョンが付け加えられます。

style.css?ver=4.9.4&fver=20180217015755

ファイルバージョンは、親テーマ、子テーマ、プラグインのすべてリソースURLに付加されるので、子テーマやプラグインでのCSS・JS編集にも適用されます。

上記のカスタマイズにより、「ファイル編集があったファイルのURL」が変わるので、「ブラウザキャッシュが利用されず新しく編集後のファイルが読み込まれる」といった仕様になります。

カスタマイズ後に出力するソースコード

上記のカスタマイズを行った後に、出力するソースコードはこんな感じになります（公式テーマTwenty Seventeenの場合）。

このように、CSS、JSファイルURLの末尾に「&fver=日時」クエリが付け加えられます。

まとめ

このようにすることで、CSSやJavaScriptファイル編集後も、サイトに訪れる訪問者になるべく意図した状態で表示することが出来るようになるかと思います。

なのでサイトの見た目を、しょっちゅうCSS等でカスタマイズする方には良いのではないかと思います。

また、WEB制作を行う上においても、余計なリロード作業が不要となるので、多少なりとも効率が上がるかもしれません。