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
也能很快开发插件界面和交互
本片文章是《wordpress插件嵌入webFont自定义字体》的下篇,主要讲字体插件的界面编写和数据库设置方式
要把python
的字体转化精简接口写出来又是另外不止一篇文章了,涉及到flask框架,api
设计,服务器部署和token
验证等
哪怕是一个小小的wordpress
字体插件,也涉及到以下知识体系:
-
Html、Css、Js
三件套等 -
Webpack+Vue+Element
等 -
Php、Pyhon、Node、Mysql、Nginx、Apache
等 -
产品和
Ui
设计,最小MVP
,任务分解等