REST API のスキーマにリピーターフィールドの画像データを格納する
ACF to REST API を使えば REST API でACFの値が取得できますが、カスタマイズした形でカスタムフィールドの値を追加する方法です。
例えばACFフィールドでアップロードした画像は指定している戻り値がREST APIでも返ってきます。
image_field
: リピーターの親フィールド
image_sub_field
: リピーターの子フィールド(返り値 => 画像ID の場合)
... "acf": { "image_field": [ { "image_sub_field": 164 }, { "image_sub_field": 165 }, { "image_sub_field": 166 }, ...
このままだとAPIからは画像URLなど取れないので独自で追加する必要があります。
functions.php
<?php // ... function register_custom_images_data() { register_rest_field( 'CUSTOM_POST_TYPE_NAME', // カスタム投稿名 'CUSTOM_REST_API_KEY', // REST API に追加するキー array( 'get_callback' => 'get_custom_image_data', 'update_callback' => null, 'schema' => null, ) ); } add_action( 'rest_api_init', 'register_custom_images_data' ); // リピーター画像取得 function get_custom_image_data( $object, $field_name, $request ) { $meta_fields = $object['acf']['image_field']; $meta = array(); foreach ( $meta_fields as $field ) { $artist_images_full = wp_get_attachment_image_src( $field['image_sub_field'], 'full'); array_push($meta, $artist_images_full); } return $meta; } // ...
として REST API を叩くと
... "CUSTOM_REST_API_KEY": [ { "https:/siteUrl.com/wp-content/uploads/2019/10/sample02.jpg", 1280, 640, false }, { "https:/siteUrl.com/wp-content/uploads/2019/10/sample01.jpg", 1280, 640, false }, ...
となる
仮に Vue で出力するには
<ul v-for="(image,index) in post.data.CUSTOM_REST_API_KEY" :key="index"> <li> <img :src="image[0]" :data-size="`${image[1]}x${image[2]}`" > </li> </ul>
という感じで出力する