首页 / WordPress主题制作 / WordPress主题插件为后台菜单页面添加js和css

WordPress主题插件为后台菜单页面添加js和css

    • 珂李斯

    发布于

    by

    开发WordPress主题插件，经常需要添加后台配置页，这时可以使用admin_menu钩子和add_menu…

    开发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>';
}

    //添加菜单
    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);
}

    //加载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__));
}

    //加载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');

    //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__));
}

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

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

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

    然后，就可以看到：

    类别：WordPress主题制作、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！