wordpress——在插件后台管理页面中添加javascript和ajax

最近在开发一个wordpress插件，须要在插件的后台管理页面上，添加本身写的javascript文件，以达到一些功能。

查了好几天的文档和资料，终于实现了。

这里先介绍下wordpress后台页面添加javascript的过程，再介绍添加ajax的过程。

 

---

添加javascript

首先咱们须要知道wordpress插件开发的框架，而后再介绍javascript添加的步骤。

添加插件设置页面

开发插件，总须要在管理后台添加本身的插件设置页面、插件设置子页面，在这些页面中，能够设置和保存插件的一些运行参数。

能够将插件设置页面添加到管理后台的多个位置中。wordpress默认的管理后台面板，提供了page、post、comment和setting等默认主页面菜单。

以下图所示，也就是中文的“文章”、“页面”、“评论”和“设置”这些主页面菜单。wordpress提供了对应的API，在这些位置的底下，来添加页面。

例如咱们能够在“设置”下，添加咱们本身的插件设置页面，利用的是API：

add_options_page( $page_title, $menu_title, $capability, $menu_slug, $function);

咱们也能够在“评论”下，添加咱们本身的插件设置页面，利用的是API：

add_comments_page( $page_title, $menu_title, $capability, $menu_slug, $function);　

可是呢，咱们也能够在和“页面”、“文章”、“评论”这些同一级别上添加咱们的插件设置页面。例如，在上图中，个人插件“cartbiner server”的设置页面，就是和“文章”等同级别的。而后再这个插件设置页面下，咱们在本身添加相关的子页面。

咱们要用到的API是，具体参数和含义能够查阅wordpress codex：

add_menu_page();
add_submenu_page();

最后个人实现结果是，1个插件的主设置页面，3个插件的子设置页面：

 

具体请参考：

wordpress后台管理页面开发　

 

添加javascript文件

这里咱们想讲的是，如何在插件设置页面上添加javascript文件。

咱们做为开发者，能够本身直接在输出的html页面里面利用script标签，加入javascript代码。

可是wordpress不推荐这么作，一是很差管理，而是难以免多个代码的重复致使错误。

因此咱们这里要说的，实际上是利用wordpress提供的接口，在对应的页面头部中添加javascript文件。

例如，咱们在上面添加了3个子设置页面，可是咱们想开发一个javascript文件，只添加到“Add Cartbinet”和“Add Door”页面，其余页面都不会包含这个javascript文件，怎么实现？

wordpress提供了2种添加javascript的方法，可是我只试成功了一种，接下来我会详细介绍个人实现方法。

有哪些页面类型能够添加javascript文件？

在wordpress里面，共有如下几个页面位置，能够添加用户自定义的javascript文件。

分别是：

• 后台管理页面；
• 管理者的登陆页面；
• 前台页面（也就是通常访问者看到的页面）。

如下是从wordpress插件官方开发教程里面摘录的话：

For administration pages, use admin_enqueue_scripts.

For front-end pages use wp_enqueue_scripts, except for the login page, in which case use login_enqueue_scripts.

能够看到共有3种API，能够在以上三种页面类型中添加javascript文件。

显然，咱们这里要用到的是API：

admin_enqueue_scripts();

添加javascript文件的过程

 首先，在插件的init_hooks函数里面，在wordpress载入后台管理菜单和页面的时候，添加咱们本身的插件设置页面：

add_action('admin_menu', array( 'CartbinetServer', 'cartbinet_add_pages') );
add_action('admin_enqueue_scripts', array( 'CartbinetServer', 'cartbinet_load_add_cartbinet_scripts') );

第一个add_action，是用来添加咱们本身的插件设置页面的。

“admin_menu”，表示wordpress载入后台管理菜单和页面的钩子；

“cartbinet_add_pages”，添加插件设置页面的函数；

第二个add_action，是用来载入咱们的javascript文件的。

“admin_enqueue_scripts”，表示wordpress插入管理页面的javascript文件的钩子；

“cartbinet_load_add_cartbinet_scripts”，载入javascript文件的函数。

咱们按步骤介绍这两个函数：“cartbinet_add_pages”和“cartbinet_load_add_cartbinet_scripts”。

 

其次，在添加插件设置页面的函数里面，也就是cartbinet_add_pages，获取咱们须要添加javascript文件的页面的hook。也就是说，咱们想在哪一个页面，添加javascript文件，咱们就须要得到这个页面的一个标识——hook。

这个hook，是下面API的返回值。咱们把页面hook，保存在一个全局的数组变量里面，这样其余函数也能够访问到:

$addCartBinetsPageHook = add_submenu_page;
$addDoorPageHook = add_submenu_page

上面的代码只是是表示一下，并无写完整。读者能够查阅API: add_submenu_page。

 

接下来，咱们在后台管理页面载入javascript文件的函数里面，也就是函数“cartbinet_load_add_cartbinet_scripts”里面，写入以下代码。

在这个函数的最开始，咱们先判断当前管理页面，是否是咱们须要添加javascript文件的那两个插件子设置页面。

public static function cartbinet_load_add_cartbinet_scripts($hook) {
　　if ( ! in_array( $hook, self::$addPages ) )
　　　　return;

　　/* put jquery scriptr in the queue*/
　　wp_enqueue_script( 'setting-ajax-script', plugins_url( 'accerts/js/setting.js', __FILE__ ) );

　　$title_nonce = wp_create_nonce( 'title_example' );
　　wp_localize_script( 'setting-ajax-script',
　　　　'my_ajax_obj',
　　　　array(
　　　　　　'ajax_url' => admin_url( 'admin-ajax.php' ),
　　　　　　'nonce' => $title_nonce,
　　　　) );
}

wp_enqueue_script就是注册javascript文件的函数。

至于wp_localize_script则是注册ajax的函数。

wp_create_nonce是产生ajax交互密钥的函数，也就是说服务器产生一个密钥，前端javascript经过ajax向服务器请求服务数据时，须要发送这个密钥供核对。

 

---

添加ajax

添加ajax的步骤，其实和添加javascript文件的步骤是同样的。

首先，在init_hooks函数里面，注册服务器ajax响应函数：

add_action('wp_ajax_cartbinet_name_list', array( 'CartbinetServer', 'cartbinet_name_list_ajax_handler') );

咱们的ajax响应函数为：

public static function cartbinet_name_list_ajax_handler () {
    //check nonce
    check_ajax_referer('title_example');

    error_log('cartbinet_name_list_ajax_handler');

    //get cartbinet name list from xml file, json format
    $names = self::cartbinet_get_name_list();

    error_log(implode(" ", $names));

    //return data to front end jquery script
    wp_send_json($names);

    wp_die(); // all ajax handlers should die when finished
}

 

其次，在载入javascript文件的函数里面，注册ajax交互中要使用的全局变量，以及ajax请求所发送的url位置。

为何要这么作，

由于ajax请求放在javascript文件里面的啊，因此先载入javascript文件，其次呢，在服务器端生成ajax密钥。最后在服务器端注册一个ajax请求和这个交互请求会使用的变量以及url位置。

public static function cartbinet_load_add_cartbinet_scripts($hook) {
　　if ( ! in_array( $hook, self::$addPages ) )
　　　　return;

　　/* put jquery scriptr in the queue*/
　　wp_enqueue_script( 'setting-ajax-script', plugins_url( 'accerts/js/setting.js', __FILE__ ) );

　　$title_nonce = wp_create_nonce( 'title_example' );
　　wp_localize_script( 'setting-ajax-script', 
　　　　'my_ajax_obj', 
　　　　array(
　　　　　　'ajax_url' => admin_url( 'admin-ajax.php' ),
　　　　　　'nonce' => $title_nonce,
　　　　) );
}

 

 

 

最后，咱们再实现前端页面中的javascript文件，

jQuery(document).ready(function($) {           //wrapper
    
    var this2 = $("#filter-by-name");
    $.post(my_ajax_obj.ajax_url, {         //POST request
        _ajax_nonce: my_ajax_obj.nonce,     //nonce
         action: "cartbinet_name_list",            //action
         title: 'cartbinets_names'                  //data
     }, function(data) {                    //callback
         $(this2).empty();
         $.each(data, function(key, value){
             var $op = new String("<option>"  + value + "</option>");
             $(this2).append($op);
         });
     });  
}); 

“my_ajax_obj”就是服务器端php所生成的ajax变量：

“my_ajax_obj.ajax_url”，保存了向服务器发送ajax请求的url地址；

“my_ajax_obj.nonce”，保存了ajax交互的密钥。

“cartbinet_name_list”，对应到服务器PHP端所注册的ajax请求标识，也就是对应在init_hook函数里面注册ajax响应函数时，设置的ajax请求标识。

　　　　　　　　　　　　也就是说前端发送的这个ajax请求，会被wordpress parse一遍，而后服务器端php根据ajax请求标识，知道要调用函数"cartbinet_name_list_ajax_handler"，来响应这个ajax请求。

 

 

add_action('wp_ajax_cartbinet_name_list', array( 'CartbinetServer', 'cartbinet_name_list_ajax_handler') );

 

“data”，里面保存的是服务器端经过函数wp_send_json($names)返回的数据。

 

---

参考资料：

https://developer.wordpress.org/plugins/javascript/enqueuing/

http://www.solagirl.net/wordpress-ways-to-load-js-css.html

https://www.zfanw.com/blog/wordpress-add-jquery.html