WP Rest API: Details zum neuesten Beitrag einschließlich der vorgestellten Medien-URL in einer Anfrage?

Ich benutze wp-rest api , um Beiträge zu erhalten. Ich verwende auch wp rest api Filterelemente , um Felder zu filtern und das Ergebnis zusammenzufassen:

Wenn ich http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediaes aufrufe, werden folgende Ergebnisse zurückgegeben:

[

    {
        "id": 407,
        "title": {
            "rendered": "Title 1"
        },
        "featured_media": 399
    },
    {
        "id": 403,
        "title": {
            "rendered": "Title 2"
        },
        "featured_media": 401
    }

]

Die Frage ist, wie ich mit dieser ID eine vorgestellte Medien-URL generieren kann. Standardmäßig gibt der Aufruf http://example.com/wp-json/wp/v2/media/401einen neuen JSON zurück, der alle Details zur URL in verschiedenen Größen des Quellbilds enthält:

{

    "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"
            }
        ]
    }

}

Aber denken Sie an den Fall, wenn ich eine Liste der Beiträge und ihrer Miniaturansichten erhalten möchte. Einmal sollte ich anrufen, http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediadann sollte ich http://example.com/wp-json/wp/v2/media/id10 Mal für jede Medien-ID anrufen und dann die Ergebnisse analysieren und die endgültige URL der Medien-Miniaturansicht erhalten. Es werden also 11 Anfragen benötigt, um Details zu 10 Posts zu erhalten (eine für die Liste, 10 für Thumbnails). Ist es möglich, diese Ergebnisse in einer Anfrage zu erhalten?

Ah, ich hatte gerade dieses Problem selbst! Und obwohl _embedes großartig ist, ist es meiner Erfahrung nach sehr langsam, und der Sinn von JSON ist es, schnell zu sein: D.

Ich habe den folgenden Code in einem Plugin (der zum Hinzufügen benutzerdefinierter Beitragstypen verwendet wird), aber ich kann mir vorstellen, dass Sie ihn in die function.phpDatei Ihres Themas einfügen können.

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];
}

In Ihrer JSON-Antwort sollte nun ein neues Feld "featured_image_src":mit einer URL zum Miniaturbild angezeigt werden.

Weitere Informationen zum Ändern von Antworten finden Sie hier:
http://v2.wp-api.org/extending/modifying/

Weitere Informationen zu register_rest_fieldund und wp_get_attachment_image_src()Funktionen:
1.) https://developer.wordpress.org/reference/functions/register_rest_field/
2.) https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

** Hinweis: <?php ?>Tags nicht vergessen, wenn dies eine neue PHP-Datei ist!

Fügen Sie einfach das _embedAbfrageargument zu Ihrer URL hinzu und fragen Sie nach den Posts. Jedes Post-Objekt enthält das _embedded.[wp:featuredmedia]Objekt, das alle Bilder enthält, genau wie die /media/$idRessource. Wenn Sie eine bestimmte Größe wünschen, greifen Sie einfach über den Eigenschaftsnamen darauf zu, dh: _embedded[wp:featuredmedia][0].media_details.sizes.full.source_urloder für die Miniaturansicht:_embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

Das heißt, das eingebettete wp: Featuredmedia-Objekt enthält alle URLs und Details für jede für Ihren Beitrag verfügbare Größe. Wenn Sie jedoch nur das Original-Feature-Bild möchten, können Sie den Wert in diesem Schlüssel verwenden: post._embedded["wp:featuredmedia"][0].source_url

Ich benutze es auf einer Site mit so etwas (benutze natürlich deine eigene Domain):

$.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);
    });
});

Sehen? Sie brauchen keine zwei Abfragen, fügen _embedSie sie einfach als Abfrageargument hinzu, und dann haben Sie alle Informationen, die Sie benötigen, um die beste Größe für Ihre Ansicht zu verwenden.