WordPress REST APIを用いたサムネイル表示バグの修正について

Question

実現したいこと

WordPressのサイトにて、特定のカスタム投稿タイプのアーカイブページ（archive-slugname.php）で、非同期による記事の絞り込みを実施しています。

・ACFプラグイン（カスタムフィールドプラグイン）を使用して、特定の投稿タイプ（今回は例として「applications」という投稿タイプ）にチェックボックスを設置します。
・このチェックボックスを各投稿に紐づけて公開します。
・フロントエンドでは、ユーザーがチェックボックスを選択すると、関連する記事が絞り込まれて表示されます。

前提

上記のようにチェックボックスをユーザーがクリックしてJavaScriptにより動的に記事を生成した際に、「サムネイルがうまく表示される投稿」と「サムネイルがうまく表示されない投稿」があることがわかりました。

つまりWPのアイキャッチのデータが取得できていないということになります。
カスタム投稿内の全ての投稿ではなく、取得できている投稿と取得できていない投稿があるという厄介な状態になっています。

しかしWPの管理画面から間違いなく投稿自体にはすべてアイキャッチが設定されていることを確認しました。

テンプレートのソースコードとJavaScriptのソースコードを添付するかどうかは迷いましたが、後述にも記載している通り、テンプレートソースには問題がない可能性が高いと考えられるため、一旦その詳細を省略させていただきます。
(もし不快に感じられたら申し訳ないです)

問題の原因の仮説

大まかな問題の原因として、JSONレスポンス内の "featured_media" キーの値が適切に取得できていないことが判明しました。

具体的には、サムネイルが正常に表示される投稿データと表示されない投稿データの中身を比較して確認しました。このデータはWordPressのローカル環境から取得したもので、具体的なURLや値はダミーに置き換えていますが、形式としては以下のようになります。

http://example.local/wp-json/wp/v2/applications/219?_embed

具体的には以下のエラーメッセージとなります。

発生している問題・エラーメッセージ

サムネイル表示がうまくいかなかった記事のデータ構造(json)

{
  "id": 123,
  "date": "2023-01-01T00:00:00",
  "date_gmt": "2023-01-01T00:00:00",
  "guid": {
    "rendered": "http:\/\/example.local\/?post_type=applications&p=123"
  },
  "modified": "2023-01-01T00:00:00",
  "modified_gmt": "2023-01-01T00:00:00",
  "slug": "dummy-slug",
  "status": "publish",
  "type": "applications",
  "link": "http:\/\/example.local\/applications\/dummy-slug\/",
  "title": {
    "rendered": "Dummy Title"
  },
  "content": {
    "rendered": "\n<p>Dummy content.<\/p>\n",
    "protected": false
  },
  "featured_media": 999, // ここが原因?
  "template": "",
  "acf": {
    "applications_filter": ["dummy_category"],
    "meta_description": "",
    "applications_pick_up": true
  },
  "_links": {
    "self": [{
      "href": "http:\/\/example.local\/wp-json\/wp\/v2\/applications\/123"
    }],
    "collection": [{
      "href": "http:\/\/example.local\/wp-json\/wp\/v2\/applications"
    }],
    "about": [{
      "href": "http:\/\/example.local\/wp-json\/wp\/v2\/types\/applications"
    }],
    "wp:featuredmedia": [{
      "embeddable": true,
      "href": "http:\/\/example.local\/wp-json\/wp\/v2\/media\/999"
    }],
    "wp:attachment": [{
      "href": "http:\/\/example.local\/wp-json\/wp\/v2\/media?parent=123"
    }],
    "curies": [{
      "name": "wp",
      "href": "https:\/\/api.w.org\/{rel}",
      "templated": true
    }]
  },
  "_embedded": {
    "wp:featuredmedia": [{
      "code": "rest_forbidden",  // ここが原因?
      "message": "\u305d\u306e\u64cd\u4f5c\u3092\u5b9f\u884c\u3059\u308b\u6a29\u9650\u304c\u3042\u308a\u307e\u305b\u3093\u3002",
      "data": {
        "status": 401  // ここが原因?
      }
    }]
  }
}

サムネイル表示がうまくいった記事のデータ構造(該当箇所以外省略)

メディアのidなどが正しく取得できていると思います。

{
  "featured_media": 139,
  "_embedded": {
    "wp:featuredmedia": [
      {
        "id": 139, 
        "media_type": "image"
        // 中略
      }
    ]
  }
}

このURLを使用して取得したJSONデータ内の "featured_media" キーの値が、サムネイル表示の問題に直接関連していると考えています。

試したこと

以下の観点から、サムネイル表示が正常に動作する環境（環境A）と動作しない環境（環境B）の差分を検証しています。

・どちらの環境もWordPressのバージョンは最新の6.2.2で一致しています。
→ WordPressのバージョンが問題ではないと考えられます。

・どちらの環境も同じプラグインを使用しており、そのバージョンも一致しています。
→ WordPressのプラグインのバージョンが問題ではないと考えられます。

・管理画面の設定（一般設定やパーマリンク設定）も一致しています。
→ 完全に見逃しがないとは断言できませんが、設定は同一にしています。特にパーマリンクの設定も全く同じです。

・環境Bのテーマデータ(wp-content/themes/自作テーマデータ)を環境Aに上書きしても、サムネイルは正常に表示されます。
→ JavaScriptやPHPのテンプレートファイルの記述ミスではない可能性が高いです。また、ソースコード自体には問題がない可能性が高いです。つまり、テーマデータ自体は問題の原因ではないと考えています。

・アイキャッチ画像が表示されなかった投稿に別のアイキャッチ画像を再度添付し直した結果、絞り込み後にその投稿にアイキャッチが適切に表示された
→ 使えない画像 or 画像のデータ自体に何か問題があるのか・・・？(画像はすべて.webpです)
↓
・画像拡張子を.webpから.pngに変換したころうまく表示された。
→ .webpという拡張子が使えないのか・・・？しかし、表示されるものもあるので確定でもない気がする。
別のローカル環境だと.webpでもうまく表示されたので、イマイチ再現性がない。

・ローカル環境からテスト環境(エックスサーバー)にAll-in-One WP MigrationというWPプラグインを利用して移行した。
→ 何かDBなどにうまく移行がいかない部分があった...？

現時点での可能性と依頼したいこと

今現在では.webpという拡張子が特定の環境で正しく読み込まれないのか？という見解になっています。
中途半端な情報の部分もあるかと思いますが、上記の情報をもとに、問題の〇〇にある、そのためにはどこを確認すればいいのかというヒントだけでも得たいと考えています。
今の自分の力ではここまでの調査が限界でした。
皆様のお力添えをいただきたいと存じます。

どうぞよろしくお願いいたします。

上記からさらに追加検証を試してみました

なぜアイキャッチ画像が非表示になってしまうのかについて、以下の追加検証結果を報告します。

①まず、applicationsのカスタム投稿タイプの全記事を一度削除し、アイキャッチ画像を再設定しました。

②その後、JavaScriptで動的に出力した記事をチェックボックスで絞り込んだところ、全てのアイキャッチ画像は表示されました。

③次に、全く別のカスタム投稿タイプの非公開記事で定義した画像フィールドタイプのカスタムフィールドに、applicationsのカスタム投稿タイプの記事に設定したアイキャッチ画像をいくつか添付しました。

④しかし、再度②の手順を実行すると、添付した画像が再び非表示になりました。

⑤さらに、③で別の画像を添付してみると、その画像を使用した場所も非表示になり、さらに④で交換したはずの画像も再び非表示になりました。

⑥最後に、非公開記事を公開状態に変更してみましたが、状況に変化はありませんでした。

上記は.webpで検証していましたが、これらを.pngに変更しても同じ結果になりました。つまり画像の拡張子は犯人ではありませんでした。

つまり「WPの管理画面内において、同じ画像(例 image_test_01.png)をある箇所のAというカスタムフィールド、Bというカスタム投稿タイプの投稿のアイキャッチ画像など、同じ画像を管理画面の複数の箇所で設定すると発生するバグ」というところまで突き止めました。

Comments

[tabuu]

権限エラーのようです。下記を確認してみてください。
・サムネイル画像を他の非公開の記事に紐づけていないか
・ログインが必要な場合はユーザーの権限
・サムネイル画像のファイル名に特殊文字や日本語が入っている場合は英数字のみにする

[退会済みユーザー]

回答いただきありがとうございます。
・サムネイル画像のファイル名に特殊文字や日本語が入っている場合は英数字のみにする
> こちらに関しては、すべて同じような名前 image_連番.webpのような形式なので、おそらく問題がないかと思います。

・サムネイル画像を他の非公開の記事に紐づけていないか
こちらを確認してみたいと思います。

・ログインが必要な場合はユーザーの権限
> こちらに関してですが、具体的にはWPの権限についてということでしょうか。(WPの管理者、寄稿者、編集者等)
現状管理者権限しかなく、アイキャッチを添付した権限もすべて管理者権限で行なっていました。
続きを読む ∨

Answer 1

根本的な解決はしませんでしたが、同じサムネイル画像を使わないという手段で回避しました。
異なる画像であれば、正常に表示されます。(つまりAという全く別なるカスタムフィールドなどで、同じ画像を使っていた場合にバグが発生するため)
こちらはWPのREST APIの仕様のようで、現状でも完全な解決は難しいようです。
見ていただいた方ありがとうございました。