WordPressのカスタムフィールドの値をJavasScriptで取得みてよう

javascript

さて、前回WordPressの投稿内容をWP REST API でJSONを出力してJavaScriptで取得するという記事を書きました。

WordPressの投稿内容をJavascriptで取得してみた

だたWP REST APIだけだとカスタムフィールドの値を取得することはできません。個人的にカスタムフィールドを使うページって型が決まってる気がします。
例えば、商品一覧ページとかテンプレートとして使うイメージですかね。

Advanced Custom Fieldsを使おう

まずは、カスタムフィールドを使えるようにしようかと思いますが、function.phpで自作で書くよりプラグインを使ったほうが早いです。

そこでカスタムフィールドといったらAdvanced Custom Fieldsのプラグインが有名なのでこちらを使います。
使い方は以下のブログを参考にしてください。

「Advanced Custom Fields」の使い方と出力方法のまとめ

実際に私は練習がてらに商品一覧ページ用の「商品タイトル」「商品画像」「商品説明」「外部リンク先」という項目で作成してみました。

商品タイトルproduct_title
商品画像product_image
商品説明product_detail
外部リンク先product_link
カスタムフィールドの設定項目

「商品一覧」というカスタム投稿タイプを作っておいて、そのカスタム投稿タイプに商品一覧のカスタムフィールドを割り当てています。
Advanced Custom Fieldsは、いろいろなカスタムフィールドを作った場合に、それぞれ、通常の投稿や固定ページ、カスタム投稿タイプなどに割り当てる事ができます。

ACF to REST APIのプラグインを使おう

Advanced Custom Fieldsをインストールして設定したら、今度はカスタムフィールドを取得する為にACF to REST APIというプラグインをインストールしましょう。これはWP REST APIで取得できないカスタムフィールドの値を取得できるようにするプラグインです。プラグインの検索画面から検索すると以下のプラグインが出てきます。

ACF to REST AP

ACF to REST APIのプラグインをインソールしたら有効にするだけで大丈夫です。

カスタムフィールドの値が出力されているかJSONを確認してみよう

さっそくJSONファイルでちゃんとカスタムフィールドの値が出力されているか確認してみようと思います。
WP REST API の時と同じようにJSONファイルへのURLへアクセスすると以下のようなacfが追加されてるはずです。

"acf": {
            "product_title": "スマートフォン３",
            "product_image": "http://localhost/wordpress/wp-content/uploads/2020/07/03.jpg",
            "product_detail": "
ここはスマートフォン３に関する説明
",
            "product_link": ""
        },

実際にJavaScriptで読み込んだ際にコンソールで出力するとDeveloperToolのコンソールで下記のようにacfが確認できるかと思います。

DeveloperToolのコンソールでカスタムフィールドの値が出力されている例

JavaScriptでカスタムフィールドの値を取得するには？

あとはJavaScriptで実際に取得する方法は前回と同じです。
＊ただしCodePenのサンプルではカスタムフィールドの値は取得してません。
だいぶ省きますが、以下のようにすればカスタムフィールドの値を取得できます。

//ajaxなどでJSONファイルを読み込んできたデータがresponseです

all_data = response;
for (var i = 0; i < all_data.length; i++) {
all_data[i].acf.product_title　 //商品タイトルのカスタムフィールド
all_data[i].acf.product_image　 //商品画像のカスタムフィールド
all_data[i].acf.product_detail　 //商品説明のカスタムフィールド
all_data[i].acf.product_url　 　 //外部リンク先のカスタムフィールド
}

まとめ

2回にわたって、Wordpressの投稿内容とカスタムフィールドの値をJSONで出力してJavaScriptで取得する方法を書いてきました。

また機会があれば、WP REST API で投稿内容を取得できる数が最大100というのを増やせる調査をしていきたいと思っています。