WP REST API でアドバンストカスタムフィールドの値を取得する

前回、Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する方法のご紹介をしましたが、アドバンストカスタムフィールド（Advanced Custom Fields）のカスタムフィールドの値は通常 WP REST API を使っても取得できません。
そこで、プラグインをインストールしてアドバンストカスタムフィールドのカスタムフィールド値を取得できるようにします。

ACF to REST API

この ACF to REST API というプラグインをインストールしましょう。

インストールが完了したら、「Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する」と同様のやり方で Vue.js CDN参照の宣言をします。
　
それでは、https://sample.com の 特定の記事のアドバンストカスタムフィールドのカスタムフィールド：custom_text1, custom_text2 の値を取得して表示してみましょう。

Vue.js CDN参照宣言の真下にjavascript文を次のように記述します。

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

テンプレートPHPの記述は以下。

<div id="app">
  <p>{{ acf.custom_text1 }}</p>
  <p>{{ acf.custom_text2 }}</p>
</div>

以上、WP REST API で他サイトのアドバンストカスタムフィールドのカスタムフィールド値を取得して、自サイトに表示する方法のご紹介でした。