原文链接:https://dsx2016.com/?p=1066
公众号:大师兄2016
一.vue
开发插件后台界面
wordpress
本身自带jquery
环境,php
也可以写html
代码,从而展示前端页面。
但是jquery
有一些过时了,不太适合现在数据驱动开发,使用vue
可以更快更好的迭代。
如上图所示,vue-cli
开发的界面可以应用在插件界面中。
二.设置管理菜单
在插件的index.php
中(入口文件)
-
// 后台菜单初始化时创建自定义菜单
-
add_action(
'admin_menu',
'add_diy_menu');
-
// 设置主菜单和子菜单的函数
-
function add_diy_menu() {
-
// 顶级菜单标题
-
add_menu_page(__(
'顶级菜单'),__(
'简码菜单'),
8,
__FILE__,
'my_function_menu');
-
// 子菜单标题
-
add_submenu_page(
__FILE__,
'子菜单1',
'vue管理界面',
8,
'your-admin-sub-menu1',
'my_function_submenu1');
-
// 子菜单标题
-
add_submenu_page(
__FILE__,
'子菜单2',
'其他测试界面',
8,
'your-admin-sub-menu2',
'my_function_submenu2');
-
}
-
// 主菜单界面
-
function my_function_menu() {
-
// 输出div
-
echo
"<div style='width:100%;height:1000px;background-color:#eee'>测试菜单</div>";
-
}
-
// 子菜单界面-演示为vue项目
-
function my_function_submenu1() {
-
// 引入插件dist目录下的html
-
require_once(
"dist/index.html");
-
}
-
// 子菜单界面
-
function my_function_submenu2() {
-
// 获取url方式的html
-
$html = str_get_html(
'https://dsx2016.com');
-
echo $html;
-
-
// 也可以引入php(里面有html的内容)
-
// include_once 'test.php';
-
}
三.放入vue html
资源
通过require_once("dist/index.html")
之后,点击菜单就能加载html
。
但是会报其他css
和js
等资源引用错误,原因是路径找不到。
webpack
打包后的文件在dist
,你也可以放在插件目录下别的文件夹
需要手动修改资源引用
根据你自己的wordpress
站点目录和插件目录来修改对应的路径
查看正常访问下的目录结构
四.使用node-wpapi
访问数据库
有没有什么办法,可以在独立于wordpress
之外的网页访问其数据库。
wordpress
提供了REST API
,顾名思义,我们可以单独开发接口和界面,来查看和设置wordpress
内容。
REST API
参考地址:https://developer.wordpress.org/rest-api/using-the-rest-api/client-libraries/
NODE-WPAPI
参考地址:http://wp-api.org/node-wpapi/
使用方式
首先wordpress
安装插件(通过上传或者插件市场等方式),这一步很重要,解锁rest api
插件地址:https://github.com/WP-API/Basic-Auth
其次在插件的入口文件,如index.php
中添加跨域设置,这一步很重要,不然无法访问数据
-
add_action(
'send_headers',
function() {
-
if ( ! did_action(
'rest_api_init') && $_SERVER[
'REQUEST_METHOD'] ==
'HEAD' ) {
-
header(
'Access-Control-Allow-Origin: *' );
-
header(
'Access-Control-Expose-Headers: Link' );
-
header(
'Access-Control-Allow-Methods: HEAD' );
-
}
-
} );
然后引入库的资源文件,在vue
的index.html
中引入node-wpapi
的js
文件
注意前端网页使用引入UMD
套件即可,使用npm
安装也行。
文档地址:http://wp-api.org/node-wpapi/installation/#download-the-umd-bundle
<script src="./static/js/wpapi.min.js"></script>
在app.vue
或者其他需要使用的界面文件中,添加代码
详情内容参考文档和代码注释
文档地址:http://wp-api.org/node-wpapi/using-the-client/
-
// 建议等页面加载完毕后再获取window下的WPAPI
-
mounted(){
-
// 引入全局api
-
Vue.prototype.$WPAPI=
window.WPAPI
-
// 注册wordpress(对应站点名: http://localhost/wordpress)(这里获取到的wp就是可以操作数据的变量)
-
var wp =
new WPAPI({
endpoint:
'http://localhost/wordpress/wp-json' });
-
-
// 获取页面项的集合-这个操作不需要认证登录
-
let pagesData=wp.pages()
-
-
// 使用登录(同样注册站点名)
-
var apiPromise = WPAPI.discover(
'http://localhost/wordpress/' ).then(
function( site ) {
-
// 使用wordpress的账户登录
-
return site.auth({
-
username:
'short_code',
-
password:
'*********'
-
});
-
});
-
// 需要权限的放在下面函数里(site等同于上面的wp)
-
apiPromise.then(
function( site ) {
-
// 这里面的操作是认证才能进行的操作(获取网站设置,更新编辑文章等都需要认证登录)
-
site.settings().then(
(res)=>{
-
console.log(
`获取所有设置`,res)
-
})
-
})
-
}
更多操作参考官方文档API
五.php使用wpdb操作自定义数据库
使用上述node-wpapi
优点是,所有的方法都按规范写好了,拿来即用。
但是对于数据库操作,没办法自定义表和插入自定义字段和数据。
所以如果想把插件,如字体base64
数据存入到单独的mysql
表中,就需要wordpress
提供的wpdb
官方文档:https://codex.wordpress.org/Class_Reference/wpdb
代码如下,test.php
-
<?php
-
// 允许跨域
-
header(
'Access-Control-Allow-Origin:*');
// *代表允许任何网址请求
-
header(
'Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE');
// 允许请求的类型
-
header(
'Access-Control-Allow-Credentials: true');
// 设置是否允许发送 cookies
-
header(
'Access-Control-Allow-Headers: Content-Type,Content-Length,Accept-Encoding,X-Requested-with, Origin');
// 设置允许自定义请求头的字段
-
// 获取根目录路径-很重要-根据自己的插件和php文件路径来写
-
define(
'PATH', dirname(dirname(dirname(dirname(dirname(dirname(
__FILE__)))))).
'/');
-
// 引入配置文件才能使用wpdb-必须
-
require_once(PATH .
'wp-config.php');
-
// 获取全局wpdb-必须
-
global $wpdb;
-
// 使用wpdb操作数据库(当前为获取用户数)
-
$user_count = $wpdb->get_var(
"SELECT COUNT(*) FROM $wpdb->users" );
-
// 要返回的json数据
-
$ret =
array(
-
'data' =>
'456',
-
'user_count' => $user_count,
// 获取到的wordpress用户数
-
'permalink'=> $permalink,
-
'code' =>
0,
-
'msg' =>
'fail',
-
);
-
// 设置返回的数据格式为json
-
header(
'content-type:application/json;charset=utf8');
-
// 返回解码后的数据
-
echo json_encode($ret);
-
?>
写好的php
放在插件目录下,即可。
值得注意的是,因为php
在插件目录中,也就是在wordpress
环境中。
无论是php
写前端界面,还是使用wpdb
操作数据库,都不需要验证登录,因为本身就处于当前账户状态,共享cookie
。
六.在vue
中访问插件中的php api
可以看到访问的api
地址为 http://localhost/wordpress/wp-content/plugins/short_code/api/test/index2.php
基本等同于网站的目录结构和文件路径
在vue
中访问该php
文件即可
api
文件
-
// 通用url前缀
-
const BASE_URL =
`/wordpress/wp-content/plugins/short_code/api/test`;
-
// testPhp
-
export
let testPhp =
`${BASE_URL}/index2.php`;
使用axios
封装的$http
访问接口
-
this.$http({
-
method:
`get`,
-
url: API.testPhp,
-
params: {}
-
}).then(
res => {
-
console.log(
`获取php api的json数据`, res);
-
},(err)=>{
-
console.log(
`获取php数据错误`,err)
-
});
注意vue-cli
的访问一定要设置跨域处理,在config
的index.js
文件中设置
关于proxyTable
搜索网络文档即可
-
proxyTable: {
-
'/api': {
-
// 本地环境
-
// target: 'http://127.0.0.1:8089',
-
// 测试环境
-
target:
'http://localhost/wordpress/wp-content/api/test',
-
changeOrigin:
true,
-
secure:
false,
-
pathRewrite: {
-
'^/api':
'',
-
}
-
}
-
},
如果没有使用过vue
或者react,那么使用jquery
也能很快开发插件界面和交互
Tips
本片文章是《wordpress插件嵌入webFont自定义字体》的下篇,主要讲字体插件的界面编写和数据库设置方式
要把python
的字体转化精简接口写出来又是另外不止一篇文章了,涉及到flask框架,api
设计,服务器部署和token
验证等
哪怕是一个小小的wordpress
字体插件,也涉及到以下知识体系:
-
Html、Css、Js
三件套等 -
Webpack+Vue+Element
等 -
Php、Pyhon、Node、Mysql、Nginx、Apache
等 -
产品和
Ui
设计,最小MVP
,任务分解等
多学,多做,多思考,多整理,多沉淀,打造和维护一个属于自己的感兴趣有价值的产品。
转载:https://blog.csdn.net/weixin_37865166/article/details/105610793