WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法

WP REST API v2 のダウンロード

こちらからダウンロードできます。
インストールして有効化しておきます。

WP管理画面で、パーマリンク設定を更新

GET リクエストする場合 /wp-json/wp/v2/posts のように呼び出します。
URLを扱う系のプラグインはだいたいパーマリンク設定を更新！ですね。

私はなんとなく数字ベースにしがちです。

ソースコード

▼html

<!-- ここにデータが出力される -->
<div class="data"></div>

▼js

<!-- jsonデータ読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function(){
  $.ajax({
      type: 'GET',
      url: '★WPのアドレス★/wp-json/wp/v2/posts',
      dataType: 'json'
  }).done(function(json){
          var len = json.length;
          for(var i=0; i < len; i++){
            var title = json[i].title.rendered;
            var link = json[i].link;
            var excerpt = json[i].excerpt.rendered;

            var pubDD = new Date(json[i].date);
            yy = pubDD.getYear();if (yy < 2000) { yy += 1900; }
            mm = pubDD.getMonth() + 1;dd = pubDD.getDate();
            var pubDate = yy +'.'+ mm +'.'+ dd ;
            var html = '<li><span>' + pubDate + '</span><a href="' + link + '">'+ title +'</a>' + '</li>'+ excerpt ;
            $('.data').append(html);
          }
  }).fail(function(json){
          $('.data').append("読み込みませんでした。");
  });


});
</script>

ポイント

json[i].link
json[i].excerpt.rendered
みたいなところが、jsonのキーやインデックスを指定しているところ。
json[i]とかの [i]がループで回してるやつになります。

v2では、.rendered をつけないといけないのが増えた感じです。

取得したいデータを取得した後、liデータでhtml出力しているので
あとはCSSをいじればOKです。

JSON系はURLのアドレスで表示データを変更できるので
たとえば全ページだったら　/wp-json/wp/v2/posts
希望のカテゴリーだけを８件表示だと、続けて
/wp-json/wp/v2/posts?filter[posts_per_page]=8&filter[category_name]=★カテゴリー名★
みたいにURLを変更すればよいです。

JSONはブラウザで叩いても見づらい

URLを叩いたらこんな感じに・・。
phpの場合はver_dumpしちゃえば配列はキーを探してアクセスできるくらいにブラウザでも改行されるのですが、JSONはエスケープキーも入ってるし全体が見づらいです。

Pawを使ってキーにアクセスしやすくするといいかもしれません

Pawを使うと、こんな風にデータを整理してくれるので、indexやキーを探しやすいです。
出力したJSONのURLにどんなデータが入っているのか見渡すのにも便利でした。

Pawのダウンロードはこちらから。

☆

WP REST API は、getだけじゃなくてpostもできるみたいなので
WordPressと経由したWebアプリも作れそうな勢いみたいですね。
今回はGETして加工しているだけなので、難しく考えずとも使えるはずです。

ちなみにJSONデータはjetpackプラグインを入れていれば他のフォーマットでも呼び出しできそうです。

ご参考にどうぞ。