WordPress

WordPress★強制的にCSSのキャッシュを無効化する方法

投稿日:

サイトを修正した後でクライアント様に確認していただくとき、

「ブラウザのキャッシュを削除してから、もう一度ご確認いただけますでしょうか」

というやりとりをよ〜くやります。
せっかく修正したのに「直ってないよ〜」って返事がくると、がっかりします(泣)
クライアント様からこんな残念な答えが返ってこないように、ブラウザのキャッシュに依存させない方法を知ったので覚え書き。

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の変更を確認してもらう方法でした!

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WordPress★コメント部分を簡易掲示板風にカスタマイズする

  WordPressのバージョンは4.7.3 コメント部分を掲示板風にカスタマイズ。変更内容は 1)コメントの入力フォームで不要な部分を非表示にする 2)入力フォームの文言を自由に変更する  3)コ …

no image

MailPoet|購読者ページのカスタマイズ

ニュースレーターを配信できるプラグインを探していたらこの「MailPote」と「MailChimp」という2つのプラグインがダントツで使われていたので試してみた。 まずは一番人気のMailChimpだ …

Confused Question Marks Boy  - milaoktasafitri / Pixabay

WPで「永続的なオブジェクトキャッシュは有効化されていません」に対処したときのメモ

WordPressのダッシュボードに「サイトヘルス」の表示をさせています。最近「永続的なオブジェクトキャッシュは有効化されていません|AMP」というエラーがずっと出っぱなし。 ??? 何をどうすればい …

ContactForm7のフォーム作成時に出るエラー「複数のフォームコントロールが単一の label 要素内に置かれている」を解消する

WordPressでは超有名なフォームプラグインの Contact Form 7。 新しくフォームを作成するにはコードを編集する必要があります。 コード編集といっても簡単で、初心者でもそんなに困ること …

WP★無料のテーマ「Bizvector」CSSの編集方法

ワードプレス★無料のテーマ「Bizvector」CSSの編集方法 ある案件で新規の固定ページを追加することになり、そのページだけで使うCSSをあらたに追加しなくちゃいけなくなりました。そのサイトは「B …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。