キャッシュについて
はじめに
キャッシュは、ブラウザがCSSや画像などのデータを一時的に保存しておく仕組みです。
キャッシュが残っていると、CSSや画像を変更しても、「以前のデータが残っていて、変更が反映されない」といったことが起こります。
ブラウザの強制リロードを行いキャッシュを削除するという方法もありますが、全てのユーザーにそれをさせるのは現実的ではありません。
本記事では、ユーザーが何もしなくても、Web制作者が変更した画像やCSSを反映させる方法を紹介します。
基本
画像名、CSSの後に、?から始まる文字列を記述します。
そうすると、「ブラウザが新しいファイルだ」と認識して、変更点を勝手に反映してくれます。
それでは、画像とCSSの場合、それぞれについて見ていきます。
画像の場合
画像の場合は、以下のように書きます。
<img src="something.png?20220510">?の後に、何かしらの数字を付け加えると良いと思います。
CSSの場合
CSSの場合は、WordPressで読み込む場合と静的サイトで読み込む場合に分けて見ていきます。
WordPressの場合
WordPressの場合は、functions.phpでCSSを読み込むときに、以下のように記述します。
functions.php
<?php
// css
wp_enqueue_style('style', get_template_directory_uri() . '/style.css', [], date("YmdHi"));wp_enque_styleには、以下の引数を指定することができます。
- 第一引数: ハンドル名(他のスタイルシートと区別するための固有の名前)
- 第二引数: スタイルシートまでの絶対パス(httpsなどから始まるURL)
- 第三引数: 依存関係のある(前に読み込む必要のある)スタイルシート
- 第四引数: バージョン
- 第五引数: メディア
関数リファレンスはこちら
date関数は、日付を出力することのできるPHPの関数です。Yは年(4桁)、mは先頭が0から始まる月、dは日付(2桁)、Hは時間(24時間)、iは分を表しています。
PHPの日付については、こちらの記事が参考になります。
今回の例では、<head>タグ内で、以下のように出力されました。
<link rel="stylesheet" id="style-css" href="https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/style.css?ver=202205110307" type="text/css" media="all">出力後は、時間が03、分が07となっていて、実際の時刻と異なっていますが、これはタイムゾーンが影響していると思われます。
赤字の部分が書かれていることによって、ユーザーがキャッシュの消去を行わなくても、変更点が反映されるようになります。
静的サイトの場合
例: index.html
<link rel="stylesheet" href="https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/style.css?ver=202205110307" type="text/css">例えば、上記のように?の後に何かしらの文字列を記述します。数字だけでもOKです。
この場合は、CSSに変更を加える度に、?の後の文字列も変更する必要があります。
毎回記述するのが面倒な場合は、以下のようにPHPのdate関数を使用します。
<link rel="stylesheet" href="https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/themes/ki-hi-ro.com-2022/style.css?<?php echo date("YmdHi"); ?>" type="text/css">この場合は、PHPの関数を使用するので、ファイルの拡張子をhtmlからphpに変更する必要があります。
まとめ
画像やCSSを変更したら、以前そのWEBサイトを開いたユーザーがブラウザのキャッシュクリアを行わない限り、変更点が反映されません。
そのため、本記事で紹介した方法で、ユーザーが何もしなくても変更点が反映されるようにしていくのが良いかと思います。
コメントを残す