Cntlog

Nuxt.jsで簡単にWordPressのREST APIを実装する方法

フロントエンド

投稿日

脱WordPressを本格化しようと思っているのですが、なんだかんだでWordPressは便利なので、使いたいと思うときはしばしばあります。

特にブログやカテゴリー、タグなどが必要なサイトの場合はWordPressで実装すると楽なときが結構あります。
しかし、そのためにnuxt.jsをやめて、phpで動くサーバーを用意してWordPressに切り替えるのはナンセンスだと思っています。

どうすれば良いかというとWordPressを立てたときに使えるREST APIをNuxt.js側で呼び出してそれを表示するようにします。

WordPressのREST API を扱うには

REST API とはRESTと呼ばれる設計原則に従って作られたものです。
外部から読み出し、利用するためのプログラムで呼び出し規約(API)の種類の一つです。

WordPressでもバージョン4.7以降をインストールするとREST APIが自動で発行されます。
APIの仕様についてはドキュメントにまとまっています。

APIの取得の方法としては至ってシンプルで、{ドメイン名}/wp-json/wp/v2/にアクセスするだけで返ってきます。
たとえばこのブログの場合ですと https://api-blog.cntlog.net/wordpress/wp-json/wp/v2/です

このようにURLを叩くだけで、APIを取得できます。
上記のURLはただの例でして、他にも特定のcategoryの投稿や特定のpageなど叩くURLによって返ってくる情報は変わってきます。

このように、Nuxt.js側でどのpageにアクセスしたら、どのAPIを叩くかを指定することで必要な情報をnuxt.js側で取得・表示できるようになります。

nuxt.jsで簡単にWordPressのRESTAPIを扱う方法

フロント側（JavaScript）でWordPressを楽に扱うために、node-wpapi があります。

これは先程紹介したURLではなく、wp.posts().id( 1 )のような書き方で、直感的にWordPressのRESTAPIを扱えるようになります。

そのまま、node-wpapi を使っても良いのですが、Nuxt.js側で使うにも色々設定をしないといけないのですが、wp-nuxt というものを使えばnuxt.config.jsに少し書き加えるだけで、node-wpapi を使えるようになります。

wp-nuxtの使い方

まずは npm（またはyarn）でインストールします。
$ npm i wp-nuxt

その後nuxt.config.jsに設定をします。

{
  modules: [
    ['wp-nuxt', {
      endpoint: 'https://{対象のサイトのドメイン}/wp-json'
    }],
 ]
}

これだけで設定は完了です。

node-wpapiでできること

node-wpapiでは下記のAPIの情報を簡単に取得できます。

投稿（posts）

  • wp.posts()：投稿を取得する（デフォルトのクエリ）
  • wp.posts().id( n )：ID nの投稿を取得
  • wp.posts().id( n ).revisions()：ID nの投稿のリビジョンを取得します
  • wp.posts().id( n ).revisions( rn )：ID nの投稿のリビジョン rnを取得します

ページ（pages）

  • wp.pages()：ページアイテムを取得する
  • wp.pages().id( n )：数値ID nのページを取得
  • wp.pages().path( 'path/str' )：ルート相対URLパスでページを取得 path/str
  • wp.pages().id( n ).revisions()：ID nのページのリビジョンを取得します
  • wp.pages().id( n ).revisions( rn )：ID nのページのリビジョンrnを取得します

コメント（comments）

wp.comments()：すべてのパブリックコメントを取得する
wp.comments().id( n )：ID nのコメントを取得

タクソノミー（taxonomies）

wp.taxonomies()：登録されているすべての分類法を取得する
wp.taxonomies().taxonomy( 'taxonomy_name' )：タクソノミーの名前で特定の分類オブジェクトを取得

カテゴリー（categories）

  • wp.categories()：登録されているすべてのカテゴリを取得する
  • wp.categories().id( n )：ID nの特定のカテゴリオブジェクトを取得します

タグ（tags）

wp.tags()：すべての登録済みタグを取得
wp.tags().id( n )：ID nの特定のタグオブジェクトを取得します

カスタム タクソノミー ターム（custom taxonomy terms）

  • registerRoute()：ルーティングして、カスタム タクソノミー タームを照会します

カスタム投稿タイプ（types）

  • wp.types()：登録されているすべての公開の投稿タイプを取得します
  • wp.types().type( 'cpt_name' )：cpt_nameという名前のカスタム投稿タイプのオブジェクトを取得します

ステータス（statuses）

  • wp.statuses()：登録済みのすべての公開投稿ステータスを取得します（クエリが認証されている場合-認証されていない場合は「公開済み」と表示されます）
  • wp.statuses().status( 'slug' )：slug slugを使用してステータスのオブジェクトを取得します

ユーザー（users）

  • wp.users()：ユーザーのコレクションを取得します（リクエストが認証されない場合、公開されたコンテンツを持つユーザーのみを表示します）
  • wp.users().id( n )：ID nのユーザーを取得します（そのユーザーがブログ内で公開された著者である場合、認証を必要としません）
  • wp.users().me()：認証されたユーザーのレコードを取得します

メディア（media）

  • wp.media()：メディアオブジェクト（添付ファイル）のコレクションを取得します
  • wp.media().id( n )：ID nのメディアオブジェクトを取得します

設定（settings）

  • wp.settings()：1つまたは複数のサイト設定を取得または更新します

他にも色々できるのですさらに興味のあるかたはドキュメントを御覧ください。

wp-nuxtを使う理由

はじめ、nuxt.jsでWordPressのREST APIを使うためのテンプレートを作ろうとしていたのですが、そうすると汎用性が下がったり、急にRESTAPIが必要になったときに実装するのが面倒だなと感じていました。

しかしwp-nuxtを使えば数行の設定で、WordPressのREST APIを使えるようになり、かつnode-wpapiで簡単に扱えるので、導入コストが極端に下がることになりました。

またテンプレートではないので必要最小限の実装で案件に導入できるので、不要なコードも基本ないですし、案件に合わせた設計で導入できるので運用に不自然さもなくなり長く使えるノウハウになると思い、wp-nuxtでの開発を決定しました。

最後に

実はまだ、wp-nuxtで作っているサイトは途中なので、いずれgithubに公開すると思います。
ご興味がある方はしばらくお待ち下さい(ゝω・)

カテゴリ:フロントエンドの記事