WP Rest API : 한 번의 요청으로 추천 미디어 URL을 포함한 최신 게시물의 세부 사항?


15

내가 사용하고 WP-나머지 API를 게시물의 정보를 얻을 수 있습니다. 또한 wp rest api 필터 항목 을 사용하여 필드를 필터링하고 결과를 요약합니다.

전화 http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media하면 다음과 같은 결과가 반환됩니다.

[

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

]

문제는이 ID를 사용하여 추천 미디어 URL을 생성하는 방법입니다. 기본적으로 호출 http://example.com/wp-json/wp/v2/media/401하면 다른 크기의 소스 이미지 URL에 대한 모든 세부 정보가 포함 된 새 json이 반환됩니다.

{

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

}

그러나 게시물 목록과 미리보기 이미지를 얻으려는 경우를 고려하십시오. 한 번 전화를 http://example.com/wp-json/wp/v2/posts?items=id,title,featured_media한 다음 http://example.com/wp-json/wp/v2/media/id각 미디어 ID에 대해 10 번을 호출 한 다음 결과를 구문 분석하고 미디어 축소판의 최종 URL을 가져와야합니다. 따라서 10 개의 게시물에 대한 세부 정보를 얻으려면 11 개의 요청이 필요합니다 (목록은 하나, 섬네일은 10 개). 한 번의 요청으로이 결과를 얻을 수 있습니까?


1
register_rest_field 응답으로 새 필드를 등록 했습니까?
Benoti

@ Benoti 나는 문서를 확인할 것입니다. 더 많은 질문이 있으면 다시 연락 드리겠습니다 :)
VSB

게시 요청에 이미지 날짜가 없으며 WP API의 기본값에는 추천 미디어의 ID와 새 요청이 필요합니다.
bueltge

_embed매개 변수 를 추가하면 반환 된 포스트 오브젝트에 주요 매체 및 사용 가능한 모든 크기에 대한 모든 세부 사항이 포함됩니다. 예를 들어 내 응답을 확인하십시오.
Jesús Franco

답변:


18

아 나는 방금이 문제를 직접했다! 그리고 _embed훌륭하지만 내 경험상 매우 느리고 JSON의 요점은 빠릅니다.

플러그인 (사용자 정의 게시물 유형을 추가하는 데 사용)에 다음 코드가 있지만 테마 function.php파일 에 넣을 수 있다고 생각 합니다.

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

이제 JSON 응답 "featured_image_src":에서 썸네일에 대한 URL을 포함하는 새 필드가 표시 됩니다.

응답 수정에 대한 자세한 내용은 http://v2.wp-api.org/extending/modifying/에서 확인 하십시오.

그리고 기능 에 대한 자세한 내용은 다음 register_rest_fieldwp_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/

** 참고 : <?php ?>새 PHP 파일 인 경우 태그를 잊지 마십시오 !


2
이것은 전체 크기의 기능을 갖춘 이미지 만 원하므로 _embed를 사용할 필요가 없습니다. : 나는 그것을 변경해야 않았다 ($object['featured_media'], 'fullsize', false);썸네일 URL을 나에게주지하는 것이 아니라 완벽하게 작동을 통해 functions.php --Thanks!
Jordan

1
RES API 엔드 포인트로이 모든 저글링은 GraphQL을 좋아하는 이유와 REST API 및 새로운 커스텀 리졸버 래퍼를 마무리해야한다는 것을 상기시켜줍니다. 나는 (그리고 단지) 필요합니다.
Jesús Franco

새로운 플러그인이 http://mahditajik.ir/wp-json/wp/v2/media/<id>있지만 응답을 느리게하는 추가 데이터가 많으므로 REST API 응답 dto를 사용자 정의하는 방법은 무엇입니까?
Mahdi

1
고마워, 그것은 내가 특색 지어진 내용 기능을 끝내는 것을 도왔다! : D
Atem18 2016 년

1
로드 시간이 2 초로 단축되었음을 알려 드리고자합니다. 엄선 된 참고 문헌 목록에 감사드립니다.
GuiHarrison

7

_embed게시물을 요청 하는 쿼리 인수를 URL에 추가하면 모든 게시물 개체 _embedded.[wp:featuredmedia]/media/$id리소스 와 마찬가지로 모든 이미지 가 포함 된 개체 가 포함 됩니다. 특정 크기를 원하면 속성 이름, 즉 _embedded[wp:featuredmedia][0].media_details.sizes.full.source_url축소판으로 액세스하십시오 ._embedded[wp:featuredmedia][0].media_details.sizes.thumbnail.source_url

즉, wp : featuredmedia 내장 객체에는 게시물에 사용 가능한 모든 크기에 대한 모든 URL과 세부 정보가 포함되지만 원본 추천 이미지 만 원하는 경우이 키의 값을 사용할 수 있습니다. post._embedded["wp:featuredmedia"][0].source_url

나는 다음과 같은 사이트에서 그것을 사용합니다 (물론 자신의 도메인을 사용하십시오) :

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

보다? 두 개의 쿼리에 대한 필요, 그냥 추가하지 _embed쿼리 인수로, 그리고 당신은 당신이보기에 가장 적합한 크기를 사용하는 데 필요한 모든 정보가 있습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.