サイトを修正した後でクライアント様に確認していただくとき、
「ブラウザのキャッシュを削除してから、もう一度ご確認いただけますでしょうか」
というやりとりをよ〜くやります。
せっかく修正したのに「直ってないよ〜」って返事がくると、がっかりします（泣）
クライアント様からこんな残念な答えが返ってこないように、ブラウザのキャッシュに依存させない方法を知ったので覚え書き。
このページのもくじ
GETパラメータを付与する
GETパラメータを付与すると、ブラウザが新しいcssとして読み込んでくれます。
GETパラメータとはファイルパスの末尾に付く?以降の「名前=値」で作られたもの。
一般的な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のように数字を増やしていくだけ。
後々の管理もしやすくなります。
※ JavaScriptも同様にできます。
WordPressではfunctions.phpを修正する
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 );
ここに、GETパラメーターを付与するには、バージョン部分を修正すればいいだけです。
上のサンプルで言うと、「1.0.0」の部分を「1.0.1」などに変更するだけ。
修正せずに上のままのコードで、ブラウザからHTMLソースを確認すると、「？ver=1.0.0」として出力されています。
<link rel='stylesheet' id='my-style-css' href='https://haniwaman.com/wp-content/themes/haniwaman/style.css?ver=1.0.0' type='text/css' media='all' /> <script type='text/javascript' src='https://haniwaman.com/wp-content/themes/haniwaman/js/my.js?ver=1.0.0'></script>
以上、ブラウザのキャッシュに依存させずに、CSSの変更を確認してもらう方法でした！