2016年11月追記:
REST API について、Riot.js を利用した使用方法も紹介しています。合わせてご覧ください。
すべりこみセーフ！WordPress Advent Calendar 2015 10日目担当のもりやまです。23時以降の投稿となってしまいました。
先日の WordCamp US で、Build a Theme with the REST API というセッションがあり、実践的な内容だったので、やってみるついでに記事にしてみました。
ちなみにスピーカーのレイチェルベッカーさんは、WP REST API のメイン開発者のひとり。WP REST API を深く理解している人がつくった質の良いサンプルコードです！
WordPress でふだん制作をしてるデザイナーさん＆コーダーさんにおすすめ
とくにぜひやってみてほしいのが、私と同じような立場の WordPress ユーザー層のみなさん！つまり、そんなに大規模じゃないサイトを WordPress で量産してて、WordPress の関数はバッチリだけど API は〜っていうような。
というのも、これまでも REST API に関するセッションは色々あったと思うんですけど、壮大な話になりがちだったと思います。
例えば「大規模なサービスを構築した事例」とか「アプリ作った話」、「管理画面を作った話」、はたまたもっと概念的な話など。
なんか、「触ってみるのは、まだ先でいいかな」と思っちゃいますよね。
そんななか、今回はとてもシンプルで、現在の WordPress テーマ制作から置き換えてやるやり方なので、ゆくゆく実務で役立ちそうだし、JSON を初めて触る方にもおすすめ！
スライドもチェックしてくださいね。
以下、やり方です。
REST API とは
そもそも REST API って何？というのは割愛します。すいません。考えるな、感じろ。
何はともあれ動かしてみる
まずは、環境で REST API が動くようにします。以下の手順を、いつものやりなれてる方法でやります。
- テスト環境を用意
- WordPress 4.4 をインストール
- プラグイン WP REST API をインストールして有効化
※ WordPress 4.4 は REST API が半分しかマージされてないらしいため。
ここまでできたら、いったん API が出てるか確認してみましょう。インストールした環境の URL 末尾に「/wp-api/」 と追加します。例えばこのブログなら http://blog.mayuko.me/wp-json にアクセス。すると、JSON データがばーっと出てるはず。
うまく JSON が出力されてたら、サンプルコードを動かしてみましょう。
4. テーマディレクトリに wcus-demo をインストールして有効化
（よくわからない人は master.zip をダウンロードして解凍）
この状態でテーマを有効化すると、ヘッダとフッタのみがあらわれます。中身はまだ出てません。
5. main.js で API のルート URL を指定する
/js/main.js を開いて、API をどこから取ってくるのか指定します。7行目にダミーのURLが入っているので、さっき確認したズラーっと JSON が出力される URLに に置き換えます。例えばこのブログなら http://blog.mayuko.me/wp-json です。
この状態で、もう一度サイトを表示すると、記事のデータをとってきているはずです。
ちなみに API 取得元を、他の WordPress サイトに指定しても表示できました。REST API のプラグインのインストールをお忘れなく。
自分のブログを指定したようす:
ループ部分を JS で読み込んでいる
以下、テンプレートファイルがどうなってるか読んでみます。
サンプルコードでは index.php のみで、JavaScript もここに書かれてます。
index.php をみてみると、wp_head(); とかは今までどおりに出力しています。
いつもなら「while ( have_posts() ) : 〜 endwhile;」と書く部分が、js-data という ID の空の div タグに置き換わっているのがわかると思います。
?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body> <header> <a href="<?php echo esc_url( home_url() ); ?>"><img id="logo" height="80" src="<?php echo esc_url( get_template_directory_uri() . '/img/logo.png' ); ?>"></a> </header> <div id="wrapper"> <div id="js-data" class="container" aria-live="assertive"> <!-- Our collection and single view data will be appended here --> </div> </div> <footer> <p class="credit">Powered by the <a href="https://github.com/WP-API/WP-API">WP REST API</a></p> </footer> <?php wp_footer(); ?> </body>
そのあとに posts-tmpl というテンプレートが続きます。このテンプレートと、main.js によって、コンテンツがあとから生成されているという仕組みなのですね。
<script id="posts-tmpl" type="text/template">
<% _.each( data, function( post ) { %>
<div id="post-<%= post.id %>">
<h1><a class="js-single-post" data-name="<%= post.slug %>" href="http://wpapi.dev/news/<%= post.slug %>">
<%= post.title.rendered %>
</a></h1>
<%= post.excerpt.rendered %>
</div>
<% }); %>
<div id="pagination">
<% if ( typeof previous !== 'undefined' ) { %>
<a class="page-prev" href="http://wpapi.dev/<%= previous %>"><< Previous</a>
<% } %>
<% if ( typeof next !== 'undefined' ) { %>
<a class="page-next" href="http://wpapi.dev/<%= next %>">Next >></a>
<% } %>
</div>
</script>
たしかに、効率的っぽいしくみ。今後こういうのがスタンダードになっていくのでしょうか。
なんだか見慣れない書き方だけど、<% %> で囲んでる部分がプログラムみたいです。これを使いこなせれば色々自分でつくれそうだぞ！
で、コード中の <%= post.title.rendered %> とかってどういう意味？ってまず思いますよね。思ってください。
私だったら JSON のファイルを直接見ます。（もっといい方法あったら教えて下さい…..）もちろんリファレンスを読むのが一番はやいです！すいません。訂正しておきます。
読み込んでいる JSON ファイルを直接読んでみる
まず、見る URL に注意。
先ほど指定した「http://ドメイン/wp-json/」ではないので注意。取得したい情報が記事情報か、メディアか、カテゴリーか、などで「/wp-json/」のあとの URL が伸びてゆくしくみだからです。
今回はトップページの記事リストの取得に使ってる JSON ファイルが見たいので、main.js の中からそれらしいところを探します。
すると、コメントで「Homepage and Post list pagination routes callback.」とタイトルがついている箇所があります。ここが、記事一覧を読み込む動作の記述。
/**
* Homepage and Post list pagination routes callback.
*
* @param {string} page - Pagination location.
*/
var listPostswithPagination = function( page ) {
page = typeof page !== 'undefined' ? page : '1';
$.get( apiUrl + '/wp/v2/posts?page=' + page, function( data, textStatus, jqxhr ) {
53行目に、jQuery の get があります。このひとつめの引数が、もってきている JSON の URL です。
$.get( apiUrl + '/wp/v2/posts?page=' + page, function( data, textStatus, jqxhr ) {
「apiUrl + ‘/wp/v2/posts?page=’ + page」とあります。
「apiUrl」はさっき設定したルートが代入され、「page」は複数ページにわたってるかどうか。このブログの1ページ目を取得するなら「http://blog.mayuko.me/wp-json/wp/v2/posts?page=1」となります。
可読性のある形式に変換する
そのままだと改行がなく見づらいのでオンラインで提供されている JSON の整形ツールを使ってみると、こんなかんじです。
さっきの <%= post.title.rendered %> はピンクの線をひいたところからとってきてるのがなんとなくわかっていただけると思います。。
この変換後の JSON を読んでみて、たとえば <%= post.date %> とすれば日付がとってこれる、ということがわかります。
あとはよしなに
とても初歩的なところでおわりますが、ここまでわかったらいろいろ遊べると思います。
main.js を工夫するともっといろんなデータがとれそうだし、functions.php もなるほどーという感じですのでぜひ読んでみてください。元のスライドも、先へ進んでいきますので、読んでみてね。
問題は、役に立つかどうかじゃない！
こんなかんじで、今使ってる WordPress サイトのデータを使っていろいろ作れるので、近々どこかでハンズオンをやりたいな〜と思ってます。
しかし、これですぐに役立つものができるのか？というと、とりあえずは別にいいと思うんです。まずは、いろいろ作って遊んでみるのがいいんじゃないかと思うんです。
Justin Tadlock さんも「くずでもいいからなにか作れ、チュートリアルより実践が大事」というようなことを言っているし。
Want to learn JavaScript? Build something. Even if it's crap. Tuts are great, but they'll never give you the practical know-how needed.
— Justin Tadlock (@justintadlock) December 8, 2015
マット・マレンウェッグからの宿題は、「JavaScript を深く学ぶ」
ところで何でここ最近で急に、WordPress 界隈のみなさんがこぞって Javascript がどうのって言ってるかというと、先日の WordCamp US でのマット・マレンウェッグさんの「来年までに JavaScript を深く勉強するのが宿題です」という趣旨の発言がありました。Calypso も出ましたし。
そういうわけで、WordPress のコミュニティとしても JavaScript を扱いはじめたほうがいい気がしています。
ハンズオンなどを通して、日本のコミュニティでも REST API に触れてみる人が増えるといいなと思います。先生をやってみたい人もぜひお声掛け下さい。
ハンズオンでつくるものの案としては、みんなのブログから出てる API だけでなく、Facebook や Instagram などの API を組み合わせてプロフィールページを作ってみるとかが楽しそうかなと思ってます。（河村先生にもらったネタです。ありがとうございます）
Homework assignment from @photomatt: Learn JavaScript, deeply. #WCUS pic.twitter.com/VHr2p4JB1O
— WordCamp US (@WordCampUS) December 5, 2015
あと、内容としては去年メガネさんが書いたブログを読んでも、同じようなことをやってました。両方読んだらばっちりわかると思いますから、こちらも参考にどうぞ。
JSON REST API (WP API) プラグインを利用して ブログを API 化したり、そこから情報を取得して表示したり
2016年11月追記:
REST API について、Riot.js を利用した使用方法も紹介しています。合わせてご覧ください。