メシのタネ

メシのタネになる、Laravelや設計思想の技術配信サイト


WordPressでアイキャッチ画像のプレビューが出ない現象とその解決までの記録


  1. WordPress
  2. WordPressでアイキャッチ画像のプレビューが出ない現象とその解決までの記録

はじめに

WordPressの投稿編集画面で、ある日突然アイキャッチ画像のプレビューが表示されなくなった。エラーとしては:

「画像データを取得できませんでした。」

GutenbergのUI上でこのエラーが出た時、原因は何なのか?構造なのか?RESTなのか?テーマなのか?キャッシュなのか?

調査と検証の過程で得た知見と、実際に解決するまでにやったことを残しておく。

どんな感じかって?こんな感じ。

現象

  • 投稿編集画面でアイキャッチ画像が読み込まれず、エラー表示
  • 該当の画像はメディアライブラリ上に存在し、投稿にも _thumbnail_id として正しく紐づいている
  • 画像はブラウザから直接アクセスすれば表示される
  • 他の投稿では同じ仕組みで画像が問題なく表示されている
  • 同じ画像をアップロードすればサムネイルは表示される
    • ぶっちゃけここで目標達成だけど、同じ画像をUPするのもだるいので徹底的にやることにした。

原因を探る

構造的な問題を疑って、以下を検証した:

-- 投稿に指定されているアイキャッチ画像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_typeattachment になっているか ✅
  • 画像の post_statusinherit であるか ✅
  • _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のデータモデルについて、沢山発見があったけど、それはまた別の機会に。

今は眠らせてくれ💤


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.