よし、カスタマイズ終わり！これを本番サイトに反映させて、キャッシュクリアして、実際の画面はどうかな〜ってあれ？
ちゃんと反映されてないじゃん…
というストレスに長い間苦しめられていたシェフ（@chef_moriawase）です。みなさんもこういう経験ありませんか？
今までよくわからずに放置してたんですが、「ちょっとおかしいかも…」と思い始め、本腰を入れて解決に乗り出してみました。
ワードプレスメインのカスタマイズです！
自分がリロードすれば問題ないけど…
「あれ？反映されてないぞ？」と気づいた時、みなさんならどうしますか？きっと、リロード（再読み込み）するのではないでしょうか？
僕も、そういう時はリロードしていました。時には2〜3回リロードすることもあったけど、最終的にちゃんと反映されるんですよね。
で、「よっしゃ！今回も良いカスタマイズだった！サイトを見てくれる方も喜んでくれるはず！」とか思うんですが、冷静に考えると問題だらけだったんですよ、これ。
なぜなら、サイトの運営者であれば、表示がおかしいと思ってリロードしますが、事情を知らないユーザーはリロードしないからです。
そのため、以前のキャッシュがそのまま残っていて、表示がずっとカスタマイズ前のまま…ということになるわけです。
キャッシュ削除…されない！
そこで、その残ったキャッシュを削除して、新しいJSファイルやCSSファイルを読み込んでもらう必要があるんですが、なぜか上手く削除できないんですよね。
僕は、有名な「W3 Total Cache」というキャッシュプラグインを使っているんですが、キャッシュを削除するボタンをクリックしても、いつもキャッシュが削除されずに残ってしまいます。
何か致命的な設定ミスがあるのか、キャッシュ削除の方法が悪いのかわかりませんが、お手上げ状態でした。
ファイル名を変えれば新しいファイルを読み込んでくれる
しかし、情報収集している中で、あることがわかりました。それは、「ファイル名を変更すれば、キャッシュされたファイル（変更前のファイル）を読み込まずに、新しいファイルを読み込んでくれる」ということ。
なんでも、サイト表示の高速化にあたり、「ファイル名が同じ」であれば、キャッシュされているファイルを読み込むらしいんですよね。
だから、カスタマイズの前と後でファイル名が違えば、しっかりとカスタマイズ後のファイルを読み込んでくれる…と。これは盲点でした。
- ユーザーがサイトにアクセスする
- 〇〇.cssを読み込み、キャッシュされる
- 1のユーザーが再びサイトにアクセスする
- 〇〇.cssであれば、キャッシュのファイルを読み込む
- 〇〇.cssでなければ、新しいファイル（△△.cssや□□.css）を読み込む
でも、カスタマイズのたびにファイル名を変更するのは面倒だし、「 1234style.css」みたいな名前だと、関連するファイルもすべて変更しなければなりません。
「ファイル名?〇〇」で問題解決！
そこで、便利なのが「ファイル名?〇〇」という形です。この形であれば、「ファイル名」として扱えることができるし、ブラウザには違うファイルだと認識させることができます。
「style.css?1」という名前であれば、「style.css?1」としてキャッシュしてもらえて、「style.css」として扱えることができるんです。これは便利。
つまり、カスタイズ後は、「style.css?2」にするだけでOK。これで、以前の「style.css?1」が読み込まれることはありません。
そして、JSファイルも同様です。Stinger5を引き合いに出すと、「base.js」を「base.js?1」にするだけで、古いキャッシュを読み込ませず、新しいファイルを読み込ませることができます。
もちろん、新しいファイルを読み込んだ後は、それをキャッシュするので、サイトの高速化につながりますよ。
ファイルを更新したタイミングで「?の後の文字列」を変更する
あまりサイトのカスタマイズをしない方であれば、先述の方法で十分だと思いますが、僕のように頻繁にカスタマイズする方におすすめの方法があります。
それは、ファイルを更新したタイミングで「?の後の文字列」を変更するという方法。自動的に文字列が変更されます。例えば、スタイルシート。
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />▲このようにスタイルシートを読み込んでいると思いますが、このコードを…
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" type="text/css" media="screen" />▲こうすると、「ファイルを更新したタイミング」で、?の後の文字列が変わります。それ以外のタイミングで変わることはありません。とっても便利ですね！
（参考サイト→http://on-ze.com/archives/1591）
JSファイルも同様にって言いたいけど…
これと同じようにJSファイルも同様にって言いたいんですが…ちょっと難しいんですよ！知識不足を実感しました！
僕が愛用しているStinger5は「footer.php」でJSファイルを読み込んでいるんですが、同じ要領でできなかったんですよね…涙
<?php wp_enqueue_script('base',get_bloginfo('template_url') . '/js/base.js', array()); ?>▲このコードを手探りでいじってみたんですが、思った通りの動作をしてくれないんです。filemtimeで更新日時の情報を付与したかったんですが…
そこまで難しくないはずなので…どなたか助けてください（切実）
▼ちなみに今は、こんな感じで手動でJSファイルだけ手動で更新してます。
<?php wp_enqueue_script('base',get_bloginfo('template_url') . '/js/base.js', array(),'1'); ?>まとめ
僕のサイトへアクセスしてくれる方は、新規ユーザーがほとんどなのでそこまで影響なかったのかもしれませんが、今までキャッシュが削除されていなかったと思うと…（ガクブル）
ヘッダー下に人気記事を表示させるカスタマイズをした時とか、「float」してなくて縦に人気記事が並んでいたんだろうなぁ。THE☆カオス。
同じ悩みをお持ちの方はぜひお試しあれ！「自分でリロードしてOK」は死亡フラグですよ！（経験者は語る）
