
WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法
- 2016-03-28 Mon 00:27:25
- wordpress

新着情報の表示は、HTMLファイルに直接WPを読み込むように構成する方法もありますが
サーバーの制限やら、同ドメインでもサーバーが別とか
そういった場合にどうやって読み込もうかなーと探していたら
ウワサのREST-APIでできそうだったのでやってみました。
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
希望のカテゴリーだけを8件表示だと、続けて
/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プラグインを入れていれば他のフォーマットでも呼び出しできそうです。
ご参考にどうぞ。
- 関連記事
-
-
WP REST API v2 でデータを取得して新着情報をjqueryで表示する方法 2016/03/28
-
既存のhtmlを使ってWordPressテーマ化する時の必要最低限の手順 2015/08/17
-
レスポンシブ・イメージ的に今使えそうな部分と、WordPressでの扱い方 2015/06/10
-
WordPressでスマホとPCで表示をわける際に便利なプラグイン「MultiDeviceSwitcher」 2015/06/08
-
アメーバブログからWordPressへエクスポートするときの作業まとめ 2015/03/17
-
比較的サクッとできる系WordPressプラグインや外部php 2015/03/17
-
WordPressで「ささっと作る」で請けれなくなってる現状。 2014/11/25
-