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;

//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」が変わるので、「ブラウザキャッシュが利用されず新しく編集後のファイルが読み込まれる」といった仕様になります。

WordPressが付け加えるバージョン（ver=4.9.4）等を削除する場合は、サンプルコード内のコメントアウト部分を外してください。

テーマ内に直接linkやscriptタグでハードコーディング（テンプレートファイルに直接記入）している場合は、適用されません。

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

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

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

仕様上、1秒以内にリソースファイルの編集を終えてしまった場合は、ブラウザキャッシュが読み込まれてしまいます。ただ、そういったことは流石にないだろうと1秒単位の「日時形式のバージョン」を付け加えています。

まとめ

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

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

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

Simplicityでは、次のバージョンで今回のカスタマイズを適用しようと考えています。ですので、カスタマイズを行うと処理が重複してしまう可能性があるのでご注意ください。

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

名前:Lognote 投稿日：2018/02/17(土) 13:16:53 ID：3d86c9660

よくテーマをいじるので悩んでいたことの一つでした。
すごく参考になりました。早速使わせていただきます！

一つ質問なのですが、14～15行目のspanを消さないと
syntax error, unexpected ‘<'
が出て上手くいきませんでした。

このspanは必要でしょうか？

名前:わいひら投稿日：2018/02/17(土) 15:03:35 ID：e1dabdba0

申し訳ない。不要です。
最後に本文の装飾を行うときに、誤操作してマーカーのマークアップを入れてしまったようです^^;
該当部分を修正させていただきました。
教えていただき、ありがとうございます！

名前:Lognote 投稿日：2018/02/17(土) 13:16:53 ID：3d86c9660

よくテーマをいじるので悩んでいたことの一つでした。
すごく参考になりました。早速使わせていただきます！

一つ質問なのですが、14～15行目のspanを消さないと
syntax error, unexpected ‘<'
が出て上手くいきませんでした。

このspanは必要でしょうか？
名前:わいひら投稿日：2018/02/17(土) 15:03:35 ID：e1dabdba0

申し訳ない。不要です。
最後に本文の装飾を行うときに、誤操作してマーカーのマークアップを入れてしまったようです^^;
該当部分を修正させていただきました。
教えていただき、ありがとうございます！