先日の WordBench 東京10月勉強会を振り返るシリーズ、2回めです。

私の担当したセッション「WordPress ユーザーのための Riot.js 入門」について。今回はいよいよ、デモ用コードの触り方をご紹介します。

実際に触ってみたら、「WordPress のテンプレートタグと似てる!」と実感していただけるはず。

前回の記事はこちら。

まずは、Riot.js の基本

Riot.js を動かす最低限のコードはこうです。

  1. head タグ内で、Riot.js を読み込む
  2. body 内に、カスタムタグを設置する
  3. Script タグの中で、カスタムタグの中身を定義する
  4. body 閉じタグ直前で、カスタムタグをマウントする

では実際のサンプルを見てみましょう。

今回は、Riot.js 勉強会 @Tokyo #1 での phi さんのデモが非常にわかりやすかったので紹介します。埋め込みが見づらい場合は新しいウィンドウで

デモの「HTML」タブの内容を編集し、▶ボタンを押すと反映されるので、いろいろ書き換えてみて下さい。

JSON データの扱い方をチェック

こちらのデモでは、スクリプトの中の35行目あたり、「this.data = { (ここにJSON) } 」となっている部分直接 JSON を書き込んでおり、その中の値を書き換えることで出力内容を変化させられるようになっています。

やり方はこちらのスライドで紹介されているので、いろいろ書き換えてみて下さい

その他、このサンプルのとおり、カスタムタグ内にスタイルシートが書けたり、いろいろありますが、そちらは触ってためしていただくことにして次に進みます。

WordPress の API データを利用しよう

先ほどのデモで、JSON を読み込んでいる部分がありました。ここを直書きで指定するのではなく、WordPress サイトから動的にコンテンツを取得するカスタマイズをします。

その前に、ぜひ自分の WordPress サイトの API を利用してみてほしいので、自分のサイトに以下の対策をして下さい。

自分の WordPress サイトから API が出ているか確認

まず、2016年10月時点で WordPress 本体からはコンテンツ API が出ていません。利用するには以下のどちらかが必要です。

このどちらかに当てはまるサイトは、すでにコンテンツ API が出ています。チェックするには、ブログの URL に /wp-json/wp/v2 と追加してみましょう。このブログであれば:

http://blog.mayuko.me/wp-json/wp/v2

にアクセスします。正しく API が出ていれば以下のような画面になるはずです。

これが REST API の生データ。だらだらと長いデータがでたら OK です。

だめな例は以下。短いデータの冒頭に「rest_no_route」と出ています。

それから「見つかりません」ページが出る場合も対応が必要です。プラグインのインストールをやっておいてください

カスタマイズ後のサンプルをチェック

サイトからコンテンツ API がでるようになったら、さっそく Riot.js を使ってデータを取ってきましょう。

デモは http://runstant.com/mayukojpn/projects/wbtokyo0610 にアップしてあります。

自分のサイトのデータを取得

デモでは、EXP というグループブログの著者情報をもとにプロフィールカードを生成しています。

18行目、こちらの resource_url を書き換えると、別の WordPress サイトのデータを取得できますので、自分のサイトに置き換えてみて下さい。

var resource_url = ‘http://wp-e.org’;

カスタムタグをチェック

合計5つのカスタムタグでできています。

それぞれ、Ajax で REST API を取得しているタグが3つ、文字列操作をしているタグが2つです。Ajax には jQuery を利用しています。

以下のまとめを元に、「テンプレートタグと似てる」というイメージで、定義部分と呼び出し部分を意識しながら読んでみて下さい。

API を取得するカスタムタグ:

  • <cards> 著者カードのリスト。エンドポイントは「users
  • <posts> 著者ごとの投稿リスト。エンドポイントは「posts
  • <featured-image> まず著者の最新投稿を1件取得し、そのアイキャッチ画像 ID から画像を取得。エンドポイントは「posts」と「media/{ id }

文字列操作するカスタムタグ:

  • <raw> 文字列をアンエスケープする。description など、HTML タグが含まれている場合こちらで書き出す。
  • <format-date> 日時表示のフォーマットを変更する

リファレンスをチェック

どうでしょう、これだけでもサイトのウィジェットをつくるアイディアがわきますね!

さらに WP REST API について詳しく知りたい方はリファレンスをチェックしてくださいね。

つたない説明ですみませんが、質問やご指摘などありましたらお寄せ下さいー。

なお、勉強会全体についてのまとめは WordBench 公式ブログに書きました!ぜひご覧ください。

この記事を書いた人

マヨネーズまゆこ

元カンボジア在住、現在は日本で WordPress コミュニティに関わる、フリーランスの Webデザイナーです。Web の力で、面白い人や活動がもっと発信されるようになるのが夢。