質問: ### 前提・実現したいこと 現在、windowsを用いて、wordpressのstaging環境にてwebサイト(http://example.com)の編集を行っている者です。 wordpressの管理画面「Pages(ページ?)」をクリックすると、 各webページごとのHTMLファイルが選択できるようになると思います。 現在、こちらのHTMLファイルでは下記のように画像を指定しております。 ``` ``` 今後画像ファイルの差し替えは何度か行う可能性がありますので、 HTMLの記述を変更せずに画像ファイルを差し替えたいと考えております。 winSCPを用いてサーバ上から古い画像ファイルを削除して新しい画像ファイル(古い画像ファイルと同じ名前)をアップロードしなおしたにもかかわらず、 差し替え前の古い画像がずっと表示されてしまうという状況が発生してしまいました。 ### 詳細な状況説明 実施したことの詳細を下記に示します。 【実施したこと1】 1. wordpressステージング環境のサーバに、WinSCPを用いてアクセス 2. 画像ファイルが配置されているディレクトリへ移動 3. 不要な画像ファイルの名前を一度example.pngからexample_old.pngに変更 4. 新しい画像ファイル(example.png)を同じディレクトリへ配置 5. ブラウザ(chrome)を更新(F5キー) →更新されない 6. ブラウザ(chrome)のキャッシュをクリア(キャッシュされた画像とファイルをクリア)し更新(F5キー) →更新されない 7. ブラウザ(chrome)のスーパーリロード(Shiftキー+F5キー) →更新されない 8. HTMLファイルの記述を変更(参考サイト) 下記のように変更 →更新された! ``` ``` ※参考サイトとは異なりdate("ymdhis")ではなくdate(ymdhis)とした理由は、 date("ymdhis")という記述にするとなぜか画像の下に「alt="・・・">」と表示されてしまうためです。 ### 試したこと ブラウザのキャッシュをクリアしても更新は反映されませんでしたが、 上記8.にあるような記述をすれば画像は更新されることがわかりました。 このことから、 **先に全てのHTMLファイルを8.のような記述に1度変更すれば、 ブラウザを更新するたびにサーバから画像ファイルを取得してくるようになるはず。** **そうすればその後何度画像ファイルを差し替えてもHTMLを変更しなくてもよくなるのではないか?** と思い、下記を試しました。 【実施したこと2】 1. まず初めにHTMLファイルの記述を変更 ``` ``` 1. 画像ファイルが配置されているディレクトリへ移動 2. 不要な画像ファイルの名前を一度example.pngからexample_old.pngに変更 3. 新しい画像ファイル(example.png)を同じディレクトリへ配置 4. ブラウザ(chrome)を更新(F5キー) →更新されない 5. ブラウザ(chrome)のキャッシュをクリア(キャッシュされた画像とファイルをクリア)し更新(F5キー) →更新されない 6. ブラウザ(chrome)のスーパーリロード(Shiftキー+F5キー) →更新されない **結局上記の方法では画像ファイルは更新されませんでした。** ### 質問 * 下記の記述をするだけでは、ブラウザの更新と同時にサーバから画像ファイルを取得することはできないのでしょうか。 ``` ``` * 何か他に対処法がございましたらご教示いただきたく存じます。 長くなってしまいましたが、何卒よろしくお願いいたします。
回答: スーパーリロードはブラウザのキャッシュをクリアする機能で、ブラウザのキャッシュは一度見た画像は一旦保存して次に見るときはわざわざ更新しなくていい=ページの表示を速くしようという機能です。 質問の内容からすると、サイト内のどこかに一定期間保存する機能のあるテーマやプラグイン(w3 total cacheなど)を使っていたり、サーバーの中でキャッシュしてくれる機能があるものもあったりと何かありそうな気がします。 まずはメディアライブラリで差し替えた画像がきちんと認識されているかを確認してください。 差し変わっているのを確認したら、画像のURLをコピーして直接画像を開いてみてください。開いた画像が元の画像なのであれば上の2つのうちのどちらかが影響しているのでしょう。 一番いいのは普段使いでないブラウザを使ってログインせずに見てみること。前述したテーマやプラグインの中には管理者としてログインしているとリフレッシュしない場合がありますので・・・。 以上参考になれば・・・時間の経過でもう差し変わってするかもしれませんね。