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

15

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?

plugins  filters  json  rest-api 
— VSB
sumber
1
Apakah Anda mendaftarkan bidang baru untuk respons Anda dengan register_rest_field?
— Benoti
@Benoti Saya akan memeriksa dokumentasinya. Jika ada lebih banyak hal untuk ditanyakan, saya akan kembali kepada Anda :)
— VSB
Benar, Anda tidak memiliki tanggal gambar dalam permintaan posting, hanya ID dari media yang ditampilkan dan permintaan baru diperlukan pada default WP API.
— bueltge
Jika Anda menambahkan _embedparameter, objek posting yang dikembalikan mencakup semua detail tentang media unggulan dan semua ukurannya yang tersedia. Lihat respons saya untuk contoh.
— Jesús Franco

Jawaban:

18

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!

— StephanieQ
sumber
2
Ini berfungsi dengan baik dan membantu _embed tidak perlu digunakan karena saya hanya ingin gambar berfitur lengkap. Saya memang harus mengubahnya ke: ($object['featured_media'], 'fullsize', false);untuk tidak memberi saya url thumbnail, tetapi berfungsi dengan baik melalui functions.php - Terima kasih!
— Jordan
1
Semua juggling ini dengan titik akhir RES API mengingatkan saya mengapa saya suka GraphQL dan bahwa saya harus menyelesaikan pembungkus REST API dan penyelesai kustom baru ;-) Bagaimanapun, ini adalah solusi cerdas dan sebenarnya saya menggunakan titik akhir khusus dalam produksi untuk mendapatkan data Saya membutuhkan (dan hanya itu).
— Jesús Franco
Plugin baru memiliki http://mahditajik.ir/wp-json/wp/v2/media/<id>tetapi memiliki banyak data tambahan yang membuat respons lambat jadi bagaimana saya dapat menyesuaikan REST api merespon dto?
— Mahdi
1
Terima kasih banyak, ini membantu saya untuk menyelesaikan fitur konten unggulan saya! : D
— Atem18
1
Saya hanya ingin memberi tahu Anda bahwa ini 2 detik dari waktu pemuatan saya! Terima kasih banyak dan untuk daftar pustaka yang telah dikuratori dengan cermat!
— GuiHarrison
7

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.

— Jesús Franco
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.