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



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

準備

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

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

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

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

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

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

 

投稿一覧を取得する。

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

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

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

 

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

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

lib/wp.js

index.vueを書き換えます。

pages/index.vue

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

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

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

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

components/posts/PostList.js

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

pages/index.vue

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

そ れ っ ぽ い !

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

気になること

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

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

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

——————

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