前言

本教程为教你怎么用WordPress开发一个属于你自己的app(小程序)

前面我们用uni-app框架写好了首页幻灯片，现在我开始讲解怎么样从服务端获取幻灯片数据，这里就获取三篇文章的缩略图用来当做幻灯片，之后点击了跳转文章详情页面。

这里我们将使用我们自己做的WP模板进行开发，还没有创建好自己的WP模板的可以参考这篇文章：开发一个简单的WordPress主题

前期准备

常规的来说，我们应该在WP后台添加一个设置幻灯片的功能，但这种方式并不是唯一的解决方案。比如我们这里只需要获取三篇文章的缩略图用来当作幻灯片，所以这里我们只需要创建三篇文章，并且配置上文章缩略图就行了。

需要注意的是在创建文章的时候你会发现，在右边工具栏中并没有设置缩略图的功能选择项。那是因为我们现在是使用自己制作的WP模板，而WP是默认关闭了这项功能的，所以需要在我们的WP模板中开启这项功能。

开启缩略图步骤：

1、在自制WP模板中新建文件：functions.php(WP默认公共函数文件)

2、在该文件中写入以下代码：

<?php //开启缩略图add_theme_support( 'post-thumbnails' ); 

3、保存，上传至服务器。此刻你再次打开写文章界面就可以看到缩略图设置项了，如图：

创建文章并置顶

缩略图开启之后我们继续创建我们需要的三篇文章，因为这里的文章是幻灯片文章，为了区别于其他文章，我们这里可以将这三篇文章置顶，后期只需要查询置顶的文章用来当作幻灯片就行了。

置顶文章步骤：

1、在WP后头的所有文章中，鼠标移入文章标题上面，点击快速编辑：

2、在显示出来的快速编辑中选中置顶这篇文章，然后点击更新：

三篇文章置顶之后效果如下：

编写代码

前面我们已经创建好了三篇幻灯片文章，现在我们编写代码来获取这三个幻灯片文章。

1、在自制模板根目录下面创建api文件夹：

2、在该文件夹下面新建php文件，文件名自定义，这里我创建的是homeSlide.php：

3、在新建的文件中编写代码如下：

<?phpheader ('Access-Control-Allow-Headers:x-requested-with,content-type'); //引入WP加载文件，引入之后就可以使用WP的所有函数 require( '../../../../wp-load.php' );//定义返回数组，默认先为空$data=[];// 使用wp的查询文章函数查询出三篇幻灯片文章// 1、定义查询条件$args = array( 'post_type'=>'post', //查询文章类型'post_status'=>'publish', //查询文章状态'post__in' => get_option('sticky_posts'),//确定调用的是置顶文章列表'caller_get_posts' => 1);// 2、开始查询文章query_posts($args);if (have_posts()){ //如果查询出来了文章// 定义接收文章数据的数组$posts=[];// 循环文章数据while ( have_posts() ) : the_post();// 获取文章id$post_id=get_the_ID();// 定义单条文章所需要的数据$list=["id"=>$post_id, //文章id"title"=>get_the_title(), //文章标题"img"=>get_the_post_thumbnail_url() //文章缩略图];// 将每一条数据分别添加进$postsarray_push($posts,$list);endwhile;// 定义返回值$data['code']=200;$data['msg']="查询数据成功！";$data['post']=$posts;}else {// 如果没有文章$data['code']=404;$data['msg']="没有相关文章";$data['post']=[];}// 输入json数据格式print_r(json_encode($data));?>

4、保存，将主题重新上传，这时用绝对路径访问这个文件应该会在浏览器中显示一堆json数据，如图(我在谷歌浏览器中安装了json解析插件)：

总结

至此幻灯片接口就开发完成了，这里主要用了WP的查询文章函数，如果有不懂的，建议百度了解一下。毫不夸张的说，如果你能把这个玩转你就可以做出任何你想要的功能！

在下一节中我将讲解怎么将这些数据渲染到app上面。

点击下面的链接你将获取源代码仓库地址。