BLOG
ブログ

2020.11.09

NuePressで簡単にNuxt、WordPress REST APIを動かす

WordPressをバックエンドAPIにする場合、WordPress REST APIで簡単に記事を取得できますが、
Nuxt.jsなどで実際にWEBサイトとして構築する場合、どうすればよいか調べていたら
NuePressというNuxtWordPress 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サイト構築の動向を見極め学ぶべき技術を選定していきたいと思います。

阿部

2020年11月25日

【わかりやすい文章・書き方講座(2) 「型」にはまろう!】

TOPICS,クリエイティブ・ラボ

2020年11月16日

これでもう迷わない?WEBサイト制作時の手順

TOPICS,クリエイティブ・ラボ

2020年11月9日

【recruit】21卒 内定者が決まりました!!

news,TOPICS

2020年11月9日

NuePressで簡単にNuxt、WordPress REST APIを動かす

TOPICS,クリエイティブ・ラボ

2020年11月4日

動画広告のメリットとオススメの活用方法について

クリエイティブ・ラボ

2020年10月25日

【競合が多い業界こそ必見!】SNSを上手く活用した集客成功事例

TOPICS,クリエイティブ・ラボ

2020年10月20日

【Web広告 初心者講座】ディスプレイ広告の表示面と配信種類+お手軽/動画広告プラン始動のお知らせ

TOPICS,クリエイティブ・ラボ

2020年10月12日

【ブランディングを支えるヒアリング】効果のあるWebサイトとは?

TOPICS,クリエイティブ・ラボ

2020年10月7日

【わかりやすい文章・書き方講座(1)】そもそも、「わかりやすい」ってなんだろう?

TOPICS,クリエイティブ・ラボ

2020年9月29日

Magento(マジェント)導入を検討している人へ!マジェントの基礎知識をご紹介!

TOPICS,クリエイティブ・ラボ

2020年9月23日

WEBエンジニアと一緒に学ぶマーケティング(環境分析とSTP分析)

TOPICS,クリエイティブ・ラボ

CONTACT

下記のフォームに必要事項を記入してください。※お問い合わせの際には個人情報保護方針のご確認をお願い致します。

会社名
お名前必須
ご住所
郵便番号
都道府県
市区町村
町名番地等
建物名
お電話番号必須
- -
メールアドレス必須
お問い合わせ内容必須
メッセージ