2

我正在构建一个相对简单的博客页面，它使用 WP Rest Api 和 AngularJs 在前端显示数据。

在我的主页上，我想返回标题，然后是特色图片，然后是摘录。我已经很好地提取了标题和摘录，似乎在 JSON 中，特色图像是一个媒体 ID。动态提取这些数据的最佳方法是什么？

我在互联网上看到了各种使用 PHP 函数的东西，但我认为最好的方法是在角度控制器中，只是寻找一些关于控制器到底是什么的建议

列表视图 HTML

<ng-include src=" dir + '/form.html?v=2' "></ng-include>
<div class="row">
    <div class="col-sm-8 col-lg-10 col-lg-push-1 post">         
        <div class="row-fluid">
            <div class="col-sm-12">
                <article ng-repeat="post in posts" class="projects">
                    <a class="title" href="#/post/{{post.slug}}"><h2>{{post.title.rendered}}</h2></a>
                    <p ng-bind-html="post.excerpt.rendered | to_trusted"></p>
                </article>
            </div>
        </div>
    </div>
</div>

控制器

.controller('listPage',['$scope','Posts', function($scope,Posts){

    $scope.refreshPosts = function(){
        Posts.query(function(res){
            $scope.posts = res;
        });
    };
    $scope.refreshPosts();

    // CLEARFORMFUNCTION
    $scope.clear = function(){
        $scope.$root.openPost = false;
        jQuery('#save').modal('hide');
    };


    // SAVEMODALOPEN/COSE
    $scope.openSaveModal = function(){
        jQuery('#save').modal('show');
    }

    $scope.closeSaveModal = function(){
        jQuery('#save').modal('hide');
    }

    // DATEFUNCTION
    $scope.datify = function(date){
        $scope.date = newDate(date);
        return $scope.date.getDate()+'/'+$scope.date.getMonth()+'/'+$scope.date.getYear();
    };
}])
4

3 回答 3

6

您还可以使用 PHP 修改 JSON 响应。这正是我需要的，而且速度非常快（根据_embed我的经验，使用速度非常慢）

我在插件中有以下代码（用于添加自定义帖子类型），但我想你可以把它放在你的主题function.php文件中。

php

add_action( 'rest_api_init', 'add_thumbnail_to_JSON' );
function add_thumbnail_to_JSON() {
//Add featured image
register_rest_field( 'post',
    'featured_image_src', //NAME OF THE NEW FIELD TO BE ADDED - you can call this anything
    array(
        'get_callback'    => 'get_image_src',
        'update_callback' => null,
        'schema'          => null,
         )
    );
}

function get_image_src( $object, $field_name, $request ) {
    $size = 'thumbnail'; // Change this to the size you want | 'medium' / 'large'
    $feat_img_array = wp_get_attachment_image_src($object['featured_media'], $size, true);
    return $feat_img_array[0];
}

现在，在您的 JSON 响应中，您应该会看到一个名为"featured_image_src":包含缩略图 url 的新字段。

在此处阅读有关修改响应的更多信息：http:
//v2.wp-api.org/extending/modifying/

这里有更多关于wp_get_attachment_image_src()函数 https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/的信息

<?php ?>**注意：如果这是一个新的 php 文件，请不要忘记标签！

于 2016-12-19T20:33:45.437 回答
3

事实证明，在我的情况下，有一个新的插件可以解决这个问题，而无需提出二次请求。看我最近的Q：

WP Rest API + AngularJS：如何获取特色图片以显示在页面上？

于 2015-10-24T16:24:11.117 回答
3

如果您将?_embed参数发送到查询，它将在响应中返回更多信息，例如图像、类别和作者数据。

const result = await axios.get(`/wp-json/wp/v2/my-post-type?_embed`);

// Featured Image
result.data._embedded['wp:featuredmedia'][0].source_url;

// Thumbnail
result.data._embedded['wp:featuredmedia'][0]['media_details']['sizes']['medium']['source_url']
于 2020-02-26T14:36:56.840 回答