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

Posted on by dsx_2016

一.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。

但是会报其他css和js等资源引用错误，原因是路径找不到。

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' );
    }
} );

然后引入库的资源文件，在vue的index.html中引入node-wpapi的js文件

注意前端网页使用引入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的访问一定要设置跨域处理，在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，任务分解等

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

打赏微海报分享