原文链接：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