WordPressをバックエンドAPIにする場合、WordPress REST APIで簡単に記事を取得できますが、
Nuxt.jsなどで実際にWEBサイトとして構築する場合、どうすればよいか調べていたら
NuePressというNuxt、WordPress REST APIを使ったサンプルがgithubにあったので試してみました。
NuePressで作成されたサイトはhttps://nuepress.kmr.io/になります。

それではローカルでNuePressを試してみます。
git、npmはあらかじめインストールしてください。

まず普通にWordpressをインストールします。

WordPressとは別のディレクトリにリポジトリをクローンします。

git clone https://github.com/krestaino/nuepress.git

npm installします。

npm install

npm run devするとNode.jsサーバが立ち上がり、localhost:3000でサイトを見ることができます。

npm run dev

npm installをした際に.envが作成されます。
確認しますとhttps://wp.kmr.io/wp-jsonから情報を取得しているのでWORDPRESS_API_URLに作成したWordpressのURLを指定します。
定数にFEATURED_CATEGORY_IDとありますが、これはコンポーネントで使用されている定数で最新記事一覧から除外してトップページで目立たせるためのカテゴリーを指定しています。

WORDPRESS_API_URL=http://localhost/wordpress/wp-json
FEATURED_CATEGORY_ID=1

リポジトリの中にWordpressのテーマが入っているので作成したWordpressに入れてテーマを有効にします。

WordPressの記事とページはコンポーネントのArticleAndPage.vueを使用しています。
とりあえず、記事のタイトルとコンテンツを表示させてみたいので以下のように更新しました。

<template>
  <article class="single">
  <h1 class="title" v-html="data.title.rendered"></h1>
  <div class="content" v-html="data.content.rendered"></div>
  </article>
</template>

<script>
export default {
  props: {
    data: Object
  },
};
</script>

記事の取得はpage/_article.vueに書かれています。

<template>
  <Article :data="article" type="article" />
</template>

<script>
import Article from '~/components/ArticleAndPage.vue';

export default {
  async asyncData({ app, store, params }) {
    const { data } = await app.$axios.get(`${process.env.WORDPRESS_API_URL}/wp/v2/posts`, {
      params: {
        slug: params.article,
        _embed: true
      }
    });
    return { article: data[0] };
  },

  components: {
    Article
  }
};
</script>

ページの取得も同様にpage/_page.vueに書かれています。

<template>
  <Page :data="page" type="page" />
</template>

<script>
import Page from '~/components/ArticleAndPage.vue';

export default {
  async asyncData({ app, store, params }) {
    const { data } = await app.$axios.get(`${process.env.WORDPRESS_API_URL}/wp/v2/pages`, {
      params: {
        slug: params.page,
        _embed: true
      }
    });
    return { page: data[0] };
  },

  components: {
    Page
  }
};
</script>

以上、NuePressを使うことで簡単にNuxt、WordPress REST APIを使ったサイトを動かすことができましたが、カスタマイズを行う場合はNuxt、Vuexに関する知識が必要でしょう。
今後、このようなJAMstackと呼ばれる手法が主流になるのかどうか私にはわかりませんが、多くのサイトで採用され始めているのも事実です。
WEBサイト構築の動向を見極め学ぶべき技術を選定していきたいと思います。

阿部