「WordPress ユーザーのための Riot.js 入門」デモの使い方 - アウトプットファーストを目指すBlog

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

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

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

前回の記事はこちら。

「WordPress ユーザーのための Riot.js 入門」で知る、Riot.js を始めるべき理由

まずは、Riot.js の基本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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