～ とあるサイトのカスタマイズ案件にて ～
- わたし「対応が完了したので、ご確認いただけますでしょうか。」
- クライアント「変更されていません。」
- わたし「大変お手数ですが、キャッシュを削除してからご確認いただけますでしょうか。」
- クライアント「キャッシュの削除ってなんですか？」
- わたし「PCだとCtrl + Shift + R、スマホだと各機種によって異なるため、「[機種名] キャッシュ削除」で検索していただけますか。」
- クライアント「まだ変わっていません。」
- わたし「どのような画面が表示されていますか？」
- クライアント「（キャプチャー添付）」
- わたし「またキャッシュが残ってますね。。大変お手数ですが、もう一度さきほどのキャッシュの削除をお試しいただけますか？」
うわあああああああああああ
キャッシュの削除1つでこれだけのやり取りが頻発します。
この無駄なやり取りを排除すべく、ブラウザのキャッシュに依存させない方法を紹介します。知ってしまえば簡単ですので、キャッシュの不毛なやり取りで疲れている方はぜひお試しください。
はにわまんコーダーになって一番やっているやり取りかもしれません笑
その１ GETパラメーターを付与
GETパラメータを付与することで、ブラウザが新しいcssとして読み込んでくれます。
GETパラメータとはファイルパスの末尾に付く?以降の「名前=値」で作られたもの。Webサービスとか作る際はよく使われます。
一般的なWebサイトではGETパラメーターは使われておらず、こんな感じです。
<link rel="stylesheet" href="style.css">GETパラメーターを使えば、「.css」の後ろに?ver=1.0.1の形でバージョン情報を付与することができます。
<link rel="stylesheet" href="style.css?ver=1.0.1">style.cssとstyle.css?ver=1.0.1は別物として扱われます。お客様のcssファイルを更新した際は?ver=1.0.1のような情報を付与して納品すると、キャッシュの影響を受けずに確認していただくことができるわけですね。
さらに更新した場合は、style.css?ver=1.0.2のように数字を増やしていくだけなので、こちらとしても管理しやすくなります。
このように、.cssの末尾に新しいバージョン情報を付与してブラウザに再読込させましょう！
※ JavaScriptも同様にできます
WordPressではfunctions.phpを修正
静的なHTMLファイルであれば、HTMLファイルの中身を直接書き換えてあげればいいのですが、WordPressではCSSやJavaScriptはfunctions.phpで管理されています。
こんな感じで記載されているかと思います。
wp_enqueue_style( 'my-style', get_stylesheet_directory_uri() . '/style.css', array(), '1.0.0' );
wp_enqueue_script( 'my-js', get_stylesheet_directory_uri() . '/js/my.js', array( 'jquery' ), '1.0.0', true );該当のCSSに対して、バージョン部分を変更してあげます。上の例でいうと、1.0.0の部分を1.0.1とかに変更してあげてください。
HTMLソースを見えてもらえれば分かりますが、?ver=1.0.0として出力してくれます。
<link rel='stylesheet' id='my-style-css' href='https://haniwaman.com/cms/wp-content/themes/haniwaman/style.css?ver=1.0.0' type='text/css' media='all' />
<script type='text/javascript' src='https://haniwaman.com/cms/wp-content/themes/haniwaman/js/my.js?ver=1.0.0'></script>その２ HTMLに直書き
GETパラメーターを付与するのは結構面倒くさかったりします。functions.phpを扱うので少し神経も使いますし。
WordPressの修正でわたしがよくやっているのが、HTMLに直接出力する方法です。CSSファイルを新たに読みにいかないので、HTMLファイルさえ読み込める状態なら間違いなくスタイルが反映されます。
HTMLに直接出力は<head>内に<style>で囲って、以下のような感じでCSSを記載する方法です。
<head>
<title></title>
<meta charset="utf-8">
<style>
/* ここに追加 */
</style>
</head>WordPressでは「追加CSS」に追加する
WordPressでは便利な機能があって、
外観 → カスタマイズ → 追加CSS に記載すれば、追加したデザインをリアルタイムで確認しながら作業できますし、保存すれば<style>に保存されるという優れものです。
簡単なカスタマイズであれば、追加CSSに追加していくだけで十分な場合もあります。
おわり
ブラウザのキャッシュに依存させずにCSSの変更を確認してもうらう方法を２パターン紹介しました。
軽微な修正なら「追加CSS」でも十分かもしれません。（人によってstyleタグでの出力に抵抗のある方もいるかもしれませんが。。）
style.css?ver=1.0.2のようにGETパラメーターでバージョン情報を付与する方法はキャッシュを意識しなくて済むだけでなく、こちら側の管理も明確になるというメリットもあります。
「キャッシュの削除お願いします」のやりとりに疲れている方は、どちらかの方法をお試しください！
