Wordpress开发基础｜后台定制jQuery UI

Posted 2021-12-22 googlingman

简介

jQuery及jQuery UI是大部分Wordpress程序员的必备工具包。本文简介在后台开发中使用jQuery UI组件简化后台界面开发的主要思路及相关代码。

为方便读者理解与测试，本文使用一个最简单的Wordpress插件作为测试形式。

阅读前提：

本文假定读者对于CSS、html、javascript及Wordpress插件开发有一定了解！

另外，本文测试使用的是Mac＋Wordpress 5.8.1环境。

先给出本文测试代码效果图，如下：

实现一个插件zxz-jquery-ui-custom

在wp-content文件夹下创建子目录zxz-jquery-ui-custom，并在其下创建文件zxz-jquery-ui-custom.php，完整内容如下：

<?php
/*
Plugin Name: ZXZ jQuery UI Custom
Plugin URI: https://zhuxianzhong.blog.51cto.com
Description: ZXZ jQuery UI Custom is a simple built-in jQuery UI gadgets test for WordPress.
Author: Xianzhong Zhu
Author URI: https://zhuxianzhong.blog.51cto.com
Version: 1.0.1
Text Domain: zxz-jquery-ui-custom
Domain Path: /languages
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/**
 *
 */
define("ZXZ_JQUERY_UI_CUSTOM_PATH", plugin_dir_path(__FILE__));
define("ZXZ_JQUERY_UI_CUSTOM_URL", plugin_dir_url(__FILE__));

/**
 * Registering Menu & a submenu on plugin activation
 */
add_action("admin_menu", "jquery_ui_menus");

function jquery_ui_menus() 
    add_menu_page(
    "ZXZ定制jQuery UI组件页面标题",
    "ZXZ jQuery UI",
    "manage_options",
    "wp-jquery-ui",
    "zxz_admin_menu_settings_page_callback",
    dashicons-admin-customizer
    );
    add_submenu_page(
        "wp-jquery-ui",
        "Accordion定制页面",
        "Accordion Cust",
        "manage_options",
        "wp-jquery-ui-sub",
        "wp_jquery_ui_callback"
    );

function zxz_admin_menu_settings_page_callback()
    echo Hello, this is top setting page;


function wp_jquery_ui_callback() 

    ob_start();
    include_once ZXZ_JQUERY_UI_CUSTOM_PATH . views/zxz-accordion.php;
    include_once ZXZ_JQUERY_UI_CUSTOM_PATH . views/zxz-tabs.php;
    $template = ob_get_contents();
    ob_end_clean();

    echo $template;


/**
 *  jquery UI for accordion widget
 */
function jquery_ui_js_files() 
    //add accordion stylesheet
    wp_enqueue_style("jquery-zxz-css", ZXZ_JQUERY_UI_CUSTOM_URL . "assets/jquery-ui.css");

    wp_enqueue_script("jquery");
    wp_enqueue_script("jquery-ui-accordion");
    wp_enqueue_script("jquery-ui-tabs");

    // custom js file to call accordion method
    wp_enqueue_script("zxz-custom-script1", ZXZ_JQUERY_UI_CUSTOM_URL . "assets/zxz-custom-script.js", array(jquery), "1.0.1", true);
    wp_enqueue_script("zxz-custom-script2", ZXZ_JQUERY_UI_CUSTOM_URL . "assets/zxz-tabs-script.js", array(jquery), "2.0.0", true);


// action hook to register our plugin files
add_action("admin_enqueue_scripts", "jquery_ui_js_files");

值得注意的是，Wordpress内置了jQuery及jQuery UI支持，但是并没有引入其相应的CSS文件。因此，要使用jQuery UI漂亮的组件，需要我们自行下载对应的CSS。

下载jQuery UI对应CSS文件与主题库

切换到jQuery UI对应CSS文件与主题库​​地址​​，大致显示如下：

注意：本人使用的是Wordpress 5.8.1,通过分析wp-includes文件夹下对应文件，很容易得知这个版本内置的jQuery是3.6.0，而且jQuery UI组件库版本为1.12.1。因此，从上述网站下载CSS内容时，需要选择相应的版本，即1.12.1。另外，由于本人要全面测试使用每一项jQuery UI组件功能，所以，我把所有选项都勾选了，读者可以根据实情需要，勾选对应的部分。

最后，选择你喜欢的主题，如下图我选择的是“Start”：

最后，下载即可。得到一个压缩包，解压后，一般我们只需要jquery.ui.css或者jquery.ui.min.css文件。如果选择所有内容，则没有jquery.ui.min.css文件！

把此样式表文件添加到上述创建的插件的子文件夹assets下。

为方便读者分析，我把上述插件完整文件夹结构复制如下图所示：

其他几个文件内容

恕不再详解，只是简单列举有关的几个文件内容，如下：

zxz-custom-script.js内容如下：

jQuery(document).ready(function () 

    // #accordion-zxz元素定义于视图文件zxz-accordion.php中
    jQuery("#accordion-zxz").accordion();

);

zxz-tabs-script.js内容如下：

jQuery(document).ready(function ($) 

    // #accordion-zxz元素定义于视图文件zxz-accordion.php中
    // jQuery("#zxz_tabs").accordion();
    $("#zxz-tabs").tabs();

);

zxz-accordion.php内容如下：

<div id="accordion-zxz">
    <h3>利用BackboneJS更好组织jQuery应用的架构</h3>
    <div>
        <p>
            在构建高交互度的Web应用程序方面，JavaScript发挥出越来越重要的作用。如Backbone.js，Marionette.js，Ember.js 和Angular.js 这些库和框架，在流行度和功能方面快速成长。对于建立复杂和强大的浏览器应用这件事，这些库和框架使之变得容易了。它们帮助我们迎来了一个单页应用时代（SPAs），使网页上的交互性和实用性达到了前所未有的程度。
        </p>
    </div>
    <h3>解析CIDR表示的IP段表示的范围</h3>
    <div>
        <p>
            需求：给定一个ip：172.28.68.0和一个CIDR格式的ip配置项ipConfig="172.28.64.0/22,172.28.72.11;172.16.0.0/12,172.28.80.27"，判断该IP是在哪个cidr表示的地址段，并获取cidr格式后面的一个ip地址。
        </p>
    </div>
    <h3>从零开始制作 WordPress 主题</h3>
    <div>
        <p>
            网络上已经有很多关于制作 WordPress 主题的教程，并且 WordPress 官方网站上也有指导文章。但是当你不懂这方面的术语的话，这些教程可能不一定会帮助你，甚至还会误导你，所以这个教程会真正从零开始教你如何创建 WordPress 主题。
        </p>
        <ul>
            <li>WordPress 主题教程：存档和链接列表</li>
            <li>WordPress 主题教程：留言模板</li>
            <li>WordPress 主题教程：开始Index.php</li>
        </ul>
    </div>
    <h3>WordPress 主题教程#3</h3>
    <div>
        <p>
            开始 Index.php 是从零开始创建 WordPress 主题系列教程的第三篇。在介绍了 WordPress 主题的一些规则和术语，以及对 WordPress 模板和模板文件了解之后，现在是开始动手创建 WordPress 主题了的时候。
        </p>
        <p>
            在这篇中，我们将要着手开始写 WordPress 代码，这里建议搭建首先在本地电脑上安装 WordPress，而不是安装到服务器上，因为本地更方便测试。
        </p>
    </div>
</div>

zxz-tabs.php内容如下：

<div id="zxz-tabs">
    <ul>
        <li><a href="#tabs-1">PHP教程</a></li>
        <li><a href="#tabs-2">WORDPRESS主题教程</a></li>
        <li><CK2010-Java SSM定制开发大众点评App后台

 教你如何安装WordPress主题的方法
 Django基础，Day8 - 管理后台定制显示
 wordpress怎么添加留言板
 React全家桶+AntD 共享单车后台管理系统开发
 WordPress 定制程序错误：调用未知的成员函数 add_setting()