开发WordPress主题插件,经常需要添加后台配置页,这时可以使用admin_menu钩子和add_menu_page函数添加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//添加菜单
add_action('admin_menu', 'add_menu_test');
function add_menu_test()
{
    $page_hook = add_menu_page('页面标题', '菜单标题 ', 'manage_options', 'unique_menu_slug', 'page_callback');
}
 
//页面显示的内容
function page_callback()
{
    echo '<hr>';
    echo '<div class="btn-test">测试</div>';
    echo '<hr>';
}

一些简单的js可以使用<script>直接添加在page_callback中即可。

如果js较复杂,就需要引入外部js,这时候就需要admin_print_scripts钩子和wp_enqueue_script函数。

1
2
3
4
5
6
//加载js
add_action('admin_print_scripts', 'enqueue_script_test');
function enqueue_script_test()
{
    wp_enqueue_script('script-test', plugins_url("test.js", __FILE__), array('jquery'), '1.0.0', true);
}

类似的,可以引入外部样式css。

1
2
3
4
5
6
//加载css
add_action('admin_print_styles', 'enqueue_style_test');
function enqueue_style_test()
{
    wp_enqueue_style('style-test', plugins_url("test.css", __FILE__));
}

现在还有个小问题,通过admin_print_scripts和admin_print_styles引起的js、css会在所有的后台页面加载。wordpress的插件千千万,这样极易与其他插件冲突,而且在所有的页面加载也是不必要的,会影响效率。

admin_print_scripts-(page_hook)和admin_print_styles-(page_hook)就可以解决这个问题,这样就可以只在指定的页面加载相应的js、css。

1
2
3
4
5
//add_action('admin_print_scripts', 'enqueue_script_test');
add_action('admin_print_scripts-' . $page_hook, 'enqueue_script_test');
 
//add_action('admin_print_styles', 'enqueue_style_test');
add_action('admin_print_styles-' . $page_hook, 'enqueue_style_test');

最终plugin-test.php文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/**
 * Plugin Name:       Plugin Test
 * Plugin URI:        https://www.laolaiso.com/
 * Description:       一个简单的插件测试
 * Version:           1.0.0
 * Author:            三锅大叔
 * Author URI:        https://www.laolaiso.com/
 * License:           GPL-2.0+
 * License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
 * Text Domain:       plugin-test
 */
 
//添加菜单
add_action('admin_menu', 'add_menu_test');
function add_menu_test()
{
    $page_hook = add_menu_page('页面标题', '菜单标题 ', 'manage_options', 'unique_menu_slug', 'page_callback');
 
    //add_action('admin_print_scripts', 'enqueue_script_test');
    add_action('admin_print_scripts-' . $page_hook, 'enqueue_script_test');
 
    //add_action('admin_print_styles', 'enqueue_style_test');
    add_action('admin_print_styles-' . $page_hook, 'enqueue_style_test');
}
 
//页面显示的内容
function page_callback()
{
    echo '<hr>';
    echo '<div class="btn-test">测试</div>';
    echo '<hr>';
}
 
//加载js
function enqueue_script_test()
{
    wp_enqueue_script('script-test', plugins_url("test.js", __FILE__), array('jquery'), '1.0.0', true);
}
 
//加载css
function enqueue_style_test()
{
    wp_enqueue_style('style-test', plugins_url("test.css", __FILE__));
}

test.js内容

1
2
3
4
5
jQuery(document).ready(function($){
    jQuery('.btn-test').click(()=>{
        window.alert('test');
    });
})

test.css内容

1
2
3
4
5
6
7
8
.btn-test {
    margin: 50px;
    padding: 10px;
    width: 80px;
    text-align: center;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
}

在plugins目录下,新建plugin-test目录,再把plugin-test.php、test.js、test.css放入。

然后,在 插件->已安装插件 中启用插件 Plugin Test。

然后,就可以看到:

版权声明:部分文章、图片等内容为用户发布或互联网整理而来,仅供学习参考。如有侵犯您的版权,请联系我们,将立刻删除。