ファイルがキャッシュされて変更が反映されない！
wordpressのテーマを変更しようとしてstyle.cssをいじったのに変更が反映されなくて困るというのはあるあるです。
ファイルがキャッシュされてしまっているのが原因です。
ChromeとかFirefoxとかいわゆるブラウザは一度ダウンロードしたファイルをキャッシュとして保管しておいて、２度目以降のアクセス時にはサーバーからダウンロードしないという仕組みを備えています。
というのも、cssファイルやjsファイル（javascriptのプログラム）は結構容量があるのでいちいちダウンロードするとアクセス速度が遅くなるので、一度ダウンロードしたら、サイト内でのページ移動時にいちいち再ダウンロードしません。
キャッシュとしてクライアント側に保存していたファイルを再利用します。
ブラウザは、便利機能としてキャッシュ機能を備えています。
しかし！
これが、テーマ開発時や、ちょっとしたCSSの変更時に変更が反映されず、困ったなという原因になります。
特に初心者の人にはナゼCSSファイルを変更したのに変更が反映されないのかわからないと思います。
もちろんキャッシュファイルは永久に残り続けるということはなく、通常は、サーバーが設定した有効期限をすぎるとブラウザが削除して、それ以降のアクセス時には再度、サーバーからダウンロードすることになっています。
ですので、気を長くして待つ（冗談）。。。。というのも良いですが、まぁさっさと反映してほしいですよね。
アクセスする度にstyle.cssファイルをダウンロードするようにするWordpress設定方法
WordPressでの設定方法を説明します。
テーマはtwentysixteenというWordpressデフォルトテーマで説明しますが、大体どれもこの手順でいけると思います。（子テーマとかスキンとかあるとちょっと応用を効かしてみてください）
考え方としては、style.cssのバージョンをアップするということです。
style.cssファイルなどにはバージョンという概念があって、ブラウザはファイル名とともにバージョンが変わっていないかをアクセスの度に見ています。
もしバージョンに違いがあれば（ファイル名に違いがあったらもちろんですが）、サーバーからダウンロードします。
ですので、バージョンをダウンロードの度に変えてやれば良いわけです。
microtime()というPHPの関数を使います。
これは現在の時刻（サーバーの時刻）をUNIX時間でマイクロ秒単位で出力してくれる関数です。
これを使えば、毎回違った数字が帰ってきますので、毎回新しいバージョンの様に働きます。
style.css?1518882130
style.css?1518882181
バージョン名は?以下に書かれるのですが、?以下に1518882130や1518882181のようにアクセスするたびに異なる数字が入ります。
1518882130というUNIX時間は、2018/02/18 00:42:10のことですね。
UNIX時間は協定世界時 (UTC) での1970年1月1日午前0時0分0秒から形式的な経過秒数です。
microtime()を使って、style.cssのバージョンを刻々と変化させる
function.phpファイルのからwp_enqueue_style関数を探してきましょう。
それを以下の様に変更します。
wp_enqueue_style('twentysixteen-style', get_stylesheet_uri())
↓
wp_enqueue_style('twentysixteen-style', get_stylesheet_uri(), NULL, microtime())
と書き換えます。
wp_enqueue_styleの３つ目の引数は依存するスタイルシートをいれるところだけど、無い場合はNULLを入れておく。四つ目の引数はバージョンをいれるのですが、ここにmicrotime()を入れます。これで、サーバーの時刻のUNIX時間（整数）が渡されて、アクセスするたびに自動的に変わるバージョンになります。
副作用についても考えよう
もちろんこの方法は、２回目以降のアクセス時にキャッシュが効かなくなるということなので、アクセス速度が落ちますし、サーバーへの負荷も上がります。
それなりにアクセスがあるサイトで常時これをおこなうのははっきり言って無駄です。
アクセスがまだ少ないテーマの開発途上や、ちょっと変更を加えたいという時に使うのが良いと思います。
コメント