素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

投稿日： 2019年2月20日
最終更新日：

【項目追加】WordPress4.7で追加されたRestAPIのレスポンスにアイキャッチ画像のURLやサイズを追加するやり方【カスタマイズ方法】

YouTubeも見てね♪

ねこじゃすり

ワタオカ ねこじゃすり ライトグレー
created by Rinker
PEPPY(ペピイ)
¥3,850 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品！

ペヤング ソースやきそば 120g×18個

ペヤング ソースやきそば 120g×18個
created by Rinker
ペヤング
¥2,600 (2024/03/15 19:03:46時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし！

レッドブル エナジードリンク 250ml×24本

レッドブル エナジードリンク 250ml×24本
created by Rinker
Red Bull(レッドブル)
¥4,080 (2024/03/15 19:03:47時点 Amazon調べ-詳細)

翼を授けよう！

モンスターエナジー 355ml×24本 [エナジードリンク]

アサヒ飲料 モンスターエナジー 355ml×24本 [エナジードリンク]
created by Rinker
モンスター
¥4,748 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

脳を活性化させるにはこれ！

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング

ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
created by Rinker
スクウェア・エニックス(SQUARE ENIX)
¥3,250 (2024/03/15 19:03:48時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
created by Rinker
Bauhutte(バウヒュッテ)
¥13,861 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥7,180 (2024/03/15 15:06:46時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ！！

WordPressのAPIではアイキャッチが取れない

WordPress4.7でRestAPIが追加

WordPress4.7で追加された便利な機能として、投稿をREST APIで取得することが可能です。

WordPress はアプリケーションフレームワークへと生まれ変わろうとしています。このプロジェクトは、簡単で理解しやすく、信頼性の高い API フレームワークを開発することを目的として生まれました。そして WordPress 本体の API を開発することも目的としています。

このプラグインは簡単な HTTP ベースの REST API を提供します。あなたのサイトのユーザー、投稿、タクソノミー、その他のデータに対してシンプルな HTTP リクエストを送信することで、取り出したりアップデートすることが可能です。
WP REST API v2 Documentation

デフォルトで取得出来る情報は以下となっています。

/wp-json/wp/v2/posts/{post_id}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
{
  "id": 6698,
  "date": "2018-10-21T18:00:47",
  "date_gmt": "2018-10-21T09:00:47",
  "guid": {
    "rendered": "https://blogenist/?p=6698"
  },
  "modified": "2018-12-05T17:55:25",
  "modified_gmt": "2018-12-05T08:55:25",
  "slug": "%e3%80%90%e6%82%aa%e5%a4%a2%e3%80%91%e3%83%9d%e3%82%b1%e3%83%a2%e3%83%b3go%e3%81%ae2018%e5%b9%b410%e6%9c%88%e3%81%ae%e3%80%8c%e3%83%80%e3%83%b3%e3%83%90%e3%83%ab%e3%82%b3%e3%83%9f%e3%83%a5%e3%83%8b",
  "status": "publish",
  "type": "post",
  "link": "https://blogenist/2018/10/21/6698/",
  "title": {
    "rendered": "【悪夢】ポケモンGoの2018年10月の「ダンバルコミュニティデイ」が通信エラー連発で中止になり、アイテムが無駄になった挙句、後日再実施になってしまった件【悲劇】"
  },
  "content": {
    "rendered": "<div>...</div>\n",
      "protected": false
  },
  "excerpt": {
    "rendered": "<p>...</p>\n",
    "protected": false
  },
  "author": 2,
  "featured_media": 6713,
  "comment_status": "closed",
  "ping_status": "closed",
  "sticky": false,
  "template": "",
  "format": "standard",
  "meta": {
    "amp_status": ""
  },
  "categories": [
    128
  ],
  "tags": [
    25,
    109,
    39,
    130,
    32,
    55
  ],
  "_links": {
    "self": [
      {
        "href": "https://blogenist/wp-json/wp/v2/posts/6698"
      }
    ],
    "collection": [
      {
        "href": "https://blogenist/wp-json/wp/v2/posts"
      }
    ],
    "about": [
      {
        "href": "https://blogenist/wp-json/wp/v2/types/post"
      }
    ],
    "author": [
      {
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/users/2"
      }
    ],
    "replies": [
      {
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/comments?post=6698"
      }
    ],
    "version-history": [
      {
        "href": "https://blogenist/wp-json/wp/v2/posts/6698/revisions"
      }
    ],
    "wp:featuredmedia": [
      {
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/media/6713"
      }
    ],
    "wp:attachment": [
      {
        "href": "https://blogenist/wp-json/wp/v2/media?parent=6698"
      }
    ],
    "wp:term": [
      {
        "taxonomy": "category",
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/categories?post=6698"
      },
      {
        "taxonomy": "post_tag",
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/tags?post=6698"
      }
    ],
    "curies": [
      {
        "name": "wp",
        "href": "https://api.w.org/{rel}",
        "templated": true
      }
    ]
  }
}

上記はpost_id指定ですが、複数取得の場合は同様の配列形式で取得出来ます。

アイキャッチのURLが含まれていない。。。

デフォルトのレスポンスでは、記事内容に関する情報はおおよそ含まれているのですが、アイキャッチに関する情報が含まれていませんorz

他のブログやシステムからREST API経由で関連記事として表示したい場合に、アイキャッチ画像が取れないのは不便ですよね。。。

アイキャッチのURLが含まれていない。。。

しかし、WordpressのREST APIはとてもカスタマイズ性が高く、レスポンス項目を自由に拡張することが出来ますので、今回はREST APIへのアイキャッチ画像を追加する方法をご紹介致します♪

手順

functions.phpに追記

REST APIをカスタマイズするにはfunctions.phpにコードを追加する必要があります。

今回はアイキャッチ画像のURLとサイズを取得出来るようにしてみましょう。
以下を末尾に追記してください。

functions.php
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//REST APIにアイキャッチ追加
add_action('rest_api_init', 'custom_wp_rest_api_post');
function custom_wp_rest_api_post() {
  register_rest_field('post',
    'featured_image',
    array(
      'get_callback' => 'rest_api_add_image',
      'update_callback' => null,
      'schema' => null,
    )
  );
}
 
function rest_api_add_image($object, $field_name, $request) {
  $feat_img_array = wp_get_attachment_image_src($object['featured_media'], 'large', true);
  return [
    'src' => $feat_img_array[0],
    'width' => $feat_img_array[1],
    'height' => $feat_img_array[2],
  ];
}

これは、rest_api_add_image関数で画像のsrc/width/heightを取得し、custom_wp_rest_api_post関数でregister_rest_field関数を使ってfeatured_imageという項目名でセットし、rest_api_initにアクションを追加しています。

確認

では、実際に再度叩いてレスポンスを確認してみましょう。

/wp-json/wp/v2/posts/{post_id}
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
{
  "id": 6698,
  "date": "2018-10-21T18:00:47",
  "date_gmt": "2018-10-21T09:00:47",
  "guid": {
    "rendered": "https://blogenist/?p=6698"
  },
  "modified": "2018-12-05T17:55:25",
  "modified_gmt": "2018-12-05T08:55:25",
  "slug": "%e3%80%90%e6%82%aa%e5%a4%a2%e3%80%91%e3%83%9d%e3%82%b1%e3%83%a2%e3%83%b3go%e3%81%ae2018%e5%b9%b410%e6%9c%88%e3%81%ae%e3%80%8c%e3%83%80%e3%83%b3%e3%83%90%e3%83%ab%e3%82%b3%e3%83%9f%e3%83%a5%e3%83%8b",
  "status": "publish",
  "type": "post",
  "link": "https://blogenist/2018/10/21/6698/",
  "title": {
    "rendered": "【悪夢】ポケモンGoの2018年10月の「ダンバルコミュニティデイ」が通信エラー連発で中止になり、アイテムが無駄になった挙句、後日再実施になってしまった件【悲劇】"
  },
  "content": {
    "rendered": "<div>...</div>\n",
    "protected": false
  },
  "excerpt": {
    "rendered": "<p>...</p>\n",
    "protected": false
  },
  "author": 2,
  "featured_media": 6713,
  "comment_status": "closed",
  "ping_status": "closed",
  "sticky": false,
  "template": "",
  "format": "standard",
  "meta": {
    "amp_status": ""
  },
  "categories": [
    128
  ],
  "tags": [
    25,
    109,
    39,
    130,
    32,
    55
  ],
  "featured_image": {
    "src": "https://blogenist/wp-content/uploads/2018/10/pokemongo10ResultEye.png",
    "width": 1116,
    "height": 610
  },
  "category": {
    "name": "ゲーム",
    "slug": "game"
  },
  "_links": {
    "self": [
      {
        "href": "https://blogenist/wp-json/wp/v2/posts/6698"
      }
    ],
    "collection": [
      {
        "href": "https://blogenist/wp-json/wp/v2/posts"
      }
    ],
    "about": [
      {
        "href": "https://blogenist/wp-json/wp/v2/types/post"
      }
    ],
    "author": [
      {
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/users/2"
      }
    ],
    "replies": [
      {
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/comments?post=6698"
      }
    ],
    "version-history": [
      {
        "href": "https://blogenist/wp-json/wp/v2/posts/6698/revisions"
      }
    ],
    "wp:featuredmedia": [
      {
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/media/6713"
      }
    ],
    "wp:attachment": [
      {
        "href": "https://blogenist/wp-json/wp/v2/media?parent=6698"
      }
    ],
    "wp:term": [
      {
        "taxonomy": "category",
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/categories?post=6698"
      },
      {
        "taxonomy": "post_tag",
        "embeddable": true,
        "href": "https://blogenist/wp-json/wp/v2/tags?post=6698"
      }
    ],
    "curies": [
      {
        "name": "wp",
        "href": "https://api.w.org/{rel}",
        "templated": true
      }
    ]
  }
}

正しくfeatured_image項目が追加されましたね♪

終わりに

上記のように必要な情報をREST API経由で取得するようにしておきえば、記事ごとに手入力する必要が無くなり、ショートコード等で自動化を図ることが出来ます。

WordPressのREST APIは使い勝手が良くかなり便利なので、是非触ってみてはいかがでしょうか♪

CATEGORIES & TAGS

IT