WordPressのREST APIをカスタマイズしてヘッドレスCMSとして利用する方法を解説します。ただ今は「WP GraphQL」というプラグインを利用してGraphQLを生やす方が簡単で便利だと思うので、今後使うことはなさそうです。

functions.phpでカスタムエンドポイントを設定する

functions.phpで独自のエンドポイントを登録する

今回は/wp-json/wp/v2/toppageにオリジナルのエンドポイントを作成します。

function my_custom_rest_top() {
  //第1引数:ネームスペース  第2:URLの末尾 第3:エンドポイントのオプション
  register_rest_route('wp/v2', 'toppage', array(
      'methods' => WP_REST_SERVER::READABLE, //GETだけ許可
      'callback' => 'my_toppage'
  ));
}
add_action('rest_api_init', 'my_custom_rest_top');

register_rest_routeの第1引数は’wp/v2’で第2引数に独自エンドポイントのURLの末尾にくる文字を設定してください。今回はトップページに使うのでtoppageにしました。

第3引数はエンドポイントのオプションになります。methodsではgetだけを許可すれば良いので WP_REST_SERVER::READABLEを設定します。
callbackでは下に書くデータを返す関数名を入れます。

登録したカスタムエンドポイントにデータのレスポンスを返す

functions.phpの続きに登録した独自のエンドポイントにデータを入れていく関数を書きます。

今回は①最新の投稿5件、②カルーセルに表示される投稿5件(topのタグを設定)③サイドバーに表示される投稿5件(sideのタグを設定)の3種類を1つのエンドポイントにまとめます。

function my_toppage() {
  $my_query = new WP_Query(array(
      'post_type' => 'post',
      'posts_per_page' => 5,
  ));
  $my_query_results = array();
  while($my_query->have_posts()) {
      $my_query->the_post();
      $category = get_the_category();
      $catname = $category[0]->cat_name;
      array_push($my_query_results, array(
          'id' => get_the_id(),
          'title' => get_the_title(),
          'date' => get_the_date(),
          'category' => $catname,
          'excerpt' => get_the_excerpt(),
          'thumbnail' => get_the_post_thumbnail_url(0, 'full'),
          'slug' => get_post()->post_name
      ));
  }

  $top_query = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'tag' => 'top',
  ));
  $top_query_results = array();
  while($top_query->have_posts()) {
      $top_query->the_post();
      $category = get_the_category();
      $catname = $category[0]->cat_name;
      array_push($top_query_results, array(
          'id' => get_the_id(),
          'title' => get_the_title(),
          'date' => get_the_date(),
          'category' => $catname,
          'excerpt' => get_the_excerpt(),
          'thumbnail' => get_the_post_thumbnail_url(0, 'full'),
          'slug' => get_post()->post_name
      ));
  }

  $side_query = new WP_Query(array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'tag' => 'side',
  ));
  $side_query_results = array();
  while($side_query->have_posts()) {
      $side_query->the_post();
      $category = get_the_category();
      $catname = $category[0]->cat_name;
      array_push($side_query_results, array(
          'id' => get_the_id(),
          'title' => get_the_title(),
          'date' => get_the_date(),
          'category' => $catname,
          'excerpt' => get_the_excerpt(),
          'thumbnail' => get_the_post_thumbnail_url(0, 'full'),
          'slug' => get_post()->post_name
      ));
  }

  
  $all_results = array(
    $my_query_results,
    $top_query_results,
    $side_query_results
  );
  return $all_results;
}

それぞれのデータを返して配列にまとめてしまいます。例では①〜③を順番に入れています。それぞれ違うのはタグの絞り込みくらいだったのでほとんど同じになりました。

まとめ

それぞれのAPIにアクセスしてたときとはデータの構造が変わるのでaxiosのデータの取得のところの処理を書き換えたら完了です。

最近はもっぱら「WP GraphQL」を利用しています。GraphQLいいですね。WPでもREST APIの設定をして利用するより簡単で便利です。