はじめに
WordPressの投稿編集画面で、ある日突然アイキャッチ画像のプレビューが表示されなくなった。エラーとしては:
「画像データを取得できませんでした。」
GutenbergのUI上でこのエラーが出た時、原因は何なのか?構造なのか?RESTなのか?テーマなのか?キャッシュなのか?
調査と検証の過程で得た知見と、実際に解決するまでにやったことを残しておく。
どんな感じかって?こんな感じ。

現象
- 投稿編集画面でアイキャッチ画像が読み込まれず、エラー表示
- 該当の画像はメディアライブラリ上に存在し、投稿にも
_thumbnail_id
として正しく紐づいている - 画像はブラウザから直接アクセスすれば表示される
- 他の投稿では同じ仕組みで画像が問題なく表示されている
- 同じ画像をアップロードすればサムネイルは表示される
- ぶっちゃけここで目標達成だけど、同じ画像をUPするのもだるいので徹底的にやることにした。
- RTAしたい人はスーパーリロードしてくれ。それで全ては解決だ。
原因を探る
構造的な問題を疑って、以下を検証した:
-- 投稿に指定されているアイキャッチ画像IDの確認
SELECT post_id, meta_value AS thumbnail_id
FROM wp_postmeta
WHERE meta_key = '_thumbnail_id';
-- 該当画像の状態確認
SELECT ID, post_type, post_status, post_parent, post_mime_type, guid
FROM wp_posts
WHERE ID = 3910;
-- 添付ファイルメタ情報の確認
SELECT *
FROM wp_postmeta
WHERE post_id = 3910 AND meta_key IN ('_wp_attached_file', '_wp_attachment_metadata');
-- REST APIで画像が認識されるかの確認(CLI例)
curl -I https://example.com/wp-json/wp/v2/media/3910
_thumbnail_id
が正しいIDを指しているか ✅- 画像の
post_type
がattachment
になっているか ✅ - 画像の
post_status
がinherit
であるか ✅ _wp_attached_file
が存在していて正しいファイル名を返すか ✅_wp_attachment_metadata
が存在していて壊れていないか ✅- REST API
/media/{id}
が200で返ってくるか ✅
→ すべてクリア🤔
それでも表示されない。試したこと
別画像に差し替えて保存→正常に表示される
→ すでにUploadされている別の画像に変更して保存で正常に表示。
→ WordPressのテーマやテンプレートには問題がないと確信。
再び問題の画像に戻す→再びエラー
→ ID自体がWordPressの内部で“死んだ判定”されている疑い。
投稿と画像の紐付け(post_parent)を確認
→ post_parent = 投稿ID
になっていることを確認 ✅
最後に行き着いた:JSのキャッシュ
GutenbergはREST APIのレスポンスを内部キャッシュしている。
かつて「このIDの画像は取得できなかった」という履歴を、再評価せずに保持し続ける仕様になってんのかな?
これにより:
- 本来は復活してる画像が
- 表示されないまま
- ずっと「取得できませんでした」と言い続ける
まぁよくわかんないけど、今更スーパリロード。
結論
- WordPressのデータ構造は間違ってなかった
- RESTも嘘をついてなかった
_thumbnail_id
も正常だった- GutenbergのJSが「一度失敗した記憶」を握りしめたまま更新しなかった(たぶん
全部が正しかったのに、“画面に出ない”というだけで疑いの目を向けられていた画像が、ようやく許された瞬間だった。
この検証で、WordPressのデータモデルについて、沢山発見があったけど、それはまた別の機会に。
今は眠らせてくれ💤
-
アイキャッチ画像がプレビュー表示されない原因は何ですか?
-
記事内で紹介したように、WordPressデータベース側の設定ミス(_thumbnail_idやattachmentの紐付け)、REST APIの不整合、画像ファイルの消失、JSキャッシュなど、さまざまな原因が考えられます。多くの場合、Gutenberg(ブロックエディタ)のキャッシュやブラウザキャッシュが根本原因になっていることも多いです。
-
新しく画像をアップロードすれば直るのに、なぜわざわざ調査したの?
-
「なぜ起きるか」を知ることで、他の投稿や将来のトラブル時に再発防止や根本対応ができるようになるためです。実際にデータ構造やREST API、キャッシュの仕組みまで深掘りすることで、サイト運用・保守の知見も深まります。(趣味です)
-
画像自体に問題がある場合はどうしたらいい?
-
画像ファイルが壊れている・サーバーに存在しない場合は、再アップロードか画像ファイルの復旧が必要です。WordPress管理画面やFTPでメディアファイルが存在するか、直接アクセスして正しく表示されるかを確認しましょう。
-
GutenbergのJSキャッシュをクリアする方法は?
-
最も手軽な方法は「スーパーリロード(強制再読み込み)」です。
WindowsはCtrl + F5、MacはCommand + Shift + RでOK。
それでも直らない場合は、ブラウザキャッシュを手動でクリアしてください。
-
この記事の調査で学んだこと・他にも応用できるトラブルシュート法は?
-
「WordPressの見た目のエラーは、データベース/REST/JS/ブラウザ/テーマなど複数レイヤーで起こり得る」という気づきが得られました。今後も「エラーは一方向からだけでなく、多角的に疑って検証する」のがトラブル解決の近道です!
コメントを残す