About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

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

【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.jsaxiosというライブラリを使いアクセスしてみたいと思います。

    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記事。。

    コメント一覧

    • hori

      【Wordpress】【axios】そして【WP REST API】私がやりたかったことがそのまま記事になっていて大変に参考になりました。ありがとうございます。
      私はvue.jsについてそんなに詳しくないので一点教えてください。
      現在ボタンを押すと一覧表示がレンダリングされる形式ですが、
      読み込みと同時に一覧表示がレンダリングされるようにするにはどうすればよいのでしょうか。vueでcreated設定にすればよいのでしょうかね。

      コメント返信

      • yuki

        hori 様

        コメントいただきありがとうございます。
        また、コメントに対する返信が遅れてしまい、大変申し訳ありません。

        >読み込みと同時に一覧表示がレンダリングされるようにするにはどうすればよいのでしょうか。vueでcreated設定にすればよいのでしょうかね。
        そうですね、hori様の仰る通り、methods:に関数を設けるという形ではなく、created:内に直接記述することにより、
        読み込みと同時に表示されるようになるかと思います。
        (というか、恐らくもう解決されちゃってますよね…。。)

        記事が参考になられたとの事、大変励みになります!
        また何かありましたらコメントいただければと思います。

        コメント返信

    コメントする

    トップへ戻る