【WordPress】WP REST APIでカスタム（投稿タイプ・タクソノミー・フィールド）を取得してみた

今回この記事を作成するにあたり「五十音別でカテゴライズされたアーティスト検索ツール」というサンプルを作ってみました。あとの方にサンプルリンクを設けておくので、見てみてください！
（あいうえお順で並び替え等は今回しておりません、悪しからずm(_ _)m）

WordPress側の設定情報としては、以下のような形です。

カスタム投稿タイプ	artist
カスタムタクソノミー	gojuon
カスタムフィールド	url（Wikipediaにリンク）

カスタム投稿タイプ「artist」から記事を取得し、カスタムタクソノミー「gojuon」からア行～ワ行まで取得するという流れになります。

カスタム投稿タイプのリクエスト方法

「artist」というカスタム投稿ですので、リクエスト先は以下のようになります。

http://hoge.com/wp-json/wp/v2/artist

がしかし、まだこの状態ではアクセスをしてもJSONは吐き出されておりません。どうやらカスタム投稿タイプの場合デフォルトは無効のようで、register_post_typeのオプションで指定する必要があります。今回の場合は、以下のような感じですね。

<?php
$args = array(
  'labels'              => $labels,
  'public'              => true,
  // 省略…
  // ▼REST APIに関するオプション
  'show_in_rest'        => true,
  'rest_base'           => 'artist'
  // ▲REST APIに関するオプション
);
register_post_type( 'artist', $args );
?>

show_in_restをtrueにすることにより、REST APIが許可されJSONが吐き出されるようになります。

コンテンツ一覧へ戻る

カスタムタクソノミーのリクエスト方法

「gojuon」というカスタムタクソノミーを設けておりますので、以下のようなリクエスト先でJSONが吐き出されております。

http://hoge.com/wp-json/wp/v2/gojuon

ですが、こちらもカスタム投稿タイプ同様にデフォルトでは許可されていないんですね。register_taxonomyのオプションを指定しましょう。

<?php
$args = array(
  'label'        => $posttype_label.'五十音',
  'public'       => true,
  // 省略…
  // ▼REST APIに関するオプション
  'show_in_rest' => true
  // ▲REST APIに関するオプション
);
register_taxonomy( 'gojuon', 'artist', $args );
?>

カスタム投稿タイプと同じで、show_in_restをtrueにします。これで、ターム一覧（ア行～ワ行まで）も取得可能になりました。

コンテンツ一覧へ戻る

レスポンス内容にカスタムフィールドを追加する

今回「url」というカスタムフィールドを設けましたが、そのままではJSONの内容に含まれておりません。よって、phpでレスポンス内容の追加（修正）をする必要があります。

カスタム投稿タイプ：artistに、カスタムフィールド：urlを追加したい場合は、以下のように記述します。

<?php
add_action( 'rest_api_init', 'slug_register_url' );
function slug_register_url() {
  register_rest_field( 'artist',
    'url',
    array(
      'get_callback'    => 'slug_get_url',
      'update_callback' => null,
      'schema'          => null,
    )
  );
}

/**
 * "url"フィールドの値を取得
 *
 * @param array $object 現在の投稿の詳細データ
 * @param string $field_name フィールド名
 * @param WP_REST_Request $request 現在のリクエスト
 *
 * @return mixed
 */
function slug_get_url( $object, $field_name, $request ) {
  return get_post_meta( $object[ 'id' ], $field_name, true );
}
?>

公式ドキュメントの記述ほぼそのまま引用ですが、このようにするとJSONのレスポンス内容にurlというカスタムフィールドが含まれるようになります。

以上でWordPress側の準備は完了ですね。後は取得して描画というわけですが、今回もVue.jsを使いサンプルを作成しました。

• 五十音でカテゴライズされたサイドメニュー（gojuon）
• アーティスト名で絞り込めるインクリメンタルサーチ
• アーティスト名クリックでWikipediaに飛ぶ（url）

という想定で、サンプルを構築してみました。

サンプルを確認する

コンテンツ一覧へ戻る

以上、今回はWordPress側に目線を置いた内容でした。Vue.js側の記述等に関しては割愛させていただきます。