Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する

Vue.js は2014年にリリースされたjavascriptフレームワークです。
当サイトはWordPress関連のカスタマイズの内容を検索して来てくれるユーザーが多いので、このページで Vue.js の説明は不要かと思うので省略しますが、まあとにかくjavascriptを使ってリアクティブシステムを作れるフレームワークとして、とても人気があります。
　
それからもうひとつ、WP REST API というのがあります。
こちらも機能の概要については省略します。
概要を知りたいという方は下の記事に簡単な概要の説明がありますので、こちらへ。
WP REST API で記事やユーザー情報を取得できないようにする
　
さて、今回は、この Vue.js と WP REST API を使って、WordPressで作られている他サイトの投稿データを自サイトに表示する方法のご紹介をします。

まず、Vue.js を読み込みます。
テーマの footer.php に次のように記述します。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

すべてのhtml読み込みが終わってからVue.jsを読み込む必要があるので、footer部のhtmlの記述が終わった後の場所に書きましょう。
2つ目の axios というのはAPIからデータを取得したり送信したりするためのHTTPクライアントです。
単純に、APIを使うために必要、と思ってください。

さて、上のように Vue.js 関係のCDN参照宣言ができたら、そのまま続けて footer.php に次のように記述します。

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            posts: []
        },
        created() {
            axios.get('https://sample.com/wp-json/wp/v2/posts/').then(response => {
                this.posts= response.data;
            })
        },
    });
</script>

これで、https://sample.com の記事データをすべて取得できました。
あとは、取得した記事データを表示する処理を、表示したいページのテンプレートPHPに記述すれば完成です。

<div id="app">
  <div v-for="post in posts">
    <h3>{{ post.title.rendered }}</h3>
    <div v-html = "post.content.rendered"></div>
  </div>
</div>

※ 「id=”app”」の部分は、scriptに書いた「el: “#app”」と合わせましょう。
※　v-html は取得したデータをhtmlとしてはめ込みますので、XSS脆弱性を考えて、信頼できるサイトからのデータ取得だけにするようにしましょう。
　
これで表示したいページに https://sample.com の記事のタイトル＆コンテンツのセットが記事数分表示されるはずです。
　
　
なお全記事でなく、特定の記事だけ取得したい場合は、「記事ID」を指定してあげればできます。

<script>
    var vue = new Vue({
        el: "#app",
        data: {
            posts: []
        },
        created() {
            axios.get('https://sample.com/wp-json/wp/v2/posts/記事ID').then(response => {
                this.posts= response.data;
            })
        },
    });
</script>

もちろん1記事だけ取得なら、テンプレート側の記述のfor文でまわす処理のところはなくなりますね。

<div id="app">
  <div>
    <h3>{{ posts.title.rendered }}</h3>
    <div v-html = "posts.content.rendered"></div>
  </div>
</div>

こんな感じです。

---