前回、Vue.js を使って WP REST API で取得した他サイトの投稿データを自サイトに表示する方法のご紹介をしましたが、アドバンストカスタムフィールド(Advanced Custom Fields)のカスタムフィールドの値は通常 WP REST API を使っても取得できません。
そこで、プラグインをインストールしてアドバンストカスタムフィールドのカスタムフィールド値を取得できるようにします。
この ACF to REST API というプラグインをインストールしましょう。
インストールが完了したら、管理画面の[設定]-[パーマリンク]を開き、「ACF to REST API」の「Request Version」で「V2」を設定します。
そして、「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 で他サイトのアドバンストカスタムフィールドのカスタムフィールド値を取得して、自サイトに表示する方法のご紹介でした。
WordPressカスタマイズ事例やウェブ制作ノウハウの新着情報、お役立ち情報を
リアルタイムにメルマガ配信!