Nuxt.js + WordPressの連携 その1

今回はJavaScriptのフレームワークであるNuxt.jsとCMS(コンテンツマネージメントシステム)であるWordPressが連携できると聞いて、「これはモダンな環境開発ができる！」と安易な目的に胸を踊らせ連携してやろうと思い、奮い立ちました。

シリーズとして、全４回の更新を予定しています。挫折したら挫折したという事実をアップします。
出来るだけ挫折しないように要領良く習得してみせます！

Nuxt.js + WordPressの連携とは？

連携とはどういうことかと言うと、フロント部分をNuxt.jsで管理して、管理画面やバックエンド部分をWordPressで管理していきます。

そもそも連携しようと思ったのは、function.phpでフロント側のmetaの設定するのがどうしても苦手というか面倒というかダルいというかHTMLっぽくないというか。head内の設定をPHPで書くのがしっくり来ていなかった。

あとフロントと管理画面とDBと分けると表示速度速くなるのかなという期待と自分の中で曖昧になっていたフロント側でやるべき処理とバックエンド側でやるべき処理をしっかり線引きしたかったので、分けてみた次第です。

Nuxt.jsにした理由

Vue.jsよりもしっくりきた。（個人的な意見であり、自分とフレームワークの相性。）
インストールすれば、だいたい揃っている。ありがたい。

WordPressにした理由

WordPressのシェアが世界で1/3程度であり、また案件をいただくクライアントでも更新を目的としてWordPressで構築することが要件として入ってくることが多いです。

そもそも管理画面が簡単に用意できるし、管理画面を作成するには予算も時間も必要になるので、予算等に限りがあるのであれば出来上がってるものを使えばいいかと思います。

また、案件をいただくクライアントも元々使ってたりしてて、そのままWordPress使いますってところが多くて導入しやすいです。

Nuxt.jsとの連携でWordPressのREST APIを使いますが、WordPressのバージョン4.7以降は特に設定を変更することなくREST APIが使えます。
それ以前のバージョンのWordPressは設定が必要になります。

example.comの場合は下記のURLでJSON形式で取得できます。

https://example.com/wp-json/wp/v2/posts

「posts」の場合は投稿データを取得することができます。
「posts」の部分を「pages」に変えると固定ページのデータを取得できます。

上記でもデータを取得できますが、カスタムフィールドを使ったり管理画面を色々カスタマイズすると取得するのが困難になります。

そこでカスタムフィールド等を取得する場合は自分でエンドポイントを作成する方法が手っ取り早いです。

functions.phpでエンドポイントを登録

function add_endpoint() {
	register_rest_route( 'custom/v0', '/seminar', array(
		'methods' => WP_REST_SERVER::READABLE,
		'callback' => 'seminar_data'
	));
}
add_action('rest_api_init', 'add_endpoint');

エンドポイントを登録する為にrest_api_initというアクションフックでregister_rest_route関数を使い設定していきます。
register_rest_routeの第一引数にはネームスペース、第二引数にはベースURLを設定します。どちらもエンドポイントのURLに使用します。

https://example.com/wp-json/custom/v0/seminar

オプションは、methodはWP_REST_SERVER::READABLE（GET）、callbackには後ほど出てくる関数のseminar_dataの名前を指定します。

function seminar_data() {
   $seminar_list = array();
   $args = array(
       'post_type' => 'seminar',
       'posts_per_page' => -1,
       'order' => 'DESC'
   );
    $wp_query = new WP_Query( $args );
    if($wp_query->have_posts()):
        while ( $wp_query->have_posts() ) : $wp_query->the_post();
               global $post;
               // 取得したいデータ「タイトル」や「投稿日」や「カスタムフィールド」等
               'id' => $post->ID,
               'title' => wp_strip_all_tags($post->post_title),
        endwhile;
    endif;
    return $seminar_list;
}

seminar_dataにはpost typeや記事数など取得する内容の設定をしていきます。ここら辺は自分に合ったやり方でやればいいと思います。
多分もっといいやり方があると思います。「global $post;」なんてことしなくてもね。。。

WordPressでの設定は基本的に終わりです。
エンドポイントの設定とAPIの取得するデータの記述を分けることも可能です。

まだまだ理解が追いついてない部分もあるので、もっといい方法あれば教えてください。

次回はNuxt.jsでREST APIからデータを取得して表示するまでの流れを書いていきたいと思います。