【Vue.js】WP REST APIに触れてみた

HTTPリクエストを送るだけでWordPressの投稿データやタクソノミー等にアクセスできる「WP REST API」というAPIがあります。

公式ドキュメント

バージョン4.7よりも前の場合は別途プラグインをインストールする必要がありましたが、4.7以降はデフォルト搭載となりました！

WP REST APIの簡単な概要

例えば、hoge.comというサイトがあったとして、ルートにWordPressがインストールされていると仮定します。その状況で、以下のようなURLにアクセスしたとしましょう。

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

すると、そのWordPress内の投稿がJSON形式で返ってきます。

カテゴリー情報にアクセスしたい場合は以下のように。

http://hoge.com/wp-json/wp/v2/categories/

後はGETパラメーターを指定していくことにより、自由自在に情報にアクセスすることが出来ます（詳しくは公式ドキュメント）。

コンテンツ一覧へ戻る

Vue.jsで情報にアクセス

一般的に挙げられる手法としてはAjaxがあるかと思いますが、せっかく勉強中なので今回はVue.jsとaxiosというライブラリを使いアクセスしてみたいと思います。

axiosを読み込む

Vue.jsももちろん読み込む必要がありますので、以下のようになりますね。

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

HTML

「記事取得」というボタンが有り、クリックで記事取得が発動しリスト展開されるという想定でやってみます。
以下のようになります。

<div id="test1">
  <button v-on:click="getPosts()">記事取得</button>
  <ul v-for="post in posts">
    <li>
      <a v-bind:href="post.link" target="_blank">
        {{post.title.rendered}}
      </a>
    </li>
  </ul>
</div>

JS

getPostsという「記事取得」ボタンが押下されたタイミングで実行される関数を定義する形ですね。その関数により配列に情報が格納され、HTML側のliでループ表示されるという感じです。
以下のようになります。

new Vue( {
  el: '#test1',
  data: {
    posts: []
  },
  methods: {
    getPosts: function(){
      axios.get( '/wp01/wp-json/wp/v2/posts/' )
      .then( response => {
        this.posts = response.data;
      } )
      .catch( error => {
        window.alert( error );
      } );
    }
  }
} )

今回、「投稿取得」と「カテゴリー取得」でそれぞれサンプルを作ってみました。

投稿取得のサンプル

カテゴリー取得のサンプル

こちらも併せてご確認ください！

コンテンツ一覧へ戻る

はい、というわけでVue.jsを使いWP REST APIに触れてみたという記事でした！これまた発想次第では面白いことができそうです。

ちょっとこのあたりはまた色々サンプルを作ってみて、理解を深めていければと思います！

ふぅー、もう9月終わり頃なのにやっと1記事。。