最初に結論

WordPressへ画像をアップロードしただけでは、HTML内の画像URLは自動的には変わりません。

images/画像名.pngではなく、メディアライブラリの画像詳細に表示される「ファイルのURL」をコピーし、HTMLのsrcへ入れる必要がありました。

画像をアップロードしても表示されなかった

私は、ChatGPTで作成したWordPress用HTMLと、記事で使用する画像をまとめたZIPファイルを用意しました。

画像をWordPressのメディアライブラリへアップロードした後、HTML内の画像URLを次のように変更しました。

src="images/01-before-top-page.png"

ところが、画像は表示されませんでした。

画像ファイルそのものはメディアライブラリに存在していたため、最初はファイル名やHTMLの書き方に問題があると思いました。

相対パスと完全なURLの違い

images/01-before-top-page.pngは、ZIPファイルやパソコン上のフォルダー構成を表す相対パスです。

WordPressへ画像をアップロードすると、画像には次のような公開用URLが割り当てられます。

https://あなたのサイト/wp-content/uploads/年/月/画像ファイル名.png

WordPressの記事から画像を表示するには、この公開用URLをHTMLのsrcへ指定します。

メディアライブラリからファイルURLを確認する手順

1. WordPress管理画面の「メディア」を開きます。
2. 記事で使用する画像を選択します。
3. 「添付ファイルの詳細」を表示します。
4. 「ファイルのURLをコピー」を押します。
5. HTML内の画像URLへ貼り付けます。

HTMLを修正した例

変更前

<img
  src="images/01-before-top-page.png"
  alt="変更前のトップページ"
>

変更後

<img
  src="https://あなたのサイト/wp-content/uploads/年/月/01-before-top-page.png"
  alt="変更前のトップページ"
>

実際に使用する場合は、「あなたのサイト」の部分を手入力するのではなく、メディアライブラリに表示されたファイルURLをそのままコピーします。

修正後に確認したこと

• 公開画面に画像が表示されるか
• PCとスマートフォンの両方で確認できるか
• 画像URLを直接開いて404にならないか
• 画像の代替テキストが設定されているか
• {{IMAGE_01_URL}}などの置換記号が残っていないか
• images/...という相対パスが残っていないか

まだ画像が表示されない場合

• URLの前後に余分な空白や記号がないか
• src="..."の引用符が正しく閉じているか
• メディアライブラリから画像を削除していないか
• ブラウザやキャッシュ系プラグインに古い表示が残っていないか
• httpとhttpsが一致しているか
• 画像URLをブラウザへ直接貼り付けると画像が開くか

よくある質問

まとめ

私の場合、画像が表示されなかった原因は、画像をメディアライブラリへアップロードした後も、HTMLにZIPファイル内の相対パスを入れていたことでした。

WordPressで画像を表示するには、メディアライブラリへアップロードした画像の「ファイルのURL」を使う必要がありました。

ChatGPTにHTMLを作ってもらった場合でも、画像URLはWordPressへアップロードした後に、自分のサイトのURLへ置き換える必要があります。