WordPressで画像が変更できない！以前の画像になってしまう原因と差し替える方法

これはWordPressで下書きに挿入していた画像を別の画像に差し替える際に、表示が前にアップロードした画像になってしまう問題の記事です。この解決策は、画像を別の名前に変更するかハード再読み込みすることで解決できます。Cocoonを使っていてもできましたので、詳しく紹介したいと思います。

画像が変更できない問題が発生

この問題は、画像を差し替えようとしたときに起こります。

例えば、下書きを作成していて画像を添付している場合です。この下書きを作成している途中で、画像を変えたいと思うことがあると思います。

しかし、下書きの画像を上書きすると、画像を変更する前の状態で表示されてしまいます。

キャッシュが原因

原因としては、キャッシュにより以前に保存された画像が残ってしまっているからです。

キャッシュとは、一時的にサイトのデータを保存することで、次回以降のアクセスを高速化したり、データ通信を少なくしたりする技術です。

おそらく、【メディアライブラリ】では以前の画像になっていますが、【画像を編集】を行うと差し替えた画像になっているためサーバー側ではなく、WEBブラウザのキャッシュが原因ではないかと思います。

つまりこのキャッシュにより、以前に保存した画像データが残ってしまい、差し替えても以前の画像データを読み込んでしまっているのが原因です。

解決策２つ

解決策としては、別の名前で画像をアップロードするか、ハード読み込みを行います。

①画像を別の名前で保存する

１つ目は、画像を別の名前で保存する方法です。

この問題は、画像の名前が同じことで起こります。そこで、この異なった名前を画像につければ解決できます。

例えば、「cat.png」を「neko.png」のように変更することで解決できます。

②ハード再読み込みを行う

２つ目は、ハード再読み込みを行う方法です。

先のやり方では、画像の名前を変えるため、どうしても画像の名前を変えたくないと考える人がいらっしゃるのではないかと思います。このような方は、ハード再読み込み（スーパーリロード）という手段を使います。

ハード再読み込みは、以前のキャッシュを無視してサーバーから画像などのデータを再度ロードします。これを使うことで、差し替える予定の画像が読み込まれます。

具体的なやり方としては、F12（デベロッパーツール）を押し、左上の【リロードマーク】を左クリック長押し、【ハード再読み込み】をクリックします。

ちなみに簡単なやり方は、【Ctrl+F5】または【Shift+F5】で同じくハード再読み込みができます。

画像を差し替える手順としては（Google Chromeの場合）、

下書きの画像は依然と同じ画像ですが、時間が経てば直り、またプレビューすると差し替えた画像に変わるので、私はこの方法を利用しています。

まとめ

• 問題：下書きの画像を差し替えると、画像を変更する前の状態になってしまう
• 原因：キャッシュが原因
• 解決策
  • 画像を別の名前で保存する
  • ハード再読み込みを行い、キャッシュを無視する