WP Rest API + 각도JS : 페이지에 표시할 Feature Image를 캡처하는 방법

WP Rest API + 각도JS : 페이지에 표시할 Feature Image를 캡처하는 방법

HTTP REST API 플러그인(이 워드프레스 플러그인: http://v2.wp-api.org/))을 통해 Wordpress 데이터에 액세스하고 있습니다.투고 제목을 취득하는 방법은 알고 있습니다만, 이 플러그인을 사용하여 그 투고와 관련된 특집 이미지를 표시하는 방법은 무엇입니까?테스트에서는 투고 제목과 특집 이미지 ID가 표시되지만 실제 이미지 표시 방법을 알 수 없습니다.테스트 예시

제 코드는 다음과 같습니다.

    <div ng-app="myApp">
    <div ng-controller="Ctrl">
        <div ng-repeat="post in posts | limitTo: 1">
            <h2 ng-bind-html="post.title.rendered"></h2>

            <p>{{ post.featured_image }}</p>

        </div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.min.js"></script>

<script>

var app = angular.module('myApp', ['ngSanitize']);
    app.controller('Ctrl', function($http, $scope) {
        $http.get("http://ogmda.com/wp/wp-json/wp/v2/posts").success(function(data) {
        $scope.posts = data;
    });
});

</script>

특집 이미지 응답을 얻으려면 쿼리 문자열에 _embed를 추가하십시오.예:

http://demo.wp-api.org/wp-json/wp/v2/posts/?_http://filename?

그런 다음 _embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url을 사용하여 반환된 JSON 응답에 있는 주요 이미지에 액세스합니다.

var app = angular.module('myApp', ['ngSanitize']);
    app.controller('Ctrl', function($http, $scope) {
        $http.get("http://ogmda.com/wp/wp-json/wp/v2/posts?_embed").success(function(data) {
        $scope.posts = data;

        var firstFeaturedImageUrl = $scope.posts[0]._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
    });
});

더 좋은 방법은 하나의 요청으로 모든 것을 얻을 수 있도록 특집 이미지의 URL을 json 응답에 통합하는 것입니다.이를 위해 다음 코드를 추가할 수 있습니다(테마/기능.php 내부).

//Get image URL
function get_thumbnail_url($post){
    if(has_post_thumbnail($post['id'])){
        $imgArray = wp_get_attachment_image_src( get_post_thumbnail_id( $post['id'] ), 'full' ); // replace 'full' with 'thumbnail' to get a thumbnail
        $imgURL = $imgArray[0];
        return $imgURL;
    } else {
        return false;
    }
}
//integrate with WP-REST-API
function insert_thumbnail_url() {
     register_rest_field( 'post',
                          'featured_image',  //key-name in json response
                           array(
                             'get_callback'    => 'get_thumbnail_url',
                             'update_callback' => null,
                             'schema'          => null,
                             )
                         );
     }
//register action
add_action( 'rest_api_init', 'insert_thumbnail_url' );

그러면 뷰에서{{ post.featured_image }}

주의: 다른 크기의 동일한 이미지를 가져오려면 위의 wp_get_attachment_image_src 함수를 사용합니다.이 함수는 유효한 이미지 크기를 받아들이거나 픽셀 단위의 폭과 높이 값의 배열을 두 번째 파라미터로 사용합니다.

아주 쉬운 방법을 찾았어요

Better Rest API Feature Image라는 새로운 Wordpress 플러그인을 다운로드하기만 하면 됩니다.이 플러그인은 사용 가능한 이미지 크기와 URL을 포함하는 게시 개체에 better_featured_image 필드를 추가하여 두 번째 요청 없이 이 정보를 얻을 수 있도록 합니다.

교환할 수 있습니다.<p>{{ post.featured_image }}</p>이와 함께.<img ng-src="{{post.better_featured_image.source_url}}" />

언급URL : https://stackoverflow.com/questions/33320227/wp-rest-api-angularjs-how-to-grab-featured-image-for-display-on-page