wordpress插件使用vue+webpack开发后台界面以及使用node-wpapi和wpdb访问数据库

一.vue开发插件后台界面

img

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资源

img

通过require_once("dist/index.html")之后,点击菜单就能加载html

但是会报其他cssjs等资源引用错误,原因是路径找不到。

webpack打包后的文件在dist,你也可以放在插件目录下别的文件夹

需要手动修改资源引用

img

根据你自己的wordpress站点目录和插件目录来修改对应的路径

img

查看正常访问下的目录结构

img

四.使用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

img

其次在插件的入口文件,如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' );
    }
} );

然后引入库的资源文件,在vueindex.html中引入node-wpapijs文件

注意前端网页使用引入UMD套件即可,使用npm安装也行。

文档地址:http://wp-api.org/node-wpapi/installation/#download-the-umd-bundle

img

<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操作自定义数据库

img

使用上述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

img

可以看到访问的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的访问一定要设置跨域处理,在configindex.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,任务分解等

多学,多做,多思考,多整理,多沉淀,打造和维护一个属于自己的感兴趣有价值的产品。