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

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

ねこたびや

この記事は、以下のような方におすすめです！

問題

この問題はTinyMCEで差し替えたい画像を挿入するときに起こります。

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

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

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

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

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

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

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

画像を別の名前で保存することで、新しい画像に差し替えることができます。

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

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

ハード再読み込みを行うことで、キャッシュを無視して差し替えた画像を表示することができます。

先のやり方では、この画像の名前が良いという場合やSEOの観点からどうしても画像の名前を変えられない場合があります。そこで、このハード再読み込み（スーパーリロード）という手段を使います。

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

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

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

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

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