WP REST APIでの情報の取得と表示・使い道について

2017.05.15

WP REST APIはWordPressで作成したサイトの投稿やデータにアクセス可能になるAPIです。

WordPress 4.7で本格的にプラグインから統合されたREST APIですが、最近利用する機会がありましたので、Tipsをまとめてみました。

今回行ったのはyanooや楽天などのプログラムを動かせない、htmlとjsのみで作成するページと、wordpressサイトでの情報の共有です。

私なんかはphpでwp-load.phpを読み込んで、好きなようにデータを出力して、読み込ませればREST APIとか特ににいらないかなと短絡的に考えてしまうのですが、REST APIはそのようなちょっとしたカスタマイズの話ではなく、ある程度の規模の開発や汎用性が必要になってくると効果を発揮するのではないかと思われます。

それでは具体的にはどのようなメリットがあるのでしょう。

WordPressのあるサーバーとは別の場所（別ドメインのサーバーやスマートフォンのアプリ等）でコンテンツが表示・操作できるようになる。
PHP以外のプログラミング言語でWordPressのデータの取得と操作できるようになる。
また、WordPressの関数を覚えなくても、REST APIさえ理解していれば、フロントエンドは好きな言語で実装できる。
WordPressで何かサービスを作ってAPIを公開する時に仕様で悩まなくてもよくなる。

記事情報を取得するにしても最新10件などと限定されているRSSよりも、全ての情報を取得できるREST APIの方が便利な場合もあります。ネット上にはCMSの6割はWordPressと言われるほどかなりの数のWordPressサイトが立ち上がっています。アイディア次第でREST APIを利用したサービスが出てくることかと思います。

WP REST API の簡単な使い方

WordPress 4.7以上であれば下記のURLにアクセスすれば、jsonでアクセスできるエンドポイント(アクセスするURL)がずらっとでてきます。

  http://example.com/wp-json/wp/v2/

※ http://example.com/ はwordpressのシステムがあるURL(site_url)に置き換えてください

試しにどこか適当なサイトでurlを入れてみましょう。wordpressで一番有名なサイト、wordpress.orgでは

はどうでしょうか。下記のURLをブラウザに入力してみてください。

  https://wordpress.org/wp-json/

以下のような文字がブラウザに表示されるはずです。

{
  name: "WordPress.org",
  description: "Blog Tool and Publishing Platform",
  url: "https://wordpress.org",
  home: "https://wordpress.org",
  gmt_offset: 0,
  timezone_string: "UTC",
  namespaces: [
    "oembed/1.0",
    "wp/v2"
  ],
.......

ちゃんとjsonを返してくれます。

他の情報は次のurlで取得できます。

投稿一覧を取得

/wp-json/wp/v2/posts/

固定ページ一覧を取得

/wp-json/wp/v2/pages

メディア一覧を取得

  /wp-json/wp/v2/posts

また、?args=query_value
をつけると、対象の絞り込みができます。

※ 以前は ?filter[args]=query_value 4.7から仕様が変わったようです。

出力したjsonは下記のように出力されます。

[
  {
    id: 331,
    date: "2016-10-14T17:39:57",
    date_gmt: "2016-10-14T08:39:57",
    guid: {
      rendered: "https://www.sofplant.com/?p=331"
    },
    modified: "2016-10-14T17:39:57",
    modified_gmt: "2016-10-14T08:39:57",
    slug: "php-programing-02-calc-and-conditionals",
    status: "publish",
    type: "post",
    link: "https://www.sofplant.com/blog/tech/php-programing-02-calc-and-conditionals/",
    title: {
     rendered: "演算子、条件文 を利用して占いプログラムを作る | WordPressで始めるPHPプログラミング(2)"
    },
.....
以下省略

それでは実際にWP REST APIを利用して情報を取得してみます。
例えばjqueryのgetJSON関数を利用すると簡単です。こちらのサイトwww.sofplant.comから最新5件の投稿を取ってきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>WP REST APIテストページ</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
      $(function() {
          $.getJSON( "https://www.sofplant.com/wp-json/wp/v2/posts?per_page=5", function(results) {
              $.each(results, function(i, item) {
                 $("ul#mylist").append("<li>" + item.title.rendered + "</li>");
              });
          });
      });
    </script>
  </head>
  <body>
    <h2>お知らせ 最新5件</h2>
    <ul id="mylist">

    </ul>
  </body>
</html>

こちらを適当なサイトで表示させると以下のようになります。

カスタムフィールドで設定した情報を取得

REST APIですが、全ての情報が自由に取れるわけではありません。セキュリティ的な事情でデフォルトではカスタムフィールドや、独自指定したpost typeやtaxonomyを取得できませんので、WordPress側でカスタマイズ（レスポンスを修正する）が必要になります。
下記の例ではカスタムフィールドの’starship’というkeyに設定された値をjsonで返すようになります。

add_action( 'rest_api_init', 'slug_register_starship' );
function slug_register_starship() {
    register_rest_field( 'post',
        'starship',
        array(
            'get_callback'    => 'slug_get_starship',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

function slug_get_starship( $object, $field_name, $request ) {
    return get_post_meta( $object[ 'id' ], $field_name, true );
}

WordPressのようなユーザー管理、コンテンツ管理システムを作ろうとすると、フレームワークを利用したとしても恐ろしく面倒な事になります。さらに、PostType、カスタムフィールドを追加すれば、かなりの要望に応えるシステムが簡単に手に入ります。

膨大な数のプラグインとデザインテーマは資産ではありますが、同時にWordPressが進化するための
足枷とも言えるでしょう。公式が提供する関数の仕様が少し変わっただけで、動かなくなるプラグインやテーマが続出してしまうので、うかつに変えることはできなくなっています。

WP REST APIは膨大な資産と発展性の両立を目指す一つの回答と言えるかもしれません。

技術情報