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

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

style.cssを編集して見た目を変更したぞ!

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

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

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

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

スポンサーリンク
レクタングル(大)広告

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

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

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

このカスタマイズにより、テーマやプラグインでwp_enqueue_stylewp_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の場合)。

リソースファイルURLの最後尾に日付形式のバージョンが付加

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

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

まとめ

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

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

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

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

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

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

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

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

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

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

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