WP REST API这个东西就是个WordPress提供的向外接口,利用它可以跨平台调用WordPress网站数据。比如使用微信小程序提供的接口可以请求WP REST API实现微信小程序得到WordPress网站数据,通过安卓程序请求接口得到数据可以将你的网站做成安卓APP,使用C#等请求接口得到数据可以将你的网站做成Windows桌面程序。不仅如此,通过这个接口,你可以各个WordPress网站间访问数据,更新数据,甚至可以实现WordPress站群功能。
WP REST API官方解释
WP REST API 是wordpress的一个插件(4.7版后自带),为wordpress提供对外标准的RESTFul接口,随着RESTFul的畅行和各种前端框架的出现,WP REST API可以让wordpress不仅仅存在WEB端,可以让wordpress不仅仅履行一个博客功能,而是可以让wordpress程序作为后台终端(BackEnd),然后以各种应用的形式实现在各种各样的设备中。
先看看我刚用WP REST API通过微信小程序得到的代码狗博客网站的前10篇文章,如下图(css没学好,写这点样式花了我大半个小时,坑!)。
实现步骤
检查你的WordPress网站是否支持WP REST API,如果不支持搜索插件安装即可,检查方法是使用浏览器访问:
你的域名/wp-json/wp/v2/posts
支持则会返回你网站的前10篇文章的json数据,不支持则提示404。
微信小程序布局wxml
<view class="excerpt" wx:for="{{wpposts}}" wx:key="unique">
<image class="focus" src="{{item.thumbnailurl}}"/>
<view>
<view>{{item.title.rendered}}
<view>{{item.excerpt.rendered}}
<view class="meta">{{item.date}}wp建站</view>
</view>微信小程序布局wxss
.excerpt{
position: relative;
width: 100%;
height: 120px;
border-bottom: 1px solid #f2f2f2;
}
.focus{
padding: 5px 5px;
float: left;
width: 110px;
height: 75px;
margin-top: 10px;
margin-bottom: 10px;
}
.title{
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 23px;
display: -webkit-box;
max-height: 46px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
padding-top: 10px
}
.note{
margin-top: 5px;
font-size: 14px;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 23px;
max-height: 46px;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.meta{
color: #bbbbbb;
font-size: 12px;
position: absolute;
bottom: 20px;
left: 110px;
}
.cag{
margin-left: 10px;
}通过wx.request方法请求数据
onLoad: function (options) {
var that = this;
wx.request({
url: '你的域名/wp-json/wp/v2/posts',
data: {
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
that.setData({
wpposts: res.data
});
console.log(res.data)
}
})
}请求得到的json数据存储在wpposts变量中,然后会被wxml文件中的wx循环解析生成一条条文章数据。
注意事项
WP REST API中并没有输出缩略图的数据,因此我们需要为WP REST API返回的数据添加缩略图地址,将下面的代码放在你的主题functions.php文件中即可支持返回缩略图地址。
add_filter( 'rest_prepare_post', 'my_rest_prepare_post', 10, 3 );
function my_rest_prepare_post( $data, $post, $request ) {
$_data = $data->data;
if ( has_post_thumbnail() ) {
$thumbnail_id = get_post_thumbnail_id( $_data['id'] );
$thumbnail = wp_get_attachment_image_src( $thumbnail_id , 'thumbnail' );
$thumbnailurl = $thumbnail[0];
$featuredimgurl = $featuredimg[0];
if( ! empty($thumbnailurl)){
$_data['thumbnailurl'] = $thumbnailurl;
}
}else{
$_data['thumbnailurl'] = null;
}
$data->data = $_data;
return $data;
}最终返回数据如下:
同样,我们还可以让返回的数据中带上文章的分类、阅读数、评论数等数据。这里就不一一举例了,参照上面输出缩略图的代码diy即可,下一章我们再来看看文章详情页的微信小程序代码吧!







评论 (8)
But, think on this, suppose you composed a catchier title?
I ain't saying your content is not good., but suppose you added something that grabbed a person's
attention? I mean 利用WP REST API接口实现微信小程序调用WordPress数据-代码狗 is kinda boring.
You ought to glance at Yahoo's home page and watch how they write post titles
to get viewers to open the links. You might add a video or a related picture
or two to grab people excited about everything've
written. In my opinion, it could make your posts a little livelier.