WP REST APIでACFのカスタムフィールドを表示させるプラグインとスニペット [jQuery版]

2021年10月4日2022年2月23日 3分

カスタムフィールドは、「テンプレートのコードを触ることなく、管理画面から簡単に更新できるようにしたい」時に重宝し、そんな時にはAdvanced Custom Fields プラグインを使えば、複雑な条件なども設定しつつ、簡単にカスタムフィールドを作ることができます。

この記事は、

WP REST APIでできること。
APIで、カスタムフィールを使う為のプラグインと設定方法。
表示させる為のスニペットサンプル。

そんなカスタムフィールドの項目を、WP REST APIで取得して表示させるプラグインとスニペットの紹介の内容です。

複数のサイトでカスタムフィールドを使っている方は、ぜひ参考にしてトライしてみて下さい。

WP REST APIとは？
- WP REST APIでできること
カスタムフィールドを表示させる方法と手順
さいごに

WP REST APIとは？

WP REST APIとは、WordPressのデータベースの情報をJSON形式で取得できるAPIで、WordPress4.7から標準搭載されています。

WP REST APIを使うことで、記事の「公開日」「公開状態」「投稿者」「カテゴリ・タグ」「取得する件数」「ソート順」など、詳細の情報を取得することができます。

WP REST APIでできること

WP REST APIを使うと、WordPressの関数を使わなくても記事の取得・出力ができてしまいます。

例えば以下のように、当サイトとは別のWordPressの記事から取得して表示ができます。サンプルでは4件指定しています。

かかかず

表示件数や、指定のカテゴリなど、任意の内容で設定できます。

このように、例えばAというWordPressの最新の記事5件を、BのWordPressのサイトにリンクカードで表示させたりです。

こんなことがコードを色々書いたりする必要がなく、既存プログラムをそのまま利用できてしまうので、複数のサイト運営で、相互に記事を表示させたい場合には覚えておくとすごく便利です。

jQueryでの基本的な使い方とできることについては、以下の記事にあるのでぜひ参考にしてみてください。

カスタムフィールドを表示させる方法と手順

プラグインをインストール

WP REST APIで読み込ませたいサイトに、ACF to REST APIのプラグインをインストールします。

インストールは、ダッシュボードの「プラグイン＞新規追加」で「acf wp rest api」と検索キーワードを入力して検索するば出てくるので、以下のプラグインをインストールしましょう。

プラグインの有効化

インストールしたプラグインを有効にします。

これだけでサイト側の設定は完了です。

カスタムフィールドの受信できているかテスト

プラグインが有効にできたら、対象のブログのデータでカスタムフィールドを受信できているかどうかを確認してみましょう。

方法は簡単で、ブラウザのアドレスバーに下記を入力します。

アドレスバーに入力

WordPressのURL/wp-json/wp/v2/

ブラウザのアドレスバーに上記を入力すると、以下のような表示になるので、Command + F の検索でカスタムフィールドの項目名があるかどうかを調べます。

該当するカスタムフィールドの項目があればOKです。

jQueryのWP REST APIにカスタムフィールドの項目を記述

設定が完了したら、WP REST APIのソースの中に、取得したいカスタムフィールドの項目を記述します。

例えば、カスタムフィールドの項目名が text001 の場合、以下のように記述します。

jQuery

    $.getJSON("https://sample.com/wp-json/wp/v2/posts?_embed&per_page=10", function (results) {
      $.each(results, function (i, item) {
        var date_data = new Date(item.date);
        var year = date_data.getFullYear();
        var month = date_data.getMonth() + 1;
        var day = date_data.getDate();
        var title = item.title.rendered;
	var txt001 = item.acf.txt001;
        var link = item.link;
        var date = year + '年' + month + '月' + day + '日';
        var thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.medium.source_url
        $('.wp-apicard').append("<li><a href='" + link + "'><img src='" + thum + "'><p>" + date + txt001 +"</p><p>" + title + "</p></a></li>");
      });
    });

記述は簡単で、変数宣言（変数の名前と変数に格納されるデータのデータ型を指定）で .acf を加えるだけです。

上記の例では、中列の var txt001 = item.acf.txt001; で変数宣言をして、出力するところに txt001 を記述します。

かかかず

これでカスタムフィールドも取得できるので、出力のHTMLと合わせて書き換えましょう。