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

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

ACF to REST API

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

インストールが完了したら、管理画面の［設定］－［パーマリンク］を開き、「ACF to REST API」の「Request Version」で「V2」を設定します。

そして、同様のやり方で 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 で他サイトのアドバンストカスタムフィールドのカスタムフィールド値を取得して、自サイトに表示する方法のご紹介でした。

関連記事:

Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する 管理画面を使わず、Vue.js と WP REST API を使って、Webページから直接記事データ等を更新する WordPress製 売上管理システム （専用テーマ販売）の事例 WordPressカスタマイズ上級編その２（WebAPI） functions.phpでカスタム投稿とカスタムタクソノミーを作成する方法 イベントカレンダーをつくる 一覧ページの記事の並び順を複数のカスタムフィールドの値で制御する 記事の表示順をカスタムフィールドの値で制御する 親ページがある投稿のIDのリストを取得する メモリエラーの解決 ページ遷移しない投稿一覧のページネーションを、jQueryで手軽に実装する ページネーションのある投稿一覧ページで、最新の投稿１件だけレイアウトを変える 固定ページにページネーション機能を持たせる トップページに設定した固定ページでページネーションする カスタムフィールドを含む記事レコードの一括インポート アドバンストカスタムフィールドの複数選択チェックボックスの値をCSVインポートする ウィジェットをショートコードにして任意の場所で表示する カテゴリページの投稿一覧の取得条件をカテゴリごとに変える 人気記事を取得・表示するプラグイン「WordPress Popular Posts」のカスタマイズ 言語設定が「英語」のブラウザからのアクセスの時、英語ページに強制的にリダイレクトさせる プラグインなしで多言語サイト（英語サイトなど）の作り方 【頻出】よく使う便利なテンプレートタグ一覧【WordPress入門】 Nuxt.js、Vue.jsによるToDoのサンプル ダッシュボード(ADMIN) Nuxt.js -jsonからEXCELファイル作成  Vue.js入門 Vue.js テクニック ECサイト構築例 Nuxt.js + Vue.js 予約システム LP構築例 Nuxt.js + Vue.js