7

我正在通过 HTTP REST API 插件（此 wordpress 插件：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>
4

4 回答 4

9

要获得特色图像响应，请在查询字符串中添加_embed 。例子：

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

然后，使用_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;
    });
});
于 2017-07-12T14:36:43.027 回答
5

更好的方法是将特色图像的 URL 集成到 json 响应中，这样您就可以在一个请求中获得所有内容。您可以添加以下代码（在 your-theme/functions.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函数，该函数接受任何有效的图像大小，或以像素为单位的宽度和高度值数组作为其第二个参数。

于 2016-07-04T21:38:59.880 回答
0

你可以 <p>{{ post.featured_image }}</p>用这个替换<img ng-src="{{post.better_featured_image.source_url}}" />

于 2015-10-24T16:30:41.103 回答
0

我找到了一个非常简单的方法来做到这一点。

只需下载名为Better Rest API Featured Image的新 Wordpress 插件。此插件会在包含可用图像大小和 url 的帖子对象中添加一个 better_featured_image 字段，让您无需再次请求即可获取此信息。

于 2015-10-24T16:22:45.460 回答