目次
追記(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
参考スライド
今回やること
とりあえずシンプルにWordPressの投稿データを取得してみましょう。
用意するもの
- WordPress（最新版）
- WordPress REST API (Version 2)プラグイン
- サンプルテーマ：https://github.com/miya0001/wp-mobile-app-example/
JSONで呼び出してみる
その前に
index.php以外のテーマファイルが無い状態ですので、single.phpを作ってテーマフォルダにアップします。
ここから先はsingle.phpにコードを書いてきます。
動作イメージ
とりあえず投稿のタイトルと本文だけを表示させてみました。
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”]
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。