WP Rest API: chi tiết của bài đăng mới nhất bao gồm url phương tiện nổi bật trong một yêu cầu?

Tôi đang sử dụng api wp-rest để lấy thông tin bài viết. Tôi cũng sử dụng các mục bộ lọc api wp rest để lọc các trường và tóm tắt kết quả:

Khi tôi gọi http://example.com/wp-json/wp/v2/posts?items=id,title,featured_medianó sẽ trả về kết quả như thế này:

[

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

]

Câu hỏi là làm thế nào tôi có thể tạo url phương tiện đặc trưng bằng cách sử dụng id này? Theo mặc định, cuộc gọi http://example.com/wp-json/wp/v2/media/401trả về một json mới có tất cả các chi tiết về url có kích thước khác nhau của hình ảnh nguồn:

{

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

}

Nhưng hãy xem xét trường hợp khi tôi muốn nhận danh sách bài viết và hình thu nhỏ của họ. Một lần tôi nên gọi http://example.com/wp-json/wp/v2/posts?items=id,title,featured_mediathì tôi nên gọi http://example.com/wp-json/wp/v2/media/id10 lần cho mỗi id phương tiện và sau đó phân tích kết quả và nhận url cuối cùng của hình thu nhỏ phương tiện. Vì vậy, nó cần 11 yêu cầu để có được thông tin chi tiết của 10 bài đăng (một cho danh sách, 10 cho hình thu nhỏ). Có thể nhận được kết quả này trong một yêu cầu?

Ah tôi chỉ có vấn đề này bản thân mình! Và mặc dù _embedrất tuyệt, nhưng theo kinh nghiệm của tôi thì nó rất chậm và quan điểm của JSON là phải nhanh: D

Tôi có đoạn mã sau trong một plugin (được sử dụng để thêm các loại bài đăng tùy chỉnh), nhưng tôi tưởng tượng bạn có thể đặt nó trong function.phptệp chủ đề của mình .

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

Bây giờ trong phản hồi JSON của bạn, bạn sẽ thấy một trường mới gọi là "featured_image_src":chứa url đến hình thu nhỏ.

Đọc thêm về sửa đổi câu trả lời tại đây:
http://v2.wp-api.org/extending/modifying/

Và đây là thêm thông tin về register_rest_fieldvà wp_get_attachment_image_src()chức năng:
1.) https://developer.wordpress.org/reference/functions/register_rest_field/
2.) https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

** Lưu ý: Đừng quên <?php ?>thẻ nếu đây là tệp php mới!

Chỉ cần thêm _embedđối số truy vấn vào URL của bạn yêu cầu bài đăng và mọi đối tượng bài đăng, sẽ bao gồm _embedded.[wp:featuredmedia]đối tượng, bao gồm tất cả các hình ảnh, giống như /media/$idtài nguyên. Nếu bạn muốn có một kích thước cụ thể, chỉ cần truy cập nó bằng tên thuộc tính của nó, tức là: _embedded[wp:featuredmedia][0].media_details.sizes.full.source_urlhoặc cho hình thu nhỏ của nó:_embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

Đó là, đối tượng nhúng wp: Featuremedia bao gồm tất cả các URL và chi tiết cho mọi kích thước có sẵn cho bài đăng của bạn, nhưng nếu bạn chỉ muốn hình ảnh nổi bật ban đầu, bạn có thể sử dụng giá trị trong khóa này: post._embedded["wp:featuredmedia"][0].source_url

Tôi sử dụng nó trong một trang web với cái gì đó như thế này (tất nhiên là sử dụng tên miền của riêng bạn):

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

Xem? Không cần hai truy vấn, chỉ cần thêm _embedlàm đối số truy vấn và sau đó bạn có tất cả thông tin bạn cần để sử dụng kích thước tốt nhất cho chế độ xem của mình.