WordPressで画像差し替え時に以前の画像になる問題とその解決策

WordPressで画像が変更されない!私が行っている解決策サムネイル

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

問題

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

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

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

原因

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

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

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

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

解決策

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

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

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

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

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

ハード再読み込みを行う

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

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

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

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

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

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

  1. 下書きにある以前の画像を削除する
  2. 下書きを一旦【下書き保存】する
  3. WordPress管理者画面の【メディア】-【メディアライブラリ】から以前の画像を【完全に削除】する
  4. 差し替える予定の画像を【メディアライブラリ】に追加
  5. 下書きを更新(F5)する
  6. 下書きに差し替える予定の画像を挿入
  7. 【新しいタブでプレビュー】
  8. ハード再読み込み(Ctrl+F5)を行います

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

まとめ

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