CSS や JSファイルを更新しても、ブラウザのキャッシュが読み込まれてしまい、更新後の新しい状態が確認できないということがあります。
更新したことを知っている人であれば、［Ctrl］+［F5］ や ［Ctrl］+［R］ などのスーパーリロードすれば済むことですが、そうでない場合、閲覧者のブラウザ環境によっては古い状態が表示され続けてしまうなんてこともあり得ます。コレ、顧客先のWebサイトの更新で、担当者がPC初心者担当者だったりすると結構大変・・。
コンテンツ
従来の方法
そこで良く紹介されている対策は、下記のように参照するCSSやJSファイルの後に ?ver=3.3 のように任意のパラメータを付加するという方法。CSSやJSファイル更新時に、このパラメータを一緒に変えてあげることで、ブラウザはキャッシュ済みファイルとは別物と認識し、結果、特別なリロードをすることなく最新のファイルを読み込むようになるわけです。
手動で任意の文字列を付加
<link rel="stylesheet" href="./style.css?ver=3.3" />
<script type="text/javascript" src="./js.js?ver=3.3.0"></script>しかし、複数のHTMLファイルでそれぞれCSSやJSファイルを読み込んでいるような場合、更新の度に全てのファイルのパラメータを更新しないとならず、とっても不便。そこで上のものを改良し自動化したのが下記。こちらはPHPを利用し、パラメータとして現在の日付や時間などを付加しています。下記の例では「年月日-時」なので１時間ごとにパラメータが変わるイメージです。
自動で日時を付加
<link rel="stylesheet" href="./style.css?<?php echo date('Ymd-H'); ?>" />
<script type="text/javascript" src="./js.js?<?php echo date('Ymd-H'); ?>"></script>しかし、日時を付加する場合、仮にファイルの更新がなくても、指定した日時の単位で更新されることになるので、あまり効率の良い方法とは言えません。
ファイル更新日時（タイムスタンプ）を付加
おそらくこの方法が一番ベストだと思います。
ファイルを更新した日時がパラメータに付加されます。要するに、ファイルを更新した時だけパラメータが更新されるということなので、誰もが希望する理想の状態になるわけです。
それでは早速コードを紹介します。環境によってパスの指定の仕方が異なるので、今回はいくつかの例を紹介しておきます。
通常のHTML／PHPファイルの場合
ファイルの更新日を取得するには filemtime 関数を使用します。filemtimeは、相対パス or 絶対パスでファイルを指定しますが、絶対パスを使用する場合はサーバー側から見た絶対パス（/var/www/html など）を指定する必要があります。
相対パスで指定する場合
<link rel="stylesheet" href="./style.css?<?php echo date('YmdHis', filemtime('./style.css')); ?>" />
<script type="text/javascript" src="./js.js?<?php echo date('YmdHis', filemtime('./js.js')); ?>"></script>絶対パスで指定する場合
<link rel="stylesheet" href="/style.css?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/style.css')); ?>" />
<script type="text/javascript" src="/js.js?<?php echo date('YmdHi', filemtime($_SERVER['DOCUMENT_ROOT'] . '/js.js')); ?>"></script>WordPress の場合
WordPress の場合は、パスを取得する独自の関数を使用します。
WordPress の各ファイルに直接記述する場合
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/style.css?<?php echo date('YmdHi', filemtime(get_template_directory() . '/css/style.css')); ?>" />
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/js.js?<?php echo date('YmdHi', filemtime(get_template_directory() . '/js/js.js')); ?>"></script>
WordPress で Function.php 内に記述する場合
wp_enqueue_style( 'mycss', get_stylesheet_directory_uri() . '/css/style.css', array(), date('YmdHi', filemtime(get_template_directory() . '/css/style.css')) );
wp_enqueue_script( 'myjs', get_stylesheet_directory_uri() . '/js/js.js', array(), date('YmdHi', filemtime(get_template_directory() . '/js/js.js')), true );
サーバー側のキャッシュ
Webサイトの閲覧キャッシュはブラウザごとに保存していますが、その他、利用しているサーバーによってはアクセラレータというキャッシュ機能を提供している場合があります。ロリポップの場合はデフォルトで有効になっています。
ロリポップ！アクセラレータ設定・解除方法
https://lolipop.jp/manual/hp/content-cache/
今回紹介した方法を使えば、これらが有効になっていたとしても対策になるはずですが、もしうまくいかない場合はサーバー側のコントロールパネルより、 アクセラレータの機能を無効にしてみるなど試してみてください。
