投稿日：
2019年2月20日
最終更新日：
【項目追加】WordPress4.7で追加されたRestAPIのレスポンスにアイキャッチ画像のURLやサイズを追加するやり方【カスタマイズ方法】
YouTubeも見てね♪
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
created by Rinker
¥61,300
(2025/01/05 20:59:47時点 楽天市場調べ-詳細)
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
モンスターエナジー 355ml×24本 [エナジードリンク]
脳を活性化させるにはこれ！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
目次
WordPressのAPIではアイキャッチが取れない
WordPress4.7でRestAPIが追加
WordPress4.7で追加された便利な機能として、投稿をREST APIで取得することが可能です。
WordPress はアプリケーションフレームワークへと生まれ変わろうとしています。このプロジェクトは、簡単で理解しやすく、信頼性の高い API フレームワークを開発することを目的として生まれました。そして WordPress 本体の API を開発することも目的としています。
このプラグインは簡単な HTTP ベースの REST API を提供します。あなたのサイトのユーザー、投稿、タクソノミー、その他のデータに対してシンプルな HTTP リクエストを送信することで、取り出したりアップデートすることが可能です。
WP REST API v2 Documentation
デフォルトで取得出来る情報は以下となっています。
|
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とサイズを取得出来るようにしてみましょう。
以下を末尾に追記してください。
|
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にアクションを追加しています。
確認
では、実際に再度叩いてレスポンスを確認してみましょう。
|
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は使い勝手が良くかなり便利なので、是非触ってみてはいかがでしょうか♪