画像だけを頻繁に入れ替えて、最新の情報に保つ必要があるWebページを作成している場合に、悩ましいことが発生します。
画像を更新したのに、入れ替わっていない！
これは画像のキャッシュが原因で起こります。
閲覧者に画像が入れ替わっていることを通知して、キャッシュを削除してから閲覧してもらうか、スーパーリロードをして読み込んでもらわないと表示されません。
当サイトで公開しているCOVID-19のグラフページが、当初その状態でした。
この問題は、簡単なショートコードを埋め込むことで回避することができます。
目次
画像のキャッシュとは
キャッシュとは、閲覧したWebページの情報を一時的に保存したものです。
閲覧したWebページの画像などの情報を保存しておくことで、次に同じページを訪れたときにスムースに表示させるために、キャッシュは利用されています。
画像キャッシュ問題を回避する仕組み
はじめに、画像キャッシュの影響を受けなくさせる仕組みについて解説します。
画像を表示させるタグは、次のような形で記述されています。
<img src="sample.jpg" alt="サンプル画像" />このままでは、画像キャッシュの問題が生じてしまいます。
このコードにちょっと細工をすると、読み込んでくれる様になります。
<img src="sample.jpg?20200412231824" alt="サンプル画像" />変更箇所は、sample.jpg の後に続く文字列、?20200412231824 を追加しています。
この文字列は、日時を用いるのが一般的なようです。
この例の場合は、2020年4月12日23時18分24秒という数字です。
画像を更新する際には、記事も更新するであろう、という前提ですね。
imgの情報を書き換えることで「この画像は新しい」と認識され、キャッシュの問題が回避できるという仕組みなのだそうです。
という仕組みなのですが、画像を変更するたびに、HTMLの画像ファイルネームを手作業で変更するのは大変ですし、WordPress を使っている意味がありません。
そこで PHP を使って、日時の文字列を自動付加する方法をご紹介します。
具体的な回避方法①（HTML内にPHPを記述する方法）
記事中の画像タグ内に、PHP を書き加える方法です。
<img src="sample.jpg?<?php echo date("YmdHis");?>" art="サンプル画像" />このように、img タグの中に PHP を入れ込むと出来る！
と書いてあるサイトをいくつか見かけたので紹介しておきますが、私の環境では実現できませんでした。
テンプレートに賢威を使っているのですが、サポートに確認したところ、記事中でPHPを使うにはプラグインを入れる必要があるとのことで、動作保証外になるとのこと。
そこで考えたのが、子テーマにPHPを記述して、ショートコードで呼び出して実現する方法です。
具体的な回避方法②（ショートコードを使う方法）
ショートコードを使う方法であれば、利用環境の影響を受けることなく使えると思います。
functions.php にコードを記述する
まず、子テーマを用意して、その中の functions.php の中に、次のコードを追加します。
function shortcode_ymd(){
return date("YmdHis");
}
add_shortcode('ymd', 'shortcode_ymd');この４行のコードを追加するだけで、ショートコードが使えるようになります。
記事内でショートコードを使用する
記事の画像タグ内に、次のようにショートコードを埋め込みます。
<img src="sample.jpg?[ymd]" alt="サンプル画像" />ショートコードは、sample.jpg の後に続けて ?[ymd] を追加します。
これで、2020年4月12日23時18分24秒に更新した記事であれば、
<img src="sample.jpg?20200412231824" alt="サンプル画像" />という?から始まる数字が自動的に付与されたHTMLのコードになります。
WordPress を使っているこのサイト内で、毎日最新の画像に入れ替えて公開しているコンテンツ、COVID-19感染者数の 世界 と 国内 のグラフで、このコードを入れて使っています。
補足説明
ショートコード [ydm] の頭になぜ ? を付けるのか？
いっそのこと、? も自動的に付く様に、ショートコードの PHP の中に組み込んでしまえば良いのでは？
この様な疑問を持たれた方もいらつしゃると思ったので、補足説明します。
function shortcode_ymd(){
return "?". date("YmdHis");
}
add_shortcode('ymd', 'shortcode_ymd');この様にすると、[ymd] だけ入れれば、? も自動的に付けられるのですが、WordPress ビジュアルエディターで見た時に、画像がリンク切れになってしまいます。
私は、この記事を公開する直前まで、こちらのコードを使用していて、とても不便を感じていました。
少し面倒でも、? を付けて、?[ymd] で使用するPHPコードを利用した方が、違和感なく作業が出来るのでオススメです。
