WP Rest API：おすすめのメディアのURLを含む最新の投稿の詳細
私は wp-rest api を使って投稿情報を取得しています。また、 wp rest api filter items を使用してフィールドをフィルタリングし、結果を要約します。
http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediaを呼び出すと、次のような結果が返されます。
[
{
"id": 407,
"title": {
"rendered": "Title 1"
},
"featured_media": 399
},
{
"id": 403,
"title": {
"rendered": "Title 2"
},
"featured_media": 401
}
]
問題は、このIDを使用しておすすめのメディアURLをどのように生成できるかです。デフォルトでは、http://example.com/wp-json/wp/v2/media/401を呼び出すと、異なるサイズのソース画像のURLに関するすべての詳細を含む新しいjsonが返されます。
{
"id": 401,
"date": "2016-06-03T17:29:09",
"date_gmt": "2016-06-03T17:29:09",
"guid": {
"rendered": "http://example.com/wp-content/uploads/my-image-name.png"
},
"modified": "2016-06-03T17:29:09",
"modified_gmt": "2016-06-03T17:29:09",
"slug": "my-image-name",
"type": "attachment",
"link": "http://example.com/my-post-url",
"title": {
"rendered": "my-image-name"
},
"author": 1,
"comment_status": "open",
"ping_status": "closed",
"alt_text": "",
"caption": "",
"description": "",
"media_type": "image",
"mime_type": "image/png",
"media_details": {
"width": 550,
"height": 250,
"file": "my-image-name.png",
"sizes": {
"thumbnail": {
"file": "my-image-name-150x150.png",
"width": 150,
"height": 150,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name-150x150.png"
},
"medium": {
"file": "my-image-name-300x136.png",
"width": 300,
"height": 136,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name-300x136.png"
},
"one-paze-port-thumb": {
"file": "my-image-name-363x250.png",
"width": 363,
"height": 250,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name-363x250.png"
},
"one-paze-blog-thumb": {
"file": "my-image-name-270x127.png",
"width": 270,
"height": 127,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name-270x127.png"
},
"one-paze-team-thumb": {
"file": "my-image-name-175x175.png",
"width": 175,
"height": 175,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name-175x175.png"
},
"one-paze-testimonial-thumb": {
"file": "my-image-name-79x79.png",
"width": 79,
"height": 79,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name-79x79.png"
},
"one-paze-blog-medium-image": {
"file": "my-image-name-380x250.png",
"width": 380,
"height": 250,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name-380x250.png"
},
"full": {
"file": "my-image-name.png",
"width": 550,
"height": 250,
"mime_type": "image/png",
"source_url": "http://example.com/wp-content/uploads/my-image-name.png"
}
},
"image_meta": {
"aperture": "0",
"credit": "",
"camera": "",
"caption": "",
"created_timestamp": "0",
"copyright": "",
"focal_length": "0",
"iso": "0",
"shutter_speed": "0",
"title": "",
"orientation": "0",
"keywords": [ ]
}
},
"post": 284,
"source_url": "http://example.com/wp-content/uploads/my-image-name.png",
"_links": {
"self": [
{
"href": "http://example.com/wp-json/wp/v2/media/401"
}
],
"collection": [
{
"href": "http://example.com/wp-json/wp/v2/media"
}
],
"about": [
{
"href": "http://example.com/wp-json/wp/v2/types/attachment"
}
],
"author": [
{
"embeddable": true,
"href": "http://example.com/wp-json/wp/v2/users/1"
}
],
"replies": [
{
"embeddable": true,
"href": "http://example.com/wp-json/wp/v2/comments?post=401"
}
]
}
}
しかし、投稿とそのサムネイルのリストを取得したい場合について考えてみましょう。一度私はhttp://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediaを呼び出すべきですそれから私は各メディアIDのために10回http://example.com/wp-json/wp/v2/media/idを呼び出すべきですそしてそれから結果を解析しそしてメディアサムネイルの最終的なURLを得るべきです。そのため、10件の投稿の詳細を取得するには11回のリクエストが必要です（リスト用に1つ、サムネイル用に10件）。 1回のリクエストでこの結果を得ることは可能ですか？
ああ、私は自分自身でこの問題を抱えていました！ _embedは素晴らしいのですが、私の経験では非常に遅く、JSONのポイントは速いということです：D
私はプラグインの中に次のコードを持っています（カスタム投稿タイプを追加するために使われます）、しかしあなたのテーマのfunction.phpファイルにそれを入れることができると思います。
php
add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Add featured image
register_rest_field(
'post', // Where to add the field (Here, blog posts. Could be an array)
'featured_image_src', // Name of new field (You can call this anything)
array(
'get_callback' => 'get_image_src',
'update_callback' => null,
'schema' => null,
)
);
}
function get_image_src( $object, $field_name, $request ) {
$feat_img_array = wp_get_attachment_image_src(
$object['featured_media'], // Image attachment ID
'thumbnail', // Size. Ex. "thumbnail", "large", "full", etc..
true // Whether the image should be treated as an icon.
);
return $feat_img_array[0];
}
これでJSONレスポンスに、サムネイルへのURLを含む"featured_image_src":という新しいフィールドが表示されるはずです。
回答の修正については、こちらをご覧ください。
http://v2.wp-api.org/extending/modifying/
register_rest_field関数とwp_get_attachment_image_src()関数についての詳細は、以下のとおりです。
1。） https://developer.wordpress.org/reference/functions/register_rest_field/ /
2。） https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/
**注：これが新しいphpファイルである場合は<?php ?>タグを忘れないでください。
投稿を要求するURLに_embedクエリ引数を追加するだけで、すべての投稿オブジェクトに_embedded.[wp:featuredmedia]オブジェクトが含まれます。これには、/media/$idリソースのようにすべての画像が含まれます。特定のサイズが必要な場合は、そのプロパティ名、つまり_embedded[wp:featuredmedia][0].media_details.sizes.full.source_urlまたはサムネイルの場合は_embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_urlでアクセスしてください。
つまり、wp：featuredmedia埋め込みオブジェクトには、投稿に使用できるすべてのサイズのすべてのURLと詳細が含まれていますが、元の注目画像のみを使用する場合は、次のキーの値を使用できます。post._embedded["wp:featuredmedia"][0].source_url
私はこのようなものでサイトでそれを使用します（もちろんあなた自身のドメインを使用してください）：
$.get('https://example.com/wp-json/wp/v2/posts/?categories=3&_embed',
function(posts) {
var elems = '';
posts.forEach(function(post){
var link = post.link;
var title = post.title.rendered;
var pic = post._embedded["wp:featuredmedia"][0].source_url);
elems += '<div class="this_week"><a href="' + link + '" target="_blank">';
elems += '<img src="' + pic + '" title="' + title + '"/><span class="title">';
elems += title + '</span></a></div>';
});
$('#blockbusters').html(elems);
});
});
見る？ 2つのクエリは必要ありません。クエリ引数として_embedを追加するだけで、ビューに最適なサイズを使用するために必要なすべての情報が得られます。