質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

1回答

2216閲覧

Wordpress REST APIでサムネイル画像を読み込む

holic

総合スコア134

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

REST

REST(Representational State Transfer)はwebアプリケーションの構築スタイルの一種です。HTTP GET/POSTによってリクエストを送信し、レスポンスはXMLで返されます。SOAPのようなRPCの構築と比べるとサーバからクライアントを分離することが出来る為、人気です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2017/12/01 03:11

編集2017/12/02 05:25

###前提・実現したいこと
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/12/02 05:58

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。
holic

2017/12/02 06:00

対応遅れて失礼いたしました、ベストアンサーとさせていただきます。
guest

回答1

0

ベストアンサー

【WordPress 4.7で追加されたREST API v2で、投稿記事の情報を取得してみよう! – Chronoir.net】
https://chronoir.net/wp-rest-api-v2-spaco/#31_URL

アイキャッチ画像のURLをREST API v2の結果に含めるには、URLパラメーターに「_embed」を付けます。


もしくはIDから取得する。

【WP REST API を使って投稿写真リストページを作る。|WordPressもくもく勉強会 at コエド第11回】
https://www.slideshare.net/YoshinoriKoba/wp-rest-api-wordpress-at

【Media API Reference | WP REST API v2 Documentation】
http://ja.wp-api.org/reference/media/

投稿2017/12/01 16:06

kei344

総合スコア69400

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

holic

2017/12/02 04:45 編集

無事に解決しました。ありがとうございます。 解決コードも上に追記いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問