WP Rest API: les détails du dernier message, y compris l’URL du média en une seule demande?
J'utilise wp-rest api pour obtenir des informations sur les publications. J'utilise aussi wp rest api éléments de filtre pour filtrer les champs et résumer le résultat:
Lorsque j'appelle http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media, les résultats sont les suivants:
[
{
"id": 407,
"title": {
"rendered": "Title 1"
},
"featured_media": 399
},
{
"id": 403,
"title": {
"rendered": "Title 2"
},
"featured_media": 401
}
]
La question est de savoir comment puis-je générer l'URL de contenu multimédia en utilisant cet identifiant? Par défaut, l'appel http://example.com/wp-json/wp/v2/media/401 renvoie un nouveau fichier json contenant tous les détails sur l'URL de différentes tailles d'image source:
{
"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"
}
]
}
}
Mais considérons le cas lorsque je souhaite obtenir la liste des publications et leurs vignettes. Une fois, je devrais appeler http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media, puis je devrais appeler http://example.com/wp-json/wp/v2/media/id 10 fois pour chaque ID de média, puis analyser les résultats et obtenir l'URL finale de la vignette du média. Il faut donc 11 demandes pour obtenir les détails de 10 messages (un pour la liste, 10 pour les vignettes). Est-il possible d'obtenir ces résultats en une seule demande?
Ah je viens d'avoir ce problème moi-même! Et bien que _embed soit excellent, selon mon expérience, il est très lent et le but de JSON est d'être rapide: D
J'ai le code suivant dans un plugin (utilisé pour ajouter des types de publication personnalisés), mais j'imagine que vous pourriez le mettre dans le fichier function.php de votre thème.
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];
}
Dans votre réponse JSON, vous devriez maintenant voir un nouveau champ appelé "featured_image_src": contenant une URL à la vignette.
En savoir plus sur la modification des réponses ici:
http://v2.wp-api.org/extending/modifying/
Et voici plus d'informations sur les fonctionsregister_rest_field et 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/
** Note: N'oubliez pas les tags <?php ?> s'il s'agit d'un nouveau fichier php!
Ajoutez simplement l'argument de requête _embed à votre URL demandant les publications. Chaque objet de publication inclura l'objet _embedded.[wp:featuredmedia], qui comprend toutes les images, exactement comme la ressource /media/$id. Si vous souhaitez une taille spécifique, il vous suffit d’y accéder par son nom de propriété, à savoir: _embedded[wp:featuredmedia][0].media_details.sizes.full.source_url ou par sa vignette: _embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url
En d’autres termes, l’objet incorporé wp: Featuredmedia inclut toutes les URL et les détails de chaque taille disponible pour votre publication. Toutefois, si vous souhaitez uniquement l’image sélectionnée en vedette, vous pouvez utiliser la valeur de cette clé: post._embedded["wp:featuredmedia"][0].source_url
Je l'utilise dans un site avec quelque chose comme ça (utilisez votre propre domaine, bien sûr):
$.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);
});
});
Voir? Pas besoin de deux requêtes, ajoutez simplement _embed en tant qu'argument de requête et vous obtiendrez toutes les informations nécessaires pour utiliser la taille optimale pour votre affichage.