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

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

ただいまの
回答率

91.37%

  • PHP

    15139questions

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

  • WordPress

    4759questions

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

  • JSON

    775questions

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

  • REST

    90questions

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

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

解決済

回答 1

投稿 2017/12/01 12:11 ・編集 2017/12/02 14:25

  • 評価
  • クリップ 0
  • VIEW 58

ho_ri

score 54

前提・実現したいこと

Wordpress REST APIを使って別サイトに
・タイトル
・カスタムフィールド値
・サムネイル画像
を表示させたいです。

「タイトル」と「カスタムフィールド値」の出力はLIG様の記事(https://liginc.co.jp/325391)で出力に成功しました。

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

問題はサムネイル画像です。現在下記のように記述しましたがサムネイルのURLを取得できません、どのように記述すれば良いのか困っております。

カスタム投稿タイプのmember記事全件を読み込んでおります。
表示させようとしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>WP REST APIテストページ</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
          $.getJSON( "http://example.co.jp/wp/wp-json/wp/v2/member/", function(results) {
              $.each(results, function(i, item) {
                 $("ul#mylist").append("<li>"
                     + item["title"]["rendered"]
                     + "|||||"
                     + item["acf"]["事務所"]
                     + "|||||"
                     + item["_links"]["self"][0]["href"]
                     + "|||||"
                     + item["_links"]["wp:featuredmedia"][0]["href"]
                     + "|||||"
                        //この下が表示されなくて困っている
                     + item["_links"]["wp:featuredmedia"][0].media_details.sizes.full.source_url
                     + "</li>");
              });
          });
      });
    </script>
  </head>
  <body>
    <h2>メンバー 全件</h2>
    <ul id="mylist">

    </ul>
  </body>
</html>

したいこと

wpのメディアと登録したら画像に対してIDが振られると思います。
そのID取得は
item["_links"]["wp:featuredmedia"][0]["href"]
で可能でしたが、その後のサムネイルサイズ指定、URL取得ができていない状況です。

rest apiに詳しい方がいらっしゃいましたらご教示いただけましたら幸いでございます。

解決コード

kei344様の助言をもとに書き直しました(出力成功例)。
エンドポイントの設定でカスタム投稿タイプを表す「member」のうしろに[?_embed]を追記することで解決。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>WP REST APIテストページ</title>
  </head>
  <body>
    <h2>メンバー 全件</h2>
    <ul id="mylist">
    </ul>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
          $.getJSON( "http://example.net/wp/wp-json/wp/v2/member/?_embed", function(results) {
              $.each(results, function(i, item) {
                 $('ul#mylist').append('<li>'
                     +'【記事タイトル】' + item.title.rendered
                     +'<br>'
                     +'【記事サムネイル_フル画像URL】' + item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['full']['source_url']
                     +'<br>'
                     +'【記事サムネイル_リサイズ画像URL】' + item['_embedded']['wp:featuredmedia'][0]['media_details']['sizes']['w700']['source_url']
                     +'<br>'
                     +'【acf フル画像URL】' + item.acf.メッセージ画像.url
                     +'<br>'
                     +'【acf リサイズ画像URL】' + item.acf.メッセージ画像.sizes.top_slider
                     +'</li>'
                     +'<hr>');
              });
          });
      });
    </script>
   </body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/12/02 14:58

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

    キャンセル

  • ho_ri

    2017/12/02 15:00

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

    キャンセル

回答 1

checkベストアンサー

+2

【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/02 01:06

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/02 13:45 編集

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

    キャンセル

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

ただいまの回答率

91.37%

関連した質問

同じタグがついた質問を見る

  • PHP

    15139questions

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

  • WordPress

    4759questions

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

  • JSON

    775questions

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

  • REST

    90questions

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