[WordPress]JSON REST APIで投稿を取得する方法のメモ

先日のハッカソンで宮内さんが紹介されていたテーマを使って、JSONから投稿内容を取得してみました。

追記(2016/01/05)

Version1のコードで紹介しているのになぜかこの記事にアクセスが集まるので一部加筆修正しました。

変更箇所

プラグインURLをVersion2のものに変更
JavaScriptの処理をVersion2に対応
REST APIの説明をちょっとましなものにリライト

JSON REST APIって？

WordPressのデータを取ってくるAPIです。
REST形式なのでセッションや状態に依存することなく結果を得ることができるようになっています。

参考記事など

https://e-words.jp/w/RESTful_API.html
https://ja.wikipedia.org/wiki/REST

参考スライド

AWS+WordPressでつくるFirefoxアプリ from Takayuki Miyauchi

今回やること

とりあえずシンプルにWordPressの投稿データを取得してみましょう。

用意するもの

WordPress（最新版）
WordPress REST API (Version 2)プラグイン
サンプルテーマ：https://github.com/miya0001/wp-mobile-app-example/

JSONで呼び出してみる

その前に

index.php以外のテーマファイルが無い状態ですので、single.phpを作ってテーマフォルダにアップします。
ここから先はsingle.phpにコードを書いてきます。

動作イメージ

Welcome_
とりあえず投稿のタイトルと本文だけを表示させてみました。

single.phpのコード

これをコピペしてもらえれば再現できます。
[php]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Welcome!</title>
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="pingback" href="/xmlrpc.php">
<link rel=’stylesheet’ id=’ui-kit-css-css’ href=’/wp-content/themes/wp-mobile-app-example-master/uikit-2.8.0/css/uikit.min.css?ver=2.8.0′ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’/wp-includes/js/jquery/jquery.js?ver=1.11.0′></script>
<script type=’text/javascript’ src=’/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1′></script>
<script type=’text/javascript’ src=’/wp-content/themes/wp-mobile-app-example-master/uikit-2.8.0/js/uikit.min.js?ver=2.8.0′></script>
<script type=’text/javascript’ src=’/wp-content/themes/wp-mobile-app-example-master/js/jquery.sparql.js?ver=2.8.0′></script>
<script type=’text/javascript’ src=’/wp-content/themes//wp-mobile-app-example-master/js/urlEncode.js?ver=2.8.0′></script>
</head>
<body>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<ul id="contents"></ul>
<script>
(function($) {

$.getJSON(‘/wp-json/wp/v2/posts/<?php the_ID(); ?>’,

function(data) {
$(data).each(function() {
$(‘#contents’).append(‘<h1>’ + this.title.rendered +'</h1>’+ this.content.rendered);
});
});

})(jQuery);
</script>

<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</body>
</html>
[/php]

ポイント

現在の投稿のみを表示させるため、JSONのURLに投稿IDを追加させます。
[php]
$.getJSON(‘/wp-json/wp/v2/posts/<?php the_ID(); ?>’,
[/php]

あとは表示させたいコンテンツに応じてjQueryを記述するのみ。

今回は記事タイトル(this.title)と本文(this.content)を引っ張っています。
[html]
function(data) {
$(data).each(function() {
$(‘#contents’).append(‘<h1>’ + this.title.rendered +'</h1>’+ this.content.rendered);
});
});
[/html]

JSON形式での記事表示について

AJAX通信で呼び出しているためか、ページ表示から少し遅れてコンテンツが読み込まれます。

個人的にはJSON形式での記事表示は「PHPの負荷を減らす」目的として、サイドバーや関連コンテンツ一覧などに使われるようになるのではないかなと思います。

~~コアファイルでのJSON REST API実装は２０１４年１２月。~~
結局2015年12月リリースのWordPress4.4に基礎部分だけマージされた状態で、2016年1月時点でも完全にはマージされていません。

それまでにはある程度使いこなせるようになりたいですね。

PHP無しで投稿を取得する

single.phpにてPHP無しで個別記事を取得するコードはこんな感じになります。

[html]
<ul id="contents"></ul>
<script>
(function($) {
var postId = location.pathname;
$.getJSON(‘/wp-json/wp/v2/posts’ + postId,

function(data) {
$(data).each(function() {
$(‘#contents’).append(‘<h1>’ + this.title.rendered +'</h1>’+ this.content.rendered);
});
});

})(jQuery);
</script>
[/html]
JSONのファイルパスをPHPではなく「location.pathname」で取得させています。

「もっとREST API勉強したいんや！」という方向けのリンク集

自分の知ってる範囲の記事ばかりなので、「あの記事ないやんけ！」とかあればご連絡ください。
ちなみにこのリンク集もWP REST API使って表示させてたりしますので、興味がある方はどうやってるか調べてみると面白いかもです。

https://nskw-style.com/2016/wordpress/wp-api/oauth1.html
https://nskw-style.com/2016/wordpress/wp-api/get.html
https://nskw-style.com/2016/wordpress/wp-api/discovery.html
https://nskw-style.com/2016/wordpress/wp-api/auth.html
https://blog.hinaloe.net/2015/10/23/new-in-wordpress-4-4/

[wpapi-posts s=”WP REST API”]