WP Rest API: detalii despre ultimul articol, inclusiv URL-ul media reprezentativ într-o singură cerere?

2 oct. 2016, 16:29:58
Vizualizări: 33.4K
Voturi: 19

Folosesc wp-rest api pentru a obține informații despre articole. De asemenea, folosesc filtrarea elementelor din wp rest api pentru a filtra câmpurile și a simplifica rezultatul:

Când apelez http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media returnează rezultate ca acestea:

[

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

]

Întrebarea este cum pot genera URL-ul media reprezentativ folosind acest id? În mod implicit, apelarea http://example.com/wp-json/wp/v2/media/401 returnează un nou json care conține toate detaliile despre URL-urile diferitelor dimensiuni ale imaginii sursă:

{

    "id": 401,
    "date": "2016-06-03T17:29:09", 
    "date_gmt": "2016-06-03T17:29:09",
    "guid": {
        "rendered": "http://example.com/wp-content/uploads/nume-imagine.png"
    },
    "modified": "2016-06-03T17:29:09",
    "modified_gmt": "2016-06-03T17:29:09",
    "slug": "nume-imagine",
    "type": "attachment",
    "link": "http://example.com/url-articol",
    "title": {
        "rendered": "nume-imagine"
    },
    "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": "nume-imagine.png",
        "sizes": {
            "thumbnail": {
                "file": "nume-imagine-150x150.png",
                "width": 150,
                "height": 150,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine-150x150.png"
            },
            "medium": {
                "file": "nume-imagine-300x136.png",
                "width": 300,
                "height": 136,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine-300x136.png"
            },
            "one-paze-port-thumb": {
                "file": "nume-imagine-363x250.png",
                "width": 363,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine-363x250.png"
            },
            "one-paze-blog-thumb": {
                "file": "nume-imagine-270x127.png",
                "width": 270,
                "height": 127,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine-270x127.png"
            },
            "one-paze-team-thumb": {
                "file": "nume-imagine-175x175.png",
                "width": 175,
                "height": 175,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine-175x175.png"
            },
            "one-paze-testimonial-thumb": {
                "file": "nume-imagine-79x79.png",
                "width": 79,
                "height": 79,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine-79x79.png"
            },
            "one-paze-blog-medium-image": {
                "file": "nume-imagine-380x250.png",
                "width": 380,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine-380x250.png"
            },
            "full": {
                "file": "nume-imagine.png",
                "width": 550,
                "height": 250,
                "mime_type": "image/png",
                "source_url": "http://example.com/wp-content/uploads/nume-imagine.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/nume-imagine.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"
            }
        ]
    }

}

Dar să luăm în considerare cazul în care vreau să obțin lista articolelor și miniaturile lor. Mai întâi trebuie să apelez http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media apoi trebuie să apelez http://example.com/wp-json/wp/v2/media/id de 10 ori pentru fiecare id media și apoi să analizez rezultatele și să obțin URL-ul final al miniaturii media. Deci necesită 11 cereri pentru a obține detaliile a 10 articole (una pentru listă, 10 pentru miniaturi). Este posibil să obțin aceste rezultate într-o singură cerere?

4
Comentarii

Ai înregistrat un câmp nou pentru răspunsul tău cu register_rest_field?

Benoti Benoti
2 oct. 2016 17:34:12

@Benoti Voi verifica documentația. Dacă voi avea alte întrebări, voi reveni la tine :)

VSB VSB
2 oct. 2016 19:44:28

Corect, nu ai data imaginii în cererea post, doar ID-ul media featured și este necesară o nouă cerere pe endpoint-ul implicit al WP API.

bueltge bueltge
3 oct. 2016 12:18:09

Dacă adaugi parametrul _embed, obiectul post returnat include toate detaliile despre media asociată și toate dimensiunile disponibile ale acesteia. Verifică răspunsul meu pentru un exemplu.

Jesús Franco Jesús Franco
3 oct. 2016 23:53:45
Toate răspunsurile la întrebare 3
5
29

Ah, tocmai am avut și eu această problemă! Și deși _embed este grozav, în experiența mea este foarte lent, iar scopul JSON-ului este să fie rapid :D

Am următorul cod într-un plugin (folosit pentru a adăuga tipuri personalizate de postări), dar presupun că l-ați putea pune în fișierul function.php al temei.

php

add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Adaugă imaginea reprezentativă
register_rest_field( 
    'post', // Unde se adaugă câmpul (Aici, postări de blog. Poate fi un array)
    'featured_image_src', // Numele noului câmp (Puteți numi acest câmp oricum)
    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'], // ID-ul atașamentului imaginii
    'thumbnail',  // Dimensiune. Ex. "thumbnail", "large", "full", etc..
    true // Dacă imaginea ar trebui tratată ca o pictogramă.
  );
  return $feat_img_array[0];
}

Acum, în răspunsul JSON ar trebui să vedeți un nou câmp numit "featured_image_src": care conține un URL către imaginea în miniatură.

Citiți mai multe despre modificarea răspunsurilor aici:
http://v2.wp-api.org/extending/modifying/

Și aici sunt mai multe informații despre funcțiile register_rest_field și 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/

**Notă: Nu uitați de tag-urile <?php ?> dacă acesta este un nou fișier php!

19 dec. 2016 22:17:55
Comentarii

Această soluție funcționează excelent și ajută la faptul că nu este nevoie să folosesc _embed, deoarece vreau doar imaginea featured la dimensiunea completă. A trebuit să o modific în: ($object['featured_media'], 'fullsize', false); pentru a nu obține URL-ul thumbnail-ului, dar funcționează perfect prin fișierul functions.php -- Mulțumesc!

Jordan Jordan
4 dec. 2017 02:41:00

Toată această jonglerie cu punctul final al API-ului REST îmi amintește de ce îmi place GraphQL și că ar trebui să finalizez wrapper-ele pentru REST API și noii rezolvers personalizați ;-) Oricum, este o soluție inteligentă și, de fapt, folosesc puncte finale personalizate în producție pentru a obține doar datele de care am nevoie.

Jesús Franco Jesús Franco
4 dec. 2017 18:20:23

Noul plugin are http://mahditajik.ir/wp-json/wp/v2/media/<id> dar conține multe date suplimentare care încetinesc răspunsul, așadar cum pot personaliza răspunsul API-ului REST?

Mahdi Mahdi
11 apr. 2018 18:19:41

Mulțumesc mult, m-a ajutat să finalizez funcționalitatea de conținut recomandat! :D

Atem18 Atem18
27 iun. 2018 20:17:51

Voiam doar să-ți spun că asta a redus timpul de încărcare cu 2 secunde! Mulțumesc foarte mult și pentru bibliografia atent selectată!

GuiHarrison GuiHarrison
12 feb. 2019 21:53:26
0
11

Doar adaugă argumentul de interogare _embed în URL-ul tău pentru a cere postările, iar fiecare obiect post va include obiectul _embedded.[wp:featuredmedia], care conține toate imaginile, exact ca resursa /media/$id. Dacă dorești o dimensiune specifică, acceseaz-o prin numele proprietății, de exemplu: _embedded[wp:featuredmedia][0].media_details.sizes.full.source_url sau pentru thumbnail: _embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

Adică, obiectul încorporat wp:featuredmedia include toate URL-urile și detaliile pentru fiecare dimensiune disponibilă pentru postarea ta, dar dacă vrei doar imaginea reprezentativă originală, poți folosi valoarea din această cheie: post._embedded["wp:featuredmedia"][0].source_url

Eu o folosesc pe un site cu ceva de genul acesta (folosește, desigur, propriul tău domeniu):

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

Vezi? Nu este nevoie de două interogări, doar adaugă _embed ca argument de interogare, și apoi ai toate informațiile necesare pentru a folosi cea mai bună dimensiune pentru vizualizarea ta.

3 oct. 2016 23:49:40
0

Adăugând &_embed la URL-ul tău va adăuga wp:featuremedia în JSON-ul tău chiar dacă ai postări personalizate, Exemplu:

https://example.com/wp-json/wp/v2/posts?search=TitlulPostării&_embed&order=asc
4 nov. 2020 15:42:03