Nuxt.js+WP REST APIでブログ記事一覧を表示する

SAGA.TXT > 学習メモ > Nuxt.js > Nuxt.js+WP REST APIでブログ記事一覧を表示する

Nuxt.js+WP REST APIでブログ記事一覧を表示する

2018-07-27

こんな感じで記事一覧を出すところまでやりたいと思います。

準備

前回、Nuxtを使い初めた時は、１からディレクトリ構成を作成しましたが、スターターテンプレートを使った方が、お手軽です。

テンプレートは、vue-cli を使ってインストールするので、入っていない場合はまず、vue-cliをインストールします。

npm install -g vue-cli

1	npm install -g vue-cli

次にいつもの、npm installして、npm run devで起動します。

vue init nuxt-community/starter-template <project-name>
cd <project-name>
npm install
npm run dev

vue init nuxt-community/starter-template <project-name>

cd <project-name>

npm install

npm run dev

Sassを使いたいので、npmで、Webpack のローダーをインストールしておきます。(参考URL)

npm install --save-dev node-sass sass-loader

1	npm install --save-dev node-sass sass-loader

nuxt.config.jsの設定を弄って、グローバルに利用したいSassファイルを指定します。(参考URL)

module.exports = {
　　// 略
  css: ['@/assets/css/style.scss'],
　　// 略
}

module.exports = {

　　// 略

css: ['@/assets/css/style.scss'],

　　// 略

}

ブログ記事をWordPressから取得する際に、axiosを使用したいので、インストールしておきます。

npm install --save axios

1	npm install --save axios

投稿一覧を取得する。

WordPress 4.7以上であれば、デフォルトでREST APIが使えます。

試しに、下記のURLにアクセスしてみます。

http://sagatto.com/wp-json/wp/v2/posts

1	http://sagatto.com/wp-json/wp/v2/posts

jsonで投稿一覧を取得することができました！便利！

早速、WordPress と通信するための専用クラスを作成します。

こういったimport用のファイルをどこに置けば良いかわからなかったので、ひとまず、libという新しいディレクトリを作成し、コードを書きます。

lib/wp.js

import axios from 'axios' //axiosの読み込み

class WpApi {
  // コンストラクタ
  constructor (siteurl) {
    this.apiBase = `${siteurl}/wp-json`
  }

  // 投稿一覧を取得するメソッド。
  posts () {
    return axios.get(`${this.apiBase}/wp/v2/posts`, {
      params: {
        page: 1,
        per_page: 5
      }
    }).then(json => {
      return { posts: json.data }
    }).catch(e => {
      return { error: e }
    })
  }
}

const wp = new WpApi('http://sagatto.com')

export default wp

import axios from 'axios' //axiosの読み込み

class WpApi {

// コンストラクタ

constructor (siteurl) {

this.apiBase = `${siteurl}/wp-json`

}

// 投稿一覧を取得するメソッド。

posts () {

return axios.get(`${this.apiBase}/wp/v2/posts`, {

params: {

page: 1,

per_page: 5

}

}).then(json => {

return { posts: json.data }

}).catch(e => {

return { error: e }

})

}

const wp = new WpApi('http://sagatto.com')

export default wp

index.vueを書き換えます。

pages/index.vue

<template>
 <h1>テスト</h1>
</template>

<script>
import wp from '~/lib/wp'     //【１】さっき作ったwpオブジェクトを読み込む。

export default {
    asyncData ({ params }) {  // ★
        return wp.posts()     //【２】投稿一覧データ。
    },
}
</script>

</template>

import wp from '~/lib/wp' //【１】さっき作ったwpオブジェクトを読み込む。

export default {

asyncData ({ params }) { // ★

return wp.posts() //【２】投稿一覧データ。

}

</script>

★asyncData：Nuxtのdataメソッドの拡張メソッド。コレを使うことで、Vuexストアや、ルーティングのパラメータにアクセスすることができます。

http://localhost::3000へアクセスすると、投稿一覧のデータが取得できていることがわかります。（Chromeの「Vue devtools」を使用してます。）

ここまで、来ればあとはやりたい放題だー！！！

投稿一覧を表示するPostListコンポーネントを作成します。

components/posts/PostList.js

<template>
  <ul class="post-list">
    <li v-for="post in posts" :key="post.id" class="post-card">
        <article>
            <h2 class="subtitle">{{ post.title.rendered }}</h2>
            <div class="info" v-html="post.excerpt.rendered"></div>
        </article>
    </li>
  </ul>
</template>

<script>

export default {
  props: ['posts'],
}
</script>

<style lang="scss">
.post-list{
  padding: 0px;
  list-style: none;
}
.post-card {
  margin  : 10px;
  width   : 150px;
  display : inline-block;
  vertical-align: top;
  > article >.subtitle {
    font-size : 0.9em;
    background-color: #bbdff1;
  }
  > article > .info {
    background-color: #d7f2ff;
  }
  > article > .info > p {
    color     : #999;
    font-size : 0.5em;
  }
}
</style>

<h2 class="subtitle">{{ post.title.rendered }}</h2>

</article>

</li>

</ul>

</template>

export default {

props: ['posts'],

}

</script>

.post-list{

padding: 0px;

list-style: none;

}

.post-card {

margin : 10px;

width : 150px;

display : inline-block;

vertical-align: top;

> article >.subtitle {

font-size : 0.9em;

background-color: #bbdff1;

}

> article > .info {

background-color: #d7f2ff;

}

> article > .info > p {

color : #999;

font-size : 0.5em;

}

</style>

index.vueで読み込みましょう。

pages/index.vue

<template>
<div>
    <PostList :posts="posts" /> <!--【１】propsでpostsデータを渡す -->
</div>
</template>

<script>
import PostList from '~/components/posts/PostList.vue' //【２】PostListコンポーネントを読み込む
import wp from '~/lib/wp'

export default {
    asyncData ({ params }) {
        return wp.posts()
    },
    components: {
        PostList //【３】PostListを子コンポーネントとする
    }
}
</script>

<div>

</div>

</template>

import PostList from '~/components/posts/PostList.vue' //【２】PostListコンポーネントを読み込む

import wp from '~/lib/wp'

export default {

asyncData ({ params }) {

return wp.posts()

components: {

PostList //【３】PostListを子コンポーネントとする

}

</script>

http://localhost::3000へアクセス

そ　れ　っ　ぽ　い　！

基本はわかったので後は、ガシガシ作っていこうかと思います。

気になること

初心者のうちに色々疑問点を上げときます。

WP REST API使えれば、ブログのデータひっぱり放題じゃない？（セキュリティとか、著作権とか・・）
コードの表示とかはWordPressのプラグイン使っているが、CSSとかはどうする？１から作り直したほうが良い？
WP REST APIのリファレンスが変・・。というか、CSSとか壊れてるけど、サポートとか大丈夫なのか？

WordPressのプラグインとの連携はできるのか？というところが特にきになりますね・・・。

——————

この記事がお役に立てたら、是非シェアをお願いします^^

SAGA.TXT

Nuxt.js+WP REST APIでブログ記事一覧を表示する

準備

投稿一覧を取得する。

lib/wp.js

pages/index.vue

components/posts/PostList.js

pages/index.vue

気になること

■さがっと

最近の投稿

アーカイブ