【WP REST API】PHPを一切使わずに投稿一覧を作ってみる


エンジニアの関です。
4月でいよいよ社会人3年目です。最近、時代の流れの速さに怯えています。
私は普段WordPressで開発をしているのですが、よくこんな言葉を耳にします。

「PHPの知識がないからカスタムができない」

WordPressには初心者でも使いやすいようにプラグインやテーマなどを数多く取り揃えているのですが、自由にカスタムしたいとなると、やはりPHPの知識が必要になってきます。
そこで今回は、PHPを一切使わずにWordPressから動的にデータを取得・表示する方法をご紹介したいと思います。

制作物は以下に置いてありますのでよかったらどうぞ。
https://github.com/hseki-luckey/getposts_rest-api

はじめに

今回は「WP REST API」を使用していきます。
これは4.7系から標準で使えるようになった機能で、WordPress界隈では今アツいとされています。
要はアクセスするだけで投稿の取得から編集・削除などが出来ちゃう超便利な機能です。

お使いのWordPressでサポートされているかは、以下のURIにアクセスして確認してみてください。
/wp-json/wp/v2/

サポートされている場合、こんな画面が表示されるはずです。
見て分かる通りデータが全てjson形式で返ってきます。

実際に作ってみる

今回の目標

今回は投稿の一覧ページを作っていきたいと思います。仕様は以下の通りです。

  • 投稿日が最新の記事から5件取得
  • ステータスは「公開済み」
  • 「タイトル」「著者」「公開日」「概要(100文字程度)」「カテゴリ」を表示
  • 「カテゴリ」には各カテゴリ一覧へのリンクを付ける

うまくいくとこんな画面が表示されます。

実装方法

表題でも挙げている通り今回はPHPを一切使いません。
(断固とした気持ちを表すべく、ファイル形式も「.php」ではなく「.html」にしてみました。)
基本的にはWP REST APIを使ってデータを取得し、JQueryで解析・表示を行っていきます。

ただ、非同期通信だとデータを完全に取得する前に入れ子になっている次のデータを取得しようとしてしまい、上手くデータを取得・表示できなくなってしまうため(泣く泣く)同期通信にしています。

1.投稿情報を取得

投稿を取得するためのURIは以下の通りです。
/wp-json/wp/v2/posts/

さらに取得したい情報に合わせて、以下のようなパラメータをつけてあげます。

  • per_page=5・・・5件取得
  • status=publish・・・ステータスが「公開済み」のみ
  • orderby=date・・・日付順に取得
  • order=desc・・・降順

他のパラメータも含めて詳しくはこことか見てみると幸せになれると思います。

2.著者情報を取得

上記で取得したものの中に、こんなjsonが入っているはずです。

"_links": {
    "author": [{
        "embeddable": true, 
        "href": "サイトURL/wp-json/wp/v2/users/1"
    }]
}

「”href”: “サイトURL/wp-json/wp/v2/users/1″」は著者情報を取得するのに必要なURLを表しているので、これを使っていきましょう。
(※ユーザ情報は基本的には「/wp-josn/wp/v2/users/ユーザID」で取得できます。)

3.カテゴリ情報を取得

カテゴリ情報を取得するためのURIは以下の通りです。
/wp-json/wp/v2/categories/カテゴリID

上記の通り記事に付けられているカテゴリIDが必要になるのですが、1で取得したものの中に以下のようなjsonが含まれているはずなのでそれを使っていきましょう。
(※カテゴリIDで値が返ってきています。)

"categories": [17, 1]

4.JQueryでjsonを取得

以下とか参照してみてください。基本的には取得は「$.getJSON」を使っています。
http://qiita.com/miiitaka/items/f77cb83b9dfcd05aea82

で、最終的に出来たものは、コチラです。
https://github.com/hseki-luckey/getposts_rest-api/blob/master/getposts-ver2.html

おわりに

他サイトとの連携やAjaxでのやり取りなどでWP REST APIはまだまだ活用できそうだと思いました。
「余計な設定なし」というところが気に入ったので、機会があればもっと使ってみたいです。
(ただ次使うとしたらJQueryではなくPHPでだろうな・・・。)

最後に、WP REST APIを使用されない場合は以下のようなコードをfunctions.phpに追加・停止してしまうことを推奨します。
(そういえば少し前に「WordPress史上最悪のバグ」として有名になりましたね・・・orz)
使用される場合も使用範囲を狭めるなど十分な対策が必要です。

// REST APIにアクセスすると403エラーを返す
function not_allow_access_in_rest_access($access){
    return new WP_Error(
      'rest_cannot_access',
      __('Can not access the REST API.', 'disable-json-api'),
      array('status' => rest_authorization_required_code())
    );
}
add_filter('rest_authentication_errors', 'not_allow_access_in_rest_access');

リスクを踏まえて正しく使えば超便利な機能です。
ぜひ快適なREST APIライフを!

☆.。:・★.。:・☆.。:☆.。:・★.。:・☆.。:・★.。:・☆☆.。:・★.。:・☆.。:☆.。:・★.。:*・☆☆

株式会社リンクバルでは一緒に働くエンジニアを募集中です!
気になった方はコチラまで!

☆.。:・★.。:・☆.。:☆.。:・★.。:・☆.。:・★.。:・☆☆.。:・★.。:・☆.。:☆.。:・★.。:*・☆☆