wordpressで作成したwebサイトの中の画像を差し替えたが、反映されない

Question

前提・実現したいこと

現在、windowsを用いて、wordpressのstaging環境にてwebサイト(http://example.com)の編集を行っている者です。

wordpressの管理画面「Pages（ページ？）」をクリックすると、
各webページごとのHTMLファイルが選択できるようになると思います。
現在、こちらのHTMLファイルでは下記のように画像を指定しております。

<a href="http://example.com/example" target><img src="http://example.com/wp-content/uploads/・・・/example.png" alt="・・・"></a>

今後画像ファイルの差し替えは何度か行う可能性がありますので、
HTMLの記述を変更せずに画像ファイルを差し替えたいと考えております。

winSCPを用いてサーバ上から古い画像ファイルを削除して新しい画像ファイル（古い画像ファイルと同じ名前）をアップロードしなおしたにもかかわらず、
差し替え前の古い画像がずっと表示されてしまうという状況が発生してしまいました。

詳細な状況説明

実施したことの詳細を下記に示します。
【実施したこと１】
0. wordpressステージング環境のサーバに、WinSCPを用いてアクセス
0. 画像ファイルが配置されているディレクトリへ移動
0. 不要な画像ファイルの名前を一度example.pngからexample_old.pngに変更
0. 新しい画像ファイル(example.png)を同じディレクトリへ配置
0. ブラウザ(chrome)を更新（F5キー）
→更新されない
0. ブラウザ(chrome)のキャッシュをクリア（キャッシュされた画像とファイルをクリア）し更新（F5キー）
→更新されない
0. ブラウザ(chrome)のスーパーリロード(Shiftキー+F5キー)
→更新されない
0. HTMLファイルの記述を変更（参考サイト）
下記のように変更
→更新された！

<a href="(遷移先のURL)" target><img src="http://・・・・.com/wp-content/uploads/・・・/example.png?<?php echo date(ymdhis);?>" alt="・・・"></a>
```※参考サイトとは異なりdate("ymdhis")ではなくdate(ymdhis)とした理由は、
date("ymdhis")という記述にするとなぜか画像の下に「alt="・・・">」と表示されてしまうためです。

### 試したこと

ブラウザのキャッシュをクリアしても更新は反映されませんでしたが、
上記８.にあるような記述をすれば画像は更新されることがわかりました。
このことから、

**先に全てのHTMLファイルを８.のような記述に１度変更すれば、
ブラウザを更新するたびにサーバから画像ファイルを取得してくるようになるはず。**
**そうすればその後何度画像ファイルを差し替えてもHTMLを変更しなくてもよくなるのではないか？**

と思い、下記を試しました。


【実施したこと２】
0. まず初めにHTMLファイルの記述を変更

<a href="(遷移先のURL)" target><img src="http://・・・・.com/wp-content/uploads/・・・/example.png?<?php echo date(ymdhis);?>" alt="・・・"></a>

2. 画像ファイルが配置されているディレクトリへ移動
3. 不要な画像ファイルの名前を一度example.pngからexample_old.pngに変更
4. 新しい画像ファイル(example.png)を同じディレクトリへ配置
5. ブラウザ(chrome)を更新（F5キー）
→更新されない
6. ブラウザ(chrome)のキャッシュをクリア（キャッシュされた画像とファイルをクリア）し更新（F5キー）
→更新されない
7. ブラウザ(chrome)のスーパーリロード(Shiftキー+F5キー)
→更新されない

**結局上記の方法では画像ファイルは更新されませんでした。**

### 質問

- 下記の記述をするだけでは、ブラウザの更新と同時にサーバから画像ファイルを取得することはできないのでしょうか。

<a href="(遷移先のURL)" target><img src="http://・・・・.com/wp-content/uploads/・・・/example.png?<?php echo date(ymdhis);?>" alt="・・・"></a>

- 何か他に対処法がございましたらご教示いただきたく存じます。

長くなってしまいましたが、何卒よろしくお願いいたします。

Comments

[退会済みユーザー]

WordPressの構築は百人百様なので、実物を見ないとなんとも言えないかと思います。staging環境が、wordpress.com提供サービスのものなのか、自前（レンタルサーバーなどに）設置のものなのかも重要な話でしょうし。

[minako1]

ご覧くださりありがとうございます。

stagingサイトはレンタルサーバーに設置のものです。レンタルサーバーはgodaddyを使用しています。

[退会済みユーザー]

固定ページの変更だと察するのだけど、固定ページは静的htmlコードしかかけないはずで、そこでなぜphpタグを書いているのか、ちょっとわからないのですが。

[minako1]

固定ページにはphpタグは記述できない、という意味でしょうか。
基礎的なことだと察しますが、初心者のためよくわかっておりません…。

[minako1]

静的htmlでは更新のたびに下記のようなことはできない、という認識でお間違いないでしょうか。
更新のたびに.png?の後ろの文字を変化させる
または
更新のたびに.png?の後ろの文字を更新日時にする

Answer 1

スーパーリロードはブラウザのキャッシュをクリアする機能で、ブラウザのキャッシュは一度見た画像は一旦保存して次に見るときはわざわざ更新しなくていい＝ページの表示を速くしようという機能です。

質問の内容からすると、サイト内のどこかに一定期間保存する機能のあるテーマやプラグイン（w3 total cacheなど）を使っていたり、サーバーの中でキャッシュしてくれる機能があるものもあったりと何かありそうな気がします。

まずはメディアライブラリで差し替えた画像がきちんと認識されているかを確認してください。

差し変わっているのを確認したら、画像のURLをコピーして直接画像を開いてみてください。開いた画像が元の画像なのであれば上の２つのうちのどちらかが影響しているのでしょう。

一番いいのは普段使いでないブラウザを使ってログインせずに見てみること。前述したテーマやプラグインの中には管理者としてログインしているとリフレッシュしない場合がありますので・・・。

以上参考になれば・・・時間の経過でもう差し変わってするかもしれませんね。

Comments

[minako1]

ご回答ありがとうございます。

可能性があるプラグインは下記かと考えます。
・Go Daddy Quick Setup
・Search Engine Visibility
・Sidekick
以前これとは別件で、CSSの変更が、ログインしていない別ブラウザで確認した場合反映されていないという事象がありましたので、一度キャッシュを保存するようなプラグインをDeactivateしてみたところ、問題なく反映された、ということがありました。
ただ、これらのプラグインを一度Deactivateしても問題ないのかわからず、現在は何も触っていない状態です。

ちなみに、別ブラウザを使ってログインせずに見るというのは一度行っております。その場合も画像は変更されておりませんでした。

また、「画像のURLをコピーして直接画像を開いてみてください。」とのこと、ありがとうございます。
確認し、改めて連絡させていただきます。

Answer 2

固定ページは、ただのhtmlソースなので、
通常はphpコードを書いても実行できません。

ですが、少々手間ひまをかけて仕込めば、
phpコードを実行させることも出来るようです。
ショートコードを固定ページに記述しておき、
functions.phpなどで作っておいて自作phpコードを呼び出すというもののようです。
phpというよりもWordPressの仕組みに一定の理解がないと、
真似してやろうとしても頓挫しそうなレベルの難易度です。

自作phpコードをWordPress固定ページ内で実行する方法：
WordPressの固定ページでPHPを使う方法 | 問題を解決して成果を上げる東京新宿のWeb制作｜raisez（ライセス）

画像をキャッシュさせないための方法を模索しているのであれば、
そもそもキャッシュさせないような設定もできるよという事例：
画像をキャッシュさせないようにする一番手っ取り早い方法 　：　 かばだんなさん かく語りぬ３

Comments

[minako1]

とても丁寧にご回答くださり、ありがとうございます！！

１つめの方法に関して、質問させていただきたく存じます。
「“/inc/$file.php”のinc/の部分は任意の名前をつけてください。」とは、例えばどのような名前をつければよいのでしょうか。incではなく別のディレクトリを作成するという意味でしょうか。

２つめの方法ですが、
試してみましたが、やはり画像は更新されませんでした。

1. 下記を固定ページの上部に追加
<head>
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
</head>

2. 画像ファイルと同じディレクトリ下に下記ファイルを配置
「.htaccess」
Header set Cache-Control "no-cache"
Header set Pragma "no-cache"

もしかして少し時間を置く必要があったりはしますでしょうか・・・？
アップロードしてすぐに更新したのですが、関係はありますでしょうか。

何卒よろしくお願いいたします。