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

14

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?

VSB
quelle
1
Haben Sie ein neues Feld für Ihre Antwort mit register_rest_field registriert?
Benoti
@ Benoti Ich werde seine Dokumentation überprüfen. Wenn es noch mehr Fragen gab, werde ich auf Sie zurückkommen :)
VSB
Es ist richtig, Sie haben nicht das Bilddatum in der Post-Anfrage, nur die ID des vorgestellten Mediums und eine neue Anfrage ist für die Standardeinstellung der WP-API erforderlich.
Bueltge
Wenn Sie den _embedParameter hinzufügen , enthält das zurückgegebene Post-Objekt alle Details zu den vorgestellten Medien und allen verfügbaren Größen. Überprüfen Sie meine Antwort für ein Beispiel.
Jesús Franco

Antworten:

18

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!

StephanieQ
quelle
2
Dies funktioniert hervorragend und hilft, dass _embed nicht verwendet werden muss, da ich nur das Bild in voller Größe verwenden möchte. Ich musste es ändern in: ($object['featured_media'], 'fullsize', false);um mir nicht die Thumbnail-URL zu geben, sondern funktioniert perfekt über functions.php - Danke!
Jordanien
1
All dieses Jonglieren mit dem RES-API-Endpunkt erinnert mich daran, warum ich GraphQL mag und dass ich die Wrapper der REST-API und neuer benutzerdefinierter Resolver fertigstellen sollte ;-) Auf jeden Fall ist es eine clevere Lösung, und tatsächlich verwende ich benutzerdefinierte Endpunkte in der Produktion, um die Daten abzurufen Ich brauche (und genau das).
Jesús Franco
Neues Plugin haben, http://mahditajik.ir/wp-json/wp/v2/media/<id>aber es hat viele zusätzliche Daten, die die Antwort langsam machen, also wie kann ich die REST-API anpassen, auf die ich reagiere?
Mahdi
1
Vielen Dank, es hat mir geholfen, meine Funktion für vorgestellte Inhalte zu beenden! : D
Atem18
1
Ich wollte Sie nur wissen lassen, dass dies meine Ladezeit um 2 Sekunden verkürzt! Vielen Dank und für Ihre sorgfältig zusammengestellte Bibliographie!
GuiHarrison
6

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.

Jesús Franco
quelle