WP Rest API 获取特色图片
WP Rest API Get Featured Image
我正在构建一个相对简单的博客页面,它使用 WP Rest Api 和 AngularJs 来显示 front-end 上的数据。
在我的主页上,我想 return 标题,然后是特色图片,然后是摘录。我已经很好地提取了标题和摘录,似乎在 JSON 中,特色图像是一个媒体 ID。动态提取这些数据的最佳方式是什么?
我在互联网上看到过各种使用 PHP 函数的东西,但我认为最好的方法是在 angular 控制器中,只是寻找一些关于控制器到底是什么的建议会是
列表视图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();
};
}])
事实证明,就我而言,有一个可用的新插件可以解决此问题,而无需发出二次请求。查看我最近的问题:
您还可以使用 PHP 修改 JSON 响应。这个 returns 正是我所需要的,而且速度非常快(根据我的经验,使用 _embed
非常慢)
我在插件中有以下代码(用于添加自定义 post 类型),但我想您可以将其放入主题的 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 ?>
标签!
如果您将 ?_embed
参数发送到查询,它将 return 响应中的更多信息,例如图像、类别和作者数据。
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']
我正在构建一个相对简单的博客页面,它使用 WP Rest Api 和 AngularJs 来显示 front-end 上的数据。
在我的主页上,我想 return 标题,然后是特色图片,然后是摘录。我已经很好地提取了标题和摘录,似乎在 JSON 中,特色图像是一个媒体 ID。动态提取这些数据的最佳方式是什么?
我在互联网上看到过各种使用 PHP 函数的东西,但我认为最好的方法是在 angular 控制器中,只是寻找一些关于控制器到底是什么的建议会是
列表视图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();
};
}])
事实证明,就我而言,有一个可用的新插件可以解决此问题,而无需发出二次请求。查看我最近的问题:
您还可以使用 PHP 修改 JSON 响应。这个 returns 正是我所需要的,而且速度非常快(根据我的经验,使用 _embed
非常慢)
我在插件中有以下代码(用于添加自定义 post 类型),但我想您可以将其放入主题的 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 ?>
标签!
如果您将 ?_embed
参数发送到查询,它将 return 响应中的更多信息,例如图像、类别和作者数据。
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']