Title: REST APIで取得した画像IDから画像URLを出力したい
Last modified: 2021年2月22日

---

# REST APIで取得した画像IDから画像URLを出力したい

 *  解決済 [no23h](https://ja.wordpress.org/support/users/no23h/)
 * (@no23h)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/)
 * advanced custom fieldsで画像フィールドを設定、返り値のフォーマットは画像IDです。
   
   表示する際は以下のように画像サイズを指定してから利用しています。
 *     ```
       <?php
         $img = get_field('field_name');
         $imgurl = wp_get_attachment_image_src($img, 'medium');
       ?>
       <div style="background-image: url('<?php if($imgurl){ echo $imgurl[0]; } ?>');" ></div>
       ```
   
 * この画像フィールドを別のサイトからREST APIで取得し、画像URLを出力したいのですが、
   
   取得されるのはIDなのでそのままでは利用できません。 また、ページによって画像サイズ
   を変更したいので、できれば上記コードと全く同じように出力したいのですが、 何か
   方法はありますでしょうか。
 * お詳しい方、ご教授いただけますと幸いです。

10件の返信を表示中 - 1 - 10件目 (全10件中)

 *  [ishitaka](https://ja.wordpress.org/support/users/ishitaka/)
 * (@ishitaka)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669658)
 * こんにちは
 * REST API の [media](https://developer.wordpress.org/rest-api/reference/media/)
   エンドポイントを使用するのはどうでしょうか？
    取得したデータの中にはサイズごと
   の URL も含まれています。
 * 例:
 *     ```
       $resturl = '〇〇〇/wp/v2/media/123';
       $json = file_get_contents( $resturl );
       $data = json_decode( $json );
       if ( $data ) {
       	$url = $data->media_details->sizes->medium->source_url;
       	echo $url;
       }
       ```
   
 * ※ 123 は画像 ID。
 *  トピック投稿者 [no23h](https://ja.wordpress.org/support/users/no23h/)
 * (@no23h)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669667)
 * [@ishitaka](https://ja.wordpress.org/support/users/ishitaka/) 様
 * 毎回的確に教えていただき本当にありがうございます。
    最終的に以下のコードをループ
   内に記述することで、 画像サイズを指定しつつ、各投稿の画像を出力することができ
   ました。
 *     ```
       <?php
       $imgID = $data['acf']['field_name'];
       $restURL = '〇〇〇/wp-json/wp/v2/media/'.$imgID;
       $json = file_get_contents( $restURL );
       $data = json_decode( $json );
   
       if ( $data ):
         $imgURL = $data->media_details->sizes->medium->source_url;
       ?>
        <img src="<?php echo $imgURL; ?>" alt="">
       <?php endif; ?>
       ```
   
 * ありがとうございました。解決済みとさせていただきます。
 *  [ishitaka](https://ja.wordpress.org/support/users/ishitaka/)
 * (@ishitaka)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669669)
 * 解決したということなので、以下のことは気が向いたらお読みください。
 * ループ内ということなので、比較的遅い処理である画像（メディア）の取得を1回で取得
   されたほうがいいかと思います。
    [include](https://developer.wordpress.org/rest-api/reference/media/#arguments)
   で ID を複数指定することができます。
 * 例:
 *     ```
       // $ids = [1,2,3]; // 画像 ID の配列
       $resturl = '〇〇〇/wp-json/wp/v2/media/?include=' . implode( '+', $ids );
       ```
   
 *  トピック投稿者 [no23h](https://ja.wordpress.org/support/users/no23h/)
 * (@no23h)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669705)
 * [@ishitaka](https://ja.wordpress.org/support/users/ishitaka/) 様
 * ありがとうございます。
 * 全体コードは以下なのですが、各画像IDはランダムで呼び出された記事と関連づけられ
   ておりまして、ページを読み込むたびに画像IDが変わります。
    この場合、画像の取得
   を一回で行うにはどこをどう修正すれば良いでしょうか…
 *     ```
       <?php
         $siteURL = 'https://〇〇〇';
         $restURL = $siteURL.'/wp-json/wp/v2/typename?per_page=30&orderby=rand';
   
         $json = mb_convert_encoding(file_get_contents($restURL), 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
         $arr = json_decode($json,true);
       ?>
       <?php foreach($arr as $data): ?>
         <div class="seeds_list">
           <a href="<?php echo $data['link']; ?>">
             <h1><?php echo $data['title']['rendered']; ?></h1>
   
             <?php
             $imgID = $data['acf']['seeds_thumbnail'];
             $restURL = $siteURL.'/wp-json/wp/v2/media/'.$imgID;
             $json = file_get_contents( $restURL );
             $data = json_decode( $json );
             if ( $data ):
               $imgURL = $data->media_details->sizes->seeds_thumbnail->source_url;
             ?>
              <img src="<?php echo $imgURL; ?>" alt="">
             <?php endif; ?>
   
           </a>
         </div>
       <?php endforeach; ?>
       ```
   
 *  [ishitaka](https://ja.wordpress.org/support/users/ishitaka/)
 * (@ishitaka)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669707)
 * ループ (foreach) の前で、同じループをして画像 ID の配列を作成するといいかと思い
   ます。
 *  [ishitaka](https://ja.wordpress.org/support/users/ishitaka/)
 * (@ishitaka)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669709)
 * こんな感じでしょうか？
 * `<?php foreach($arr as $data): ?>`
 * の直前あたりに、
 *     ```
       $image_ids = array();
       foreach( $arr as $data ) {
       	$image_ids[] = $data['acf']['seeds_thumbnail'];
       }
       $resturl = $siteURL . '/wp-json/wp/v2/media/?include=' . implode( '+', $image_ids );
       $json = file_get_contents( $resturl );
       $images = json_decode( $json );
       $images_index = 0;
       ```
   
 * ループ内に、
 *     ```
       $url = $images[ $images_index ]->media_details->sizes->medium->source_url;
       $images_index++;
       ```
   
 *  トピック投稿者 [no23h](https://ja.wordpress.org/support/users/no23h/)
 * (@no23h)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669747)
 * [@ishitaka](https://ja.wordpress.org/support/users/ishitaka/) 様
    有難うござい
   ます！
 * 下記のコードで試してみたのですが、それぞれの記事に対する画像が表示されず、src
   =”<?php echo $url; ?>”の部分に(unknown)や別記事の画像urlが出力されたりします。
 *     ```
       <?php
         $siteurl = 'https://〇〇〇';
         $resturl = $siteurl . '/wp-json/wp/v2/seeds?per_page=5&orderby=rand';
         $json = mb_convert_encoding(file_get_contents($resturl), 'UTF8', 'ASCII,JIS,UTF-8,EUC-JP,SJIS-WIN');
         $arr = json_decode($json,true);
   
         $image_ids = array();
         foreach( $arr as $data ) {
           $image_ids[] = $data['acf']['seeds_thumbnail'];
         }
         $resturl = $siteurl . '/wp-json/wp/v2/media/?include=' . implode( '+', $image_ids );
         $json = file_get_contents( $resturl );
         $images = json_decode( $json );
         $images_index = 0;
   
       ?>
       <?php foreach($arr as $data): ?>
         <div class="seeds_list">
           <a href="<?php echo $data['link']; ?>">
             <h1><?php echo $data['title']['rendered']; ?></h1>
             <p><?php echo $data['acf']['seeds_subtitle']; ?></p>
   
             <?php
             if ( $data ):
               $url = $images[ $images_index ]->media_details->sizes->medium->source_url;
               $images_index++;
             ?>
             <img src="<?php echo $url; ?>" width="150px" height="100px" alt="">
             <?php endif; ?>
   
           </a>
         </div>
       <?php endforeach; ?>
       ```
   
 * 記事リストをランダムで出力していますが、インクリメントの部分が次のインデックス
   を呼び出せていない気がするのですが、教えていただいたコードの記述位置がおかしい
   のでしょうか。
    何度も申し訳ありません。
 *  [ishitaka](https://ja.wordpress.org/support/users/ishitaka/)
 * (@ishitaka)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669748)
 * すみません、サンプルコードでは画像配列（$images）が順番に並んでいるものとして
   しまいました。
    ループ内では、ID で検索して使用してください。
 *  [ishitaka](https://ja.wordpress.org/support/users/ishitaka/)
 * (@ishitaka)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669750)
 * 例:
    `$url = $images[ $images_index ]->media_details->sizes->medium->source_url;`
   ↓ `$url = $images[ array_search( $data['acf']['seeds_thumbnail'], array_column(
   $images, 'id' ) ) ]->media_details->sizes->medium->source_url;`
 *  トピック投稿者 [no23h](https://ja.wordpress.org/support/users/no23h/)
 * (@no23h)
 * [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669799)
 * [@ishitaka](https://ja.wordpress.org/support/users/ishitaka/) 様
 * ありがとうございます。 うまく機能しました。
    ページ読み込みスピードも格段に速
   くなりました。 感謝申し上げます。

10件の返信を表示中 - 1 - 10件目 (全10件中)

 トピック「REST APIで取得した画像IDから画像URLを出力したい」には新たに返信すること
はできません。

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 10件の返信
 * 2人の参加者
 * 最後の返信者: [no23h](https://ja.wordpress.org/support/users/no23h/)
 * 最後の活動: [5年、 7ヶ月前](https://ja.wordpress.org/support/topic/rest-api%e3%81%a7%e5%8f%96%e5%be%97%e3%81%97%e3%81%9f%e7%94%bb%e5%83%8fid%e3%81%8b%e3%82%89%e7%94%bb%e5%83%8furl%e3%82%92%e5%87%ba%e5%8a%9b%e3%81%97%e3%81%9f%e3%81%84/#post-11669799)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック