アラタナエンジニアブログ

aratana Engineer's Blog

WP REST API の便利さに感動したWordCamp Kyoto2017レポート

f:id:miiitaka:20170725164408p:plain

フロントエンドエンジニアの高見です。6月24日・25日にWordCamp Kyoto 2017に参加してきました。 数年ぶりに京都の地を踏みまして、ちょっとワクワク。古都京都の雰囲気に酔いしれながら会場の京都大学まで赴きました。

WP REST API

1日目のセッションデイで「WP REST API で実際なにが嬉しいの?」というセッションを聞きました。 WordPress4.4からコアに追加された機能で、Ajaxで非同期に値を取得したり記事の更新を行ったりと、フロントエンドエンジニアが喜びそうな機能が満載です。

セッションでは、無限スクロールやインクリメンタルサーチに応用する方法が紹介されていました。 弊社でもコンテンツマーケティングの一環で、WordPressを導入するお客様も少なくないわけで、ECサイト側にWordPressの記事を表示したりするのですが、 今のところRSS情報を元に表示する方法で実装しているので、WP REST APIで取得してみようと思い考えてみました。

WP REST API の動作準備

まずはWP REST APIのエンドポイントを設定します。WordPressrest_url()という関数が準備してあるので、この値をJavaScript側に渡すコードを記述します。 (WordPressのテーマで実験しようとしているので、WordPressの機能ベースで書いてます。)

function theme_scripts() {
    $args = array(
        'root' => esc_url_raw( rest_url() )
    );
    wp_enqueue_script( 'wp-api-test', get_template_directory_uri() . '/wp-api.js', array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'wp-api-test', 'WP_API_Settings', $args );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

テーマのfunctions.phpに記述しました。以下、処理内容。

これでテーマ側にWP_API_SettingsというJavaScriptの変数ができあがるので、値を使用することができます。 実際に以下のようにソースコード上に出力されます。

<script type='text/javascript'>
/* <![CDATA[ */
var WP_API_Settings = {"root":"http:\/\/vccw.dev\/wp-json\/"};
/* ]]> */
</script>

注意点はグローバル変数で出力されるので、一意な名前になるようにすること。 この値を使用して、Ajax通信してみます。

WP REST APIで取得したデータを表示するHTMLを準備

早くAjax通信を試したい所ですが、まずは下準備。データを表示するHTMLを準備します。とりあえずシンプルにボタンを押したら通信してリストに表示するというものを。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>WP REST API Sample</title>
   <?php wp_head(); ?>
</head>
<body>
<button id="wp-api-read">GET POST</button>
<ul id="post-list"></ul>
<?php wp_footer(); ?>
</body>
</html>

ボタンには「wp-api-read」、リストには「post-list」とID属性を設定して準備完了。

  1. ボタンをクリックする
  2. Ajax通信する
  3. リストに投稿記事の一覧を出力

この手順で動作するようにJavaScriptを書きます。

JavaScriptAjax通信

あらかじめ読み込んである「wp-api.js」に記述していきます。まずはjQueryで実装する準備と、WordPress側から渡した値のチェック。

(function($) {
    'use strict';

    $(function() {
        console.log(WP_API_Settings);
    });
})(jQuery);

console.log()の出力結果も確認。

Object {root: "http://vccw.dev/wp-json/"}
root: "http://vccw.dev/wp-json/"__proto__: Object

よし、ちゃんと取れてる。それでは、早速、投稿のエンドポイントをコールしてAjax通信をしてみます。

(function($) {
    'use strict';

    $(function() {
        $('#wp-api-read').on('click', function() {
            $.ajax({
                dataType: 'json',
                type: 'GET',
                url: WP_API_Settings.root + 'wp/v2/posts'
            }).then(
                function(data) {
                    console.info(data);
                },
                function() {
                    console.error('Read failed!');
                }
            );
        });
    });
})(jQuery);

とれた!\(^o^)/

consoleで取得が確認できました。APIリファレンス(投稿)に書いてある引数にパラメータで値を渡せば、件数指定やソート、カテゴリ別などフィルタリングできるようです。ボタンを押す度に指定した件数取得してリストに表示するようにJavaScriptを書き足します。

(function($) {
    'use strict';

    $(function() {
        var
            per_page = 5,
            offset   = 0,
            param    = '',
            elem     = '';

        $('#wp-api-read').on('click', function() {
            param  = '?per_page=' + per_page;
            param += '&offset=' + offset;

            $.ajax({
                dataType: 'json',
                type: 'GET',
                url: WP_API_Settings.root + 'wp/v2/posts' + param
            }).then(
                function(data) {
                    console.info(data);
                    data.forEach(function(item) {
                        elem = $(document.createElement('li')).text(item.title.rendered);
                        $('#post-list').append(elem);
                    });
                    offset += per_page;
                },
                function() {
                    console.error('Read failed!');
                }
            );
        });
    });
})(jQuery);

きたきたきたきた!

f:id:miiitaka:20170725181326g:plain

Ajax通信の処理が終わるまでクリックできないようにするなど、他に気を配らなければいけない箇所はありますけどベースはこんな感じでできました。 これを応用して、無限スクロールさせるなら、スクロールが画面の下まで行ったときをトリガーにしてAjax通信に行けばいいし、普通のWordPressの記事を取ってくるなら、DOMContentLoaded時をトリガーにすれば良いわけで。色々試せそう。

まとめ

今回はReadのみでしたけど、当然新規投稿や修正、削除その他もろもろできます。しかしその際には認証が必要なので、この辺りも勉強する必要があるな。セキュリティを気にしたい所。

セキュリティ系のプラグインでWP REST APIを動作しないようにしているものもありますので注意が必要。(現にひっかかった)

WordCampに行くと何かしら新しい発見があるので参加して損なし!次は9月に行われるWordCampTokyo2017に参加だ!(チケット発売になったようです)

2017.tokyo.wordcamp.org