API WP Rest: détails du dernier message, y compris l'URL des médias en vedette dans une seule demande?

J'utilise l' api wp-rest pour obtenir des informations sur les publications. J'utilise également des éléments de filtre api wp rest 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_mediail renvoie des résultats comme celui-ci:

[

    {
        "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 une URL multimédia en vedette en utilisant cet identifiant? Par défaut, l'appel http://example.com/wp-json/wp/v2/media/401renvoie un nouveau json qui contient tous les détails sur les 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érez le cas lorsque je veux obtenir la liste des articles et leurs vignettes. Une fois, je devrais appeler, http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediaje devrais appeler http://example.com/wp-json/wp/v2/media/id10 fois pour chaque identifiant de média, puis analyser les résultats et obtenir l'url finale de la vignette du média. Il a donc besoin de 11 demandes pour obtenir les détails de 10 messages (un pour la liste, 10 pour les miniatures). Est-il possible d'obtenir ces résultats en une seule demande?

Ah je viens d'avoir ce problème moi-même! Et même si _embedc'est génial, d'après mon expérience, c'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 messages personnalisés), mais j'imagine que vous pouvez le mettre dans le function.phpfichier 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];
}

Maintenant, dans votre réponse JSON, vous devriez voir un nouveau champ appelé "featured_image_src":contenant une URL vers la miniature.

En savoir plus sur la modification des réponses ici:
http://v2.wp-api.org/extending/modifying/

Et voici plus d'informations sur les fonctions register_rest_fieldet 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/

** Remarque: N'oubliez pas les <?php ?>balises s'il s'agit d'un nouveau fichier php!

Ajoutez simplement l' _embedargument de requête à votre URL pour demander les publications, et chaque objet de publication inclura l' _embedded.[wp:featuredmedia]objet, qui comprend toutes les images, tout comme la /media/$idressource. Si vous voulez une taille spécifique, accédez-y simplement par son nom de propriété, c'est-à-dire: _embedded[wp:featuredmedia][0].media_details.sizes.full.source_urlou pour sa vignette:_embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

C'est-à-dire que l'objet intégré wp: Featuredmedia inclut toutes les URL et les détails pour chaque taille disponible pour votre publication, mais si vous ne voulez que l'image vedette d'origine, 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 _embedcomme argument de requête, puis vous avez toutes les informations dont vous avez besoin pour utiliser la meilleure taille pour votre vue.