WordPressのREST APIでアイキャッチ画像を取得する2つの方法

シェアする：

更新日時：2020年8月15日

この記事をおすすめしたい人

  • WordPressのREST APIでアイキャッチ画像の情報を取得したい人
  • つまりオレ

今回はWordPressのREST APIでアイキャッチ画像の情報を取得します。

やり方は大きく2つ。

画像情報取得にもREST APIを使うか、前回の記事同様に記事のAPIにアイキャッチの情報を追加してしまうか、です。

両方紹介します。

APIを利用してアイキャッチを取得

実は投稿(post)のREST APIには最初からアイキャッチのデータが含まれています。

「投稿」のスキーマにある「featured_media」という項目です。

ここにはアイキャッチに設定されたメディアのIDが入っています。

REST APIを利用するフレームワーク(WordPressでないもの)側からはWordPressでのIDなんか渡されてもどうしようもないんですが、これを利用して今度は「メディア」のAPIを叩くとアイキャッチ画像の情報が取得できます。

「メディア」のAPIへアクセス

REST APIのドキュメントに詳細があります。

今回はメディアIDが分かった状態なので、APIルートから「/wp/v2/media/(メディアID)」の格好でアクセスできます。

当サイトの場合だと/wp/v2/media/63のような感じ。

「メディア」APIの子要素

こちらもREST APIのドキュメントに詳細があります。 詳しくはそちらを見てもらうとして、今回必要そうな情報は「media_details」の中にあります。

「media_details」以下には次の情報が含まれます。

  • 「width」
    画像の幅
  • 「height」
    画像の高さ
  • 「file」
    ファイル名ではなく、WordPressのメディアフォルダからの相対パス
  • 「sizes」
    medium/large/fullなどのそれぞれのメディア情報の配列
  • 「image_meta」
    captionなどのメディアのmeta情報

「sizes」の子要素の構造は次の通り。

  • 「file」
    ファイル名
  • 「width」
    画像の幅
  • 「height」
    画像の高さ
  • 「mime_type」
    メディアのMIMEタイプ
  • 「source_url」
    画像の絶対URL

画像情報を取得する具体例

メディアAPIのデータを「json」とした場合、必要そうな情報は次のように取得します。 「medium」サイズでの例です。 


const width = json.media_details.sizes.medium.width
const height = json.media_details.sizes.medium.height
const url = json.media_details.sizes.medium.source_url

順に幅、高さ、URLです。

APIでアイキャッチを取得する問題点

REST APIの標準機能でもアイキャッチ画像の情報を取得できましたが、上記の流れから分かる通り、

  • 記事APIを取得
  • アイキャッチAPIを取得

と、2回APIを叩くことになります。

静的HTMLで出力する場合にはビルド時に処理してしまうので問題なさそうですが、サーバサイドレンダリングの場合には記事を開くたびに2回APIと通信することになります。

これを回避するために記事のAPIにアイキャッチの情報を含めてしまいましょう。

REST APIへ値を追加する基本

基本は以下のような格好です。 


add_action( 'rest_api_init', 'api_add_fields' );
function api_add_fields() {
  register_rest_field( 'post',
    'XXXXXXXXX',
     array(
      'get_callback'    => 'register_fields',
      'update_callback' => null,
      'schema'          => null,
    )
  );
}
function register_fields( $post, $name ) {
  return YYYYYYYYY
}

XXXXXXXXXの部分にAPIに追加するキーの名前を、YYYYYYYYYの部分でAPIに追加する値を設定します。 その他の部分については前回の記事を見てください。

この場合、JSONは以下のように出力されます。 


{
  (略)
  categories: [],
  tags: [],
  XXXXXXXXX: YYYYYYYYY,
  (略)
}

REST APIへアイキャッチURLのみ追加

アイキャッチのフルサイズのURLだけ取得すればいいや、という場合です。 


add_action( 'rest_api_init', 'api_add_fields' );
function api_add_fields() {
  register_rest_field( 'post',
    'thumbnail_url',
     array(
      'get_callback'    => 'register_fields',
      'update_callback' => null,
      'schema'          => null,
    )
  );
}
function register_fields( $post, $name ) {
  return get_the_post_thumbnail_url($post['id'], 'full');
}

「full」の部分を変更すると他のサイズも取得できます。

出力結果はこんな↓感じ。 


{
  (略)
  categories: [],
  tags: [],
  thumbnail_url: '(アイキャッチ画像の絶対URL)',
  (略)
}

REST APIへアイキャッチURLと幅/高さを追加

今度は3要素になるので、register_rest_field()を3回実行してもいいのですが、コードもJSONも管理しにくくなるので、コールバック側でいろいろと処理をして、連想配列でAPIへ登録します。

前半は共通なのでコールバック関数部分のみのコードです。 


function register_fields( $post, $name ) {
  //記事のアイキャッチ画像のIDを取得
  $id = get_post_thumbnail_id($post['id']);
  
  //アイキャッチ画像の情報を取得
  $info = wp_get_attachment_image_src($id, 'full');
  
  //アイキャッチ画像の情報の内訳
  $url = $info[0];
  $width = $info[1];
  $height = $info[2];
  
  //APIに追加する連想配列
  $data = array();
  
  $data['url'] = $url;
  $data['width'] = $width;
  $data['height'] = $height;
  
  return $data;
}

このようにすると「thumbnail」という項目が追加され、その子要素に「url」「width」「height」を持つようになります。

出力結果はこの↓ように。 


{
  (略)
  categories: [],
  tags: [],
  thumbnail: {
    url: '(アイキャッチ画像の絶対URL)',
    width: 1200,
    height: 630
  },
  (略)
}

REST APIへアイキャッチの全サイズ情報を追加

get_intermediate_image_sizes()を利用して「medium」「large」などの名前を全て取得し、それぞれの画像情報を全部格納してしまうやりかたです。 同じくコールバック部分のみ。 


function register_fields( $post, $name ) {
  //APIに追加する連想配列
  $data = array();
  
  //記事のアイキャッチ画像のIDを取得
  $id = get_post_thumbnail_id($post['id']);
  
  $sizes = get_intermediate_image_sizes();
  
  foreach ( $sizes as $size ) {
    //アイキャッチ画像の情報を取得
    $info = wp_get_attachment_image_src($id, $size);
    
    //アイキャッチ画像の情報の内訳
    $url = $info[0];
    $width = $info[1];
    $height = $info[2];
    
    //このサイズでのアイキャッチ情報
    $current = array();
    
    $current['url'] = $url;
    $current['width'] = $width;
    $current['height'] = $height;
    
    $data[$size] = $current;
  }
  
  return $data;
}

出力結果はこの↓ように。 


{
  (略)
  categories: [],
  tags: [],
  thumbnails: [
    medium: {
      url: '(アイキャッチ画像の絶対URL)',
      width: 300,
      height: 158
    },
    large: {
      url: '(アイキャッチ画像の絶対URL)',
      width: 1024,
      height: 538
    },
    full: {
      url: '(アイキャッチ画像の絶対URL)',
      width: 1200,
      height: 630
    },
  ],
  (略)
}

まとめ

WordPressのREST APIからアイキャッチ画像の情報を取得する2つの方法を紹介しました。

画像情報もAPIに頼る方が操作は簡単ですかね。

自分に合ったやり方を選んでもらえたらと思います。

以上、WordPressからお届けしました！

WP REST APIカスタマイズ編の目次

シェアする：
REST API,WordPress