###前提・実現したいこと
Wordpress REST APIを使って別サイトに
・タイトル
・カスタムフィールド値
・サムネイル画像
を表示させたいです。
「タイトル」と「カスタムフィールド値」の出力はLIG様の記事(https://liginc.co.jp/325391)で出力に成功しました。
###発生している問題・エラーメッセージ
問題はサムネイル画像です。現在下記のように記述しましたがサムネイルのURLを取得できません、どのように記述すれば良いのか困っております。
カスタム投稿タイプのmember記事全件を読み込んでおります。
表示させようとしています。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WP REST APIテストページ</title> 6 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 7 <script type="text/javascript"> 8 $(function() { 9 $.getJSON( "http://example.co.jp/wp/wp-json/wp/v2/member/", function(results) { 10 $.each(results, function(i, item) { 11 $("ul#mylist").append("<li>" 12 + item["title"]["rendered"] 13 + "|||||" 14 + item["acf"]["事務所"] 15 + "|||||" 16 + item["_links"]["self"][0]["href"] 17 + "|||||" 18 + item["_links"]["wp:featuredmedia"][0]["href"] 19 + "|||||" 20 //この下が表示されなくて困っている 21 + item["_links"]["wp:featuredmedia"][0].media_details.sizes.full.source_url 22 + "</li>"); 23 }); 24 }); 25 }); 26 </script> 27 </head> 28 <body> 29 <h2>メンバー 全件</h2> 30 <ul id="mylist"> 31 32 </ul> 33 </body> 34</html>
###したいこと
wpのメディアと登録したら画像に対してIDが振られると思います。
そのID取得は
item["_links"]["wp:featuredmedia"][0]["href"]
で可能でしたが、その後のサムネイルサイズ指定、URL取得ができていない状況です。
rest apiに詳しい方がいらっしゃいましたらご教示いただけましたら幸いでございます。
####解決コード
kei344様の助言をもとに書き直しました(出力成功例)。
エンドポイントの設定でカスタム投稿タイプを表す「member」のうしろに[?_embed]を追記することで解決。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>WP REST APIテストページ</title> 6 </head> 7 <body> 8 <h2>メンバー 全件</h2> 9 <ul id="mylist"> 10 </ul> 11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 12 <script type="text/javascript"> 13 $(function() { 14 $.getJSON( "http://example.net/wp/wp-json/wp/v2/member/?_embed", function(results) { 15 $.each(results, function(i, item) { 16 $('ul#mylist').append('<li>' 17 +'【記事タイトル】' + item.title.rendered 18 +'<br>' 19 +'【記事サムネイル_フル画像URL】' + item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url'] 20 +'<br>' 21 +'【記事サムネイル_リサイズ画像URL】' + item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['w700']['source_url'] 22 +'<br>' 23 +'【acf フル画像URL】' + item.acf.メッセージ画像.url 24 +'<br>' 25 +'【acf リサイズ画像URL】' + item.acf.メッセージ画像.sizes.top_slider 26 +'</li>' 27 +'<hr>'); 28 }); 29 }); 30 }); 31 </script> 32 </body> 33</html>
回答1件
あなたの回答
tips
プレビュー