yuheijotaki.com

REST API のスキーマにリピーターフィールドの画像データを格納する

f:id:jotaki:20191008144612p:plain

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>

という感じで出力する