WordPress开发

用WordPress编写app幻灯片接口

概述

本教程为《用WordPress与uni-app开发,包含所有源代码》系列教程之一。

全功能WordPress API接口工具已出

全功能WordPress API接口工具已出只为前端开发者的你设计,详情查看:Sliver Rest Wp api:全功能的WordPress api工具

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

前期准备

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

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

开启缩略图步骤:

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

此图像的alt属性为空;文件名为image-23.png

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

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

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

此图像的alt属性为空;文件名为image-24.png

创建文章并置顶

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

置顶文章步骤:

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

此图像的alt属性为空;文件名为image-25.png

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

此图像的alt属性为空;文件名为image-26.png

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

此图像的alt属性为空;文件名为image-27.png

编写代码

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

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

此图像的alt属性为空;文件名为image-28.png

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

此图像的alt属性为空;文件名为image-29.png

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

<?php
header('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() //文章缩略图
		];
		// 将每一条数据分别添加进$posts
		array_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数据(我的地址:http://appblog.inacorner.top/wp-content/themes/wpApp/api/homeSlide.php),如图(我在谷歌浏览器中安装了json解析插件):

此图像的alt属性为空;文件名为image-31.png

总结

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

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

代码仓库: https://github.com/sliverRing/uniApp-WPApp

用WordPress与uni-app开发,包含所有源代码 用WordPress与uni-app开发,包含所有源代码 引言 废话不多说这套系列的教程就是教你怎么将自己现有的WP网站做成一个app或者小程序 技术栈要求 需要声明的是,在这套教程之中,因为精力有限的关系,我不负责任何前端页面的设计以及开发,只讲前端... 2019-6-14 5862 0

QQ交流群: 824144151

此为本站官方星球,加入此星球可以获得以下专属权利:

  1. 得到官方任何WordPress方面的问题解答(包括WordPress建站疑问、WordPress使用问题、WordPress主题或插件bug)
  2. 可以随意下载以及更新官方发布的插件、主题(如有特别说明除外)
  3. 可以得到官方人员的免费技术援助(包括但不仅限于:WordPress、UNI、IONIC、React Native 、flutter、建站)
  4. 可以查看所有官方插件、主题的使用文档
  5. 可以得到官方插件、模板的免费技术援助
  6. 免费查看官网推出的所有教程并得到技术援助
  7. 免费得到WordPress建站建议、优化建议(大数据,大存储,高并发)
  8. 更多权利待添加……

发表评论

插入图片

推荐文章

  1. 抱歉,没有找到文章!

WordPressApp来了

快速让你的网站变成一个APP,不需要任何技术,点此查看