Wordpressで画像が差し替わらない!スーパーリロードでも画像が変更されない時の確認。

2022-02-25

Wordpress-画像が変更されない_eyecatch

Wordpressにて手動で画像をアップロードし直した時や、Enable Media Replaceなどのプラグインで画像を置換したあと、画像が変更されない時の対処法です。

原因はブラウザのキャッシュであることがほとんどですが、キャッシュを無視する"スーパーリロード"を行っても画像が変更されない時があります。

別のブラウザで確認してみると、画像が変更されていたので気にしないことにしていたのですが、具体的な解決策を見つけましたので記事にします。

画像があるページではなく、画像ページ自体をスーパーリロードしましょう。

WordPressで画像が変更されない時の対処法

サイトで使用中の画像が古くなった。別の画像の方が良さそう…
このような理由で画像を差し替え(上書き保存)することがありますが、たまに画像の差し替え作業完了後にも関わらず、画像が変更されないことがあります。

変更したはずの画像が変更されない時、ほとんどはキャッシュが原因です。

キャッシュといってもサーバーキャッシュやブラウザキャッシュといった様々な種類があるわけですが、画像の差し替え後、画像が変更されない時はブラウザに古い画像のキャッシュが残っており、これが読み込まれてしまっている可能性が高いです。

ということでキャッシュを無視できるブラウザの"スーパーリロード"を行えば画像が変更されるのかと思いきや、スーパーリロードしても画像が変わりません…

スーパーリロードとは?

スーパーリロードはCSSなどのスタイルの変更がサイトに反映されない時にもよく使われるブラウザのページ読み込み方法で、キャッシュを無視してページを再読み込み(更新)することが出来るというものです。

ChromeやEdgeなら「Ctrl + F5」でスーパーリロードできます。
(スーパーリロードのやり方はブラウザによって少し異なります。)

スーパーリロードで画像が変更されない

画像が変更されない時の状況説明をすると、下記のような感じです。
サイトの記事に使用している画像を差し替えた後、そのページをスーパーリロードしても画像が変更されません。

Wordpress-画像が変更されない_001

これを別の画像に差し替える

記事に画像を埋め込み表示している画像を別の画像に差し替えます。

Wordpress-画像が変更されない_002

Enable Media Replaceで画像を差し替える

今回、画像の差し替えにはプラグイン「Enable Media Replace」を使いました。
これは古い画像を削除してから同名の画像を再アップロードした場合も同じです。

関連記事

プラグインについてはこちらに詳しく書いています。
「Enable Media Replace」の使い方。WordPressの画像を差し替えるプラグインが便利!

画像の差し替えが完了したところで、ページをスーパーリロードで読み込みます。

Wordpress-画像が変更されない_003

スーパーリロードしても画像が変更されない(GIF)

ページの更新で差し替え後の画像である、緑色の画像に変更されればOK!
なのですが…何度スーパーリロードしても画像が変更されません。

その後、別のブラウザで確認したところ画像は変更されていたので、差し替え作業そのものは無事に完了しており、ブラウザキャッシュが原因ということになります。

スポンサーリンク

解決策:画像の更新は画像ページで行う

画像の差し替え作業は済んでおり、あくまでも自分のブラウザでだけ画像が変更されていないという状態なのであまり気にしていなかったのですが、ふと画像ページそのものをリロードしてみたところ、変更した画像が反映されました。

ということで具体的な作業手順は以下です。

  1. 画像を右クリックし、新規タブで開く。
  2. 画像ページをリロードする。
  3. 記事ページに戻りスーパーリロードする。

これで記事ページの画像も変更されます。
では詳しく見ていきましょう・w・

画像を差し替えた後、対象の画像ページを開きます。

Wordpress-画像が変更されない_004

画像を右クリックし、フルサイズの画像を表示する

記事内の画像を右クリックし「新しいタブで開く」か「新しいタブで画像を開く」をクリックします。
(アップロードしたフルサイズのオリジナル画像が開ければ何でもOK。)

Wordpress-画像が変更されない_005

画像が開いたらページをリロードする

続いて、画像が表示されているページをリロード(更新)します。
このページの読み込みは通常の更新で大丈夫でしたが、念のためスーパーリロードで読み込んだ方が確実かもしれません。

Wordpress-画像が変更されない_006

差し替え後の画像が読み込まれる

するとキャッシュに関係なく、差し替えた画像が読み込まれるはずです。

ポイント

ここで新しい画像が読み込まれない時は、サーバー側のキャッシュが残っていないか確認して下さい。

この状態で画像を埋め込んでいるページ(記事)をスーパーリロードします。

Wordpress-画像が変更されない_007

記事ページをスーパーリロードする(GIF)

これで差し替えた画像に変更されます。
原因は良く分からないのですが、記事ページをリロードしても画像のキャッシュまでは再読み込みされないのでしょうか?

とにかく画像そのものを1度リロードして更新してあげれば、記事ページの画像にも差し替えが反映されるようです。

ページはスーパーリロードで再読み込みする

最後に補足です。

画像が表示されるページをリロードし、差し替えた後の画像が表示されるようになったら、画像を埋め込んでいる記事では普通のリロードではなく、スーパーリロードで読み込まないと画像が変更されません。

Wordpress-画像が変更されない_008

再読み込み→スーパーリロードの動作(GIF)

ということで「再読み込み(Ctrl + R)」ではダメです。
「スーパーリロード(Ctrl + F5)」でページを読み込むようにして下さい!



まとめ

Wordpressの画像を差し替えても自分のブラウザに反映されない時は、画像ページそのものを再リロードしてから、記事ページをスーパーリロードすれば反映されます。

「Enable Media Replace」で画像が変更されない原因の1つに"日本語ファイルだから"ダメ?ということが挙げられていましたが、これはたぶん間違っています。

おそらく、日本語→英語というようにファイル名を変更すれば差し替えた画像が違うものとして扱われ、ブラウザに再リロードされることが直接の解決要因です。

画像のキャッシュに関しては画像ページそのもので更新する必要があるようです。
いちいちややこしいね…ではではこの辺で・w・

-WordPress

site-logo
ありがとうございました!
良かったらシェアしてネ・w・
当サイトはピンバックを受け付けます。
  • この記事を書いた人
ザキ

ザキ

X:@sologaku

プログラミングに興味があり情報系の大学を卒業。

新卒で社会人になるも数年で退職し今はフリーランスとして生きています。

少しでも誰かの役に立てれば...と思い、当サイトでIT関係のハウツーを発信しています。


ソロ学運営者:ザキの自己紹介

© 2020 sologaku