More than 5 years have passed since last update.

WordPress WP_REST_APIで投稿データを取得するでサムネイル画像とアドバンスカスタムフイールド画像を出力する

Last updated at 2017-12-09Posted at 2017-12-02

Wordpress WP_REST_APIを使って、
●サムネイル画像
●アドバンスカスタムフイールド画像
この2つの取得を行います。

##準備
wordpressのヴァージョンは4.9.1です。
デフォルトでWP_REST_APIが設定されているバージョンのお話をします。

####①カスタム投稿タイプを「member」として作成する（作成方法は割愛します）
カスタム投稿タイプの設定で
register_post_typeに、

functions.php

'show_in_rest' => true,

の記述を忘れずに。

####②カスタムフィールド値の取得には専用のプラグインが必要です。インストール後に有効化する。
ACF to REST API

####③APIのURLの確認
カスタム投稿タイプの全件データ所得は下記の記述です。

URL

http://example.net/wp-json/wp/v2/member/

ですが、今回は画像データもほしいためにカスタム投稿タイプ「/member/」の後ろに「?_embed」を記述します。
下記に記述例を書きます。

URL

http://example.net/wp-json/wp/v2/member/?_embed

※これがわからずに長時間ハマりました。

##出力
上記で準備はOKです。
あとは出力します。

html

<!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>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up