WordPressでCSSやJSを登録・読み込ませるためには、通常以下の関数を使用して、「wp_enqueue_sctipts」にフックさせて適用させます。
| 関数 | 用途 |
|---|---|
| wp_enqueue_script | 別ファイルに保存したJSファイルを読み込む関数 |
| wp_register_script | 別ファイルに保存したJSファイルを読み込めるよう登録しておく関数 |
| wp_enqueue_style | 別ファイルに保存したCSSファイルを読み込む関数 |
| wp_redister_style | 別ファイルに保存したCSSファイルを読み込めるよう登録しておく関数 |
実際に読み込ませるために使用する関数は「wp_enqueue_〇〇」のみですが、「wp_redister_〇〇」で登録したものを「enqueue」でハンドルだけ渡す場合もあるので、両方記載しています
これらを使って読み込ませる時に、ファイル内の記述を変更しても即時反映されず、あれ？と思ったことはありませんか？？
一度でもこの事象に遭遇した方なら、「毎回キャッシュのクリア（キーボードの「Ctrl」＋「F5」）をすることで解消される」のは、見聞きしたこともあると思いますし、実際にそうされているとは思いますが、正直面倒だし、間違いが起こる可能性はあるしで、できれば即時反映させたいと感じるものですね。
そこで本ページでは、私自身もやり方をよく忘れる、「キャッシュをクリアしなくてもスクリプトやスタイルが即時反映されるようにする方法」を自身のメモも兼ねて紹介しておきます。
本ページ掲載のコードを使用するときは
本ページで掲載しているコードは、以下に了承した上で使用ください
- コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
- コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
- コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
- コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
- 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります（コメント欄等から質問いただいても基本回答は致しません）
- 掲載しているコードの転載を禁じます（SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です）
どうして「キャッシュのクリア」が省略できるようになるのか？
これを知らずに何気に検索したコードを使って、キャッシュのクリアなしで即時反映されるようにするのはどう？と感じるので、まずは、このページで紹介する方法で何が起きるのかについて少々触れておきます。
先ほどから頻発している「キャッシュ」という用語。実はこれ、サイト側の問題や機能ではなく、ウェブブラウザの一時保存機能の１つで、一度読み込んだスクリプトタグやスタイルタグ（スタイルシートを読み込むためのタグ）と同一のものは、ブラウザに一時保存させたものを使うことで、ページの表示速度を向上させるためのものなのです。
つまり、WordPressで何かをカスタマイズしていて、スタイルコードやスクリプトの記述を変更しても即時反映されないのは、何度も確認する時に同じファイルはキャッシュから読み込まれていることが起因していて、サイト側では基本的にどうこうできるものではないのです。
よって、閲覧側からすると、一定期間に同じサイト内のページなどを見る際には、表示速度の向上が見込めるので非常に便利な機能であるブラウザのキャッシュ機能ではあるものの、制作する側からすると、キャッシュが効いてしまうことで即時反映されないことから、前述したように毎度キャッシュのクリアをする必要があるということなんですね。
そこでキモとなるのが、ブラウザが同一と認識するのが全く同じタグであるというところで、ここから紹介する措置をすることで、出力されるタグに含まれるバージョン情報を常に変化する値にして出力し、キャッシュされているものとは違うとブラウザに認識させることができ、即時適用されるようになるのです。
ただし、キャッシュクリアなしになってとっても便利～♪♪とすべての読み込みで採用したくなるところですが、厳密にいえば、常にこのページで紹介する措置をしたすべてのファイルが新規に読み込まれるようになり、表示速度の低下を招く恐れがありますから、これを使うのは、頻繁に変更があるファイルの読み込み時や登録時のみに適用させることが望ましいでしょう。
即時反映させる記述方法
冒頭で紹介した各関数の基本体形は以下のようになっています。
wp_enqueue_script( ハンドル名, ファイルのURL, 依存関係, バージョン, 読み込み方法);wp_enqueue_style( ハンドル名, ファイルのURL, 依存関係, バージョン, 定義されているメディア );wp_register_script( ハンドル名, ファイルのURL, 依存関係, バージョン, 読み込み方法 );wp_register_style( ハンドル名, ファイルのURL, 依存関係, バージョン, 定義されているメディア ): よく見ると、scriptとstyleで最後の引数部分は違いますが、そこまでは同じなんです。
そして今回のように即時反映をしたいという場合に注目する引数が「バージョン」の部分です。
この部分、通常は「”」や「null」、数字が入っていることが多いのですが、前項で説明した通り、2回目以降に訪問した際は、ブラウザが今までのバージョンと同じかをチェックして、同じならキャッシュ（パソコン上に保存されているもの）を使い、違っていれば再読み込みするという振る舞いをします。
つまり、この部分を常に（定期的に）変更されるようにすれば、そのタイミングで新規に読み込んでくれて、キャッシュをクリアする必要がなくなるのです。
この引数を変動させる設定例を以下に2種類紹介しておきますので、利用ケースに合わせて設定してください。
乱数を出力して常時キャッシュされないようにする
//関数内の「enqueue_〇〇」や「register_〇〇」の行の前に記述
$rand = rand( 1, 99999999999 );
//引数に以下を指定
$randCSSファイルの更新日を出力して変更した際には新規読み込みさせる
//引数に以下を指定
filemtime(ファイルのURL)個人的には、確実にクリアされる前者の方法がおすすめ．．かな？という感じです。
最後までお読みいただき、ありがとうございました。このページは以下のページを参考に作成しました。
参考：CSSファイル更新時【WordPress】キャッシュ対策 クエリパラメータを付ける
参考：How to Prevent Browser Caching of a CSS Stylesheet in WordPress
