WordPressのREST APIで独自APIを実装する方法

今回はWordPressのREST APIの独自API実装をやってみます。

実際にどういう事例で独自APIが必要になったのか、実際に実装した例も含めて書いてみたいと思います。

以前、独自APIの万能感が気に入らないって言ったんですが、なぜ独自APIで実装しようと思ったかあたりも軽く書いてみます。興味ない人はすっ飛ばしてください。

このページの目次

1 独自APIが必要になった経緯
2 独自API追加の方法
3 実際の独自API実装例

独自APIが必要になった経緯

WordPressとNuxt.jsの共存サイトを作ろうとしたからです。

基本的にはWordPressで作られたサイトで、JavaScriptでデータ処理をしたいページは一部Nuxt.jsで作る、というものです。

この時に、メインをWordPressにするのかNuxt.jsにするのか、とか、Nuxt.jsとの共存のさせ方をかなり悩んだんですが、それはまた別の機会にまとめるとして、以下、WordPressメイン＋一部Nuxt.jsを作るものとして書きます。

希望していた共存のさせ方

既に稼動しているので実例を見てもらいましょう。

まずWordPressで動いているページ。

次にNuxt.jsで動いているページ。

こんな感じでどちらのシステムで動いていても、ヘッダ、フッタ、サイドバーを共通にしたかったんですね。

WordPress側から持ってこないといけないデータ

制作したサイトはこのサイトと同様で、サイドバーに次の3つの要素があります。

最近の投稿5件
カテゴリ一覧
人気の投稿5件

これらはそれぞれ、次のAPIで取得できます。

記事APIを日付でソート
カテゴリAPI
記事APIをカスタムフィールドでソート

つまり、データの内容が小さいのに、3回もAPIを叩かないといけないんです。

これをページ開く度にやるのは非効率極まりないと考えたため、独自APIで1個にまとめてやろうというのが今回の趣旨です。

独自APIがお手軽だから選んだのではなくて、既存のAPIで出来ないから独自APIでやろうってことです。

独自API追加の方法

WordPress公式を参考にしました。

英語だし、CSSが効いてないし、読みやすいとは言いづらいんですが、内容はとてもシンプルなので大丈夫。

まずは独自APIを登録

アクションフックで「register_rest_route」を「rest_api_init」に登録↓します。


<?php
add_action('rest_api_init', function () {
  register_rest_route('myplugin/v1', '/author', array(
    'methods' => 'GET',
    'callback' => 'my_awesome_func',
  ));
});

このうち、自分でカスタマイズしなければならないのが、赤字にした3点↓です。他は固定。


<?php
add_action('rest_api_init', function () {
  register_rest_route('myplugin/v1', '/author', array(
    'methods' => 'GET',
    'callback' => 'my_awesome_func',
  ));
});

「myplugin/v1」と「/author」の2つはアクセスするAPIのURLを決める部分です。この例だとURLは「https://dev.ore-shika.com/wp-json/ myplugin/v1 /author/」になります。

独自APIの記事を見ていると「v1」とバージョンを表していそうな文字列がたいてい入っていて、WordPressが生成するAPIにも入っています。今回実装するのは自分が使うだけのしょぼいやつなので

バージョン管理なんていらんのやけど…。

と「myplugin」だけで登録してみましたが普通に動きました。

つまり、自分が追加したAPIであることを明示する識別子をXXXXXXXXX、そのうちのどういうAPIかを決めるキー(記事とか著者とか)をYYYYYYYYYとすると、こんな↓感じになります。


<?php
add_action('rest_api_init', function () {
  register_rest_route('XXXXXXXXX', '/YYYYYYYYY', array(
    'methods' => 'GET',
    'callback' => 'my_awesome_func',
  ));
});

「my_awesome_func」はAPIが返す値を決める関数の名前です。自分で実装するので名前はなんでもOKです。

つか、アクションフックの時にこうやって無名関数を使う書き方、スマートですね。

いつも名前を考えるのがめんどくさいんです。

APIが返す値を決める関数(コールバック関数)

正式にはコールバック関数と呼ぶそうです。僕はまともにプログラムを勉強したことがないのでコールバックという呼び方がどうもピンと来なくて、今回は「APIが返す値を決める関数」としました。

形はとてもシンプルで、APIのパラメータを引数「$data」で受け取って、連想配列にして返すだけ。


<?php
function my_awesome_func( $data ) {
  $result = [];
  
  //返す値を計算
  
  return $result;
}

APIってJSON形式だと思うんで連想配列で使っていますが、公式のサンプルでは単体の変数(文字列)を返していたので、それでもいけるっぽい。

連想配列の場合は、特に意識しなくても思った通りにJSON化してくれます。キーなしの配列はただの配列に、キー有りの配列はオブジェクトに変換されます。

実際の独自API実装例

出来上がったAPIはこんな↓感じです。

https://ore-game.com/imsaga-ec/wp-json/myapi/sidebar/

中身を成形するとこんな↓感じ。


{
  "recent": [
    {
      "title": "(記事タイトル)",
      "url": "(記事URL)",
      "img": "(記事サムネイルURL)"
    },
    ...
  ],
  "cats": [
    {
      "name": "(カテゴリ名)",
      "url": "(カテゴリURL)",
      "count": (カテゴリの記事数)
    },
    ...
  ],
  "popular": [
    {
      "title": "(記事タイトル)",
      "url": "(記事URL)",
      "img": "(記事サムネイルURL)"
    },
    ...
  ]
}

「recent」は「最近の投稿」で、要素は記事の配列で、記事タイトル・URL・サムネURLの3点を持たせています。

「cats」は「カテゴリ一覧」で、子要素は名前・URL・記事数を持たせています。

「popular」は「人気の投稿」で、構造は「recent」と同様。

出力部分の関数はこんな↓感じ。


function myapi_sidebar_func( $data ) {
  $result = [];
  
  $result['recent'] = get_recent_api();
  $result['cats'] = get_cats_api();
  $result['popular'] = get_popular_api();
  
  return $result;
}

それぞれの関数の中身は独自APIというよりはWordPressの問題だと思うので今回は割愛します。