WP Rest API: perincian pos terbaru termasuk url media unggulan dalam satu permintaan?

Saya menggunakan api wp-rest untuk mendapatkan informasi posting. Saya juga menggunakan item filter api sisa wp untuk memfilter bidang dan merangkum hasilnya:

Ketika saya menyebutnya http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediamengembalikan hasil seperti ini:

[

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

]

Pertanyaannya adalah bagaimana saya bisa menghasilkan url media unggulan menggunakan id ini? Secara default panggilan http://example.com/wp-json/wp/v2/media/401mengembalikan json baru yang memiliki semua detail tentang url berbagai ukuran gambar sumber:

{

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

}

Tapi pertimbangkan kasusnya ketika saya ingin mendapatkan daftar posting dan thumbnail mereka. Suatu kali saya harus menelepon http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediamaka saya harus menelepon http://example.com/wp-json/wp/v2/media/id10 kali untuk setiap id media dan kemudian menguraikan hasilnya dan mendapatkan url akhir dari thumbnail media. Jadi perlu 11 permintaan untuk mendapatkan rincian 10 posting (satu untuk daftar, 10 untuk thumbnail). Apakah mungkin mendapatkan hasil ini dalam satu permintaan?

Ah saya sendiri punya masalah ini! Dan sementara _embedhebat, dalam pengalaman saya sangat lambat, dan titik JSON harus cepat: D

Saya memiliki kode berikut dalam sebuah plugin (digunakan untuk menambahkan jenis posting khusus), tapi saya kira Anda bisa memasukkannya ke function.phpfile tema Anda .

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

Sekarang dalam respons JSON Anda, Anda akan melihat bidang baru yang disebut "featured_image_src":mengandung url ke thumbnail.

Baca lebih lanjut tentang memodifikasi respons di sini:
http://v2.wp-api.org/extending/modifying/

Dan inilah informasi lebih lanjut tentang register_rest_fielddan wp_get_attachment_image_src()fungsinya:
1.) https://developer.wordpress.org/reference/functions/register_rest_field/
2.) https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

** Catatan: Jangan lupa <?php ?>tag jika ini adalah file php baru!

Cukup tambahkan _embedargumen kueri ke URL Anda yang meminta posting, dan setiap objek posting, akan menyertakan _embedded.[wp:featuredmedia]objek, yang mencakup semua gambar, seperti /media/$idsumber daya. Jika Anda menginginkan ukuran tertentu, cukup akses dengan nama propertinya, yaitu: _embedded[wp:featuredmedia][0].media_details.sizes.full.source_urlatau untuk thumbnail-nya:_embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

Artinya, objek tertanam media wp: Featuredmedia mencakup semua URL dan detail untuk setiap ukuran yang tersedia untuk posting Anda, tetapi jika Anda hanya menginginkan gambar fitur asli, Anda dapat menggunakan nilai dalam kunci ini: post._embedded["wp:featuredmedia"][0].source_url

Saya menggunakannya di situs dengan sesuatu seperti ini (tentu saja, gunakan domain Anda sendiri):

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

Lihat? Tidak perlu dua kueri, cukup tambahkan _embedsebagai argumen kueri, dan kemudian Anda memiliki semua informasi yang Anda butuhkan untuk menggunakan ukuran terbaik untuk tampilan Anda.