分析 WordPress `wp_before_admin_bar_render` 钩子源码:如何通过它自定义管理员工具栏。

各位未来的WordPress大神,大家好!今天咱们来聊聊一个挺有意思的钩子——wp_before_admin_bar_render。这玩意儿就像是管理员工具栏的“变形金刚”启动前的最后一道指令,你可以在它身上施加各种魔法,定制出属于你自己的专属工具栏。

咱们先说清楚,这玩意儿不是让你完全重写整个工具栏,而是给你一个机会,在WordPress渲染它之前,对它进行调整和修改。你可以添加新的菜单项,移除不需要的,甚至修改现有菜单项的属性。

第一部分:wp_before_admin_bar_render 钩子是个啥?

简单来说,wp_before_admin_bar_render 是一个 WordPress action hook(动作钩子)。这意味着,当 WordPress 即将渲染管理员工具栏时,它会触发这个钩子。你可以在你的主题的 functions.php 文件或者一个插件中,挂载一个函数到这个钩子上,让你的函数在工具栏渲染之前运行。

这个钩子没有传递任何参数给你,但是,你可以通过全局变量 $wp_admin_bar 来访问和修改管理员工具栏对象。

第二部分:全局变量 $wp_admin_bar,你的操作对象

$wp_admin_bar 是一个 WP_Admin_Bar 类的实例。这个类负责管理管理员工具栏中的所有菜单项。你可以通过它来添加、移除和修改菜单项。

第三部分:实战演练,代码说话

好,理论知识咱们就先点到这儿,直接上代码,看看怎么通过 wp_before_admin_bar_render$wp_admin_bar 来玩转工具栏。

3.1 添加一个新的顶级菜单

假设你想在工具栏的左侧添加一个名为“我的工具”的顶级菜单,并在其下添加几个子菜单。

function my_custom_admin_bar_menu() {
    global $wp_admin_bar;

    // 确保 `$wp_admin_bar` 对象存在
    if ( ! is_object( $wp_admin_bar ) )
        return;

    // 添加顶级菜单
    $args = array(
        'id'    => 'my_tools',
        'title' => '我的工具',
        'href'  => '#', // 顶级菜单的链接通常设为 # 或 javascript:void(0)
        'meta'  => array(
            'title' => '我的工具' // 鼠标悬停时的提示文字
        )
    );
    $wp_admin_bar->add_menu( $args );

    // 添加子菜单1
    $args = array(
        'id'     => 'my_tools_option1',
        'title'  => '选项一',
        'href'   => admin_url( 'admin.php?page=my-plugin-settings' ), // 指向你的插件设置页面
        'parent' => 'my_tools', // 设置父菜单为 'my_tools'
        'meta'   => array(
            'title' => '选项一'
        )
    );
    $wp_admin_bar->add_menu( $args );

    // 添加子菜单2
    $args = array(
        'id'     => 'my_tools_option2',
        'title'  => '选项二',
        'href'   => '#', // 随便一个链接
        'parent' => 'my_tools',
        'meta'   => array(
            'title' => '选项二'
        )
    );
    $wp_admin_bar->add_menu( $args );
}
add_action( 'wp_before_admin_bar_render', 'my_custom_admin_bar_menu' );

这段代码做了什么?

  1. my_custom_admin_bar_menu() 函数:这是你的自定义函数,用于修改工具栏。
  2. global $wp_admin_bar;:声明 $wp_admin_bar 为全局变量,以便在函数内部访问它。
  3. if ( ! is_object( $wp_admin_bar ) ) return;:一个安全检查,确保 $wp_admin_bar 对象存在。
  4. $wp_admin_bar->add_menu( $args );:这个是关键,它用于添加新的菜单项。
    • id:菜单项的唯一ID,必须是唯一的。
    • title:菜单项显示的文字。
    • href:菜单项的链接地址。
    • parent:指定父菜单的ID。如果为空,则添加到顶级菜单。
    • meta:一个数组,可以包含 title (鼠标悬停提示),onclick (点击事件) 等其他属性。
  5. add_action( 'wp_before_admin_bar_render', 'my_custom_admin_bar_menu' );:将你的函数挂载到 wp_before_admin_bar_render 钩子上。

3.2 移除一个已有的菜单

有时候,你可能想移除一些WordPress默认的菜单项,比如“更新”菜单(如果你自己做了自动更新)。

function my_remove_default_admin_bar_menu() {
    global $wp_admin_bar;

    if ( ! is_object( $wp_admin_bar ) )
        return;

    $wp_admin_bar->remove_node( 'updates' ); // 移除 "更新" 菜单
}
add_action( 'wp_before_admin_bar_render', 'my_remove_default_admin_bar_menu' );

$wp_admin_bar->remove_node( 'updates' );:这个函数用于移除菜单项,你需要提供要移除的菜单项的ID。 常用的ID如下:

ID 说明
site-name 站点名称
updates 更新提示
comments 评论
new-content 新建内容
edit 编辑页面/文章
search 搜索
my-account 用户名菜单,包含个人资料等
wp-logo WordPress Logo

3.3 修改一个已有的菜单

除了添加和移除,你还可以修改已有的菜单项。 比如,修改“WordPress Logo”的链接地址。

function my_modify_wp_logo_link() {
    global $wp_admin_bar;

    if ( ! is_object( $wp_admin_bar ) )
        return;

    $wp_admin_bar->add_node( array(
        'id'    => 'wp-logo',
        'href'  => 'https://www.google.com', // 修改链接地址
        'meta'  => array(
            'title' => 'Google' // 修改提示文字
        )
    ) );
}
add_action( 'wp_before_admin_bar_render', 'my_modify_wp_logo_link' );

这里我们用了 $wp_admin_bar->add_node() 函数, 并且指定了要修改的菜单项的ID(wp-logo)。 WordPress会查找已有的ID相同的菜单项,然后用你提供的新属性覆盖它。注意,如果菜单项不存在,add_node 会创建一个新的菜单项。

3.4 添加自定义CSS样式

有时候,你可能想给工具栏添加一些自定义的CSS样式,让它看起来更酷炫。

function my_custom_admin_bar_css() {
    echo '<style type="text/css">
        #wpadminbar {
            background-color: #333;
            color: #fff;
        }
        #wpadminbar a {
            color: #fff;
        }
        #wpadminbar a:hover {
            color: #ddd;
        }
    </style>';
}
add_action( 'admin_head', 'my_custom_admin_bar_css' );
add_action( 'wp_head', 'my_custom_admin_bar_css' );

这段代码直接输出了一段CSS样式到 <head> 标签中。 admin_head 作用于后台页面, wp_head 作用于前台页面。

第四部分:进阶技巧

4.1 判断用户角色

有时候,你想根据用户的角色,显示不同的菜单项。

function my_conditional_admin_bar_menu() {
    global $wp_admin_bar;

    if ( ! is_object( $wp_admin_bar ) )
        return;

    if ( current_user_can( 'administrator' ) ) {
        // 管理员可以看见的菜单
        $args = array(
            'id'    => 'admin_only',
            'title' => '管理员专属',
            'href'  => '#',
        );
        $wp_admin_bar->add_menu( $args );
    } else {
        // 其他用户可以看见的菜单
        $args = array(
            'id'    => 'user_only',
            'title' => '普通用户',
            'href'  => '#',
        );
        $wp_admin_bar->add_menu( $args );
    }
}
add_action( 'wp_before_admin_bar_render', 'my_conditional_admin_bar_menu' );

current_user_can() 函数用于判断当前用户是否具有某种权限。

4.2 使用 Font Awesome 等图标

虽然不建议使用图片和字体图标,但如果实在需要,可以使用CSS来添加图标。 例如,先引入 Font Awesome 的 CSS,然后在菜单项的 title 中使用 HTML entities。

function my_admin_bar_with_icon() {
    global $wp_admin_bar;

    if ( ! is_object( $wp_admin_bar ) )
        return;

    $args = array(
        'id'    => 'my_icon_menu',
        'title' => '<i class="fa fa-cog"></i> 设置', // 使用 Font Awesome 的齿轮图标
        'href'  => '#',
    );
    $wp_admin_bar->add_menu( $args );
}
add_action( 'wp_before_admin_bar_render', 'my_admin_bar_with_icon' );

需要确保你的主题或者插件已经引入了 Font Awesome 的 CSS文件。

4.3 给菜单项添加class

添加class可以更方便的修改样式。

function my_admin_bar_with_class() {
    global $wp_admin_bar;

    if ( ! is_object( $wp_admin_bar ) ) {
        return;
    }

    $args = array(
        'id'     => 'my_custom_item',
        'title'  => '自定义菜单',
        'href'   => '#',
        'meta'   => array(
            'class' => 'my-custom-class', // 添加class
            'title' => '鼠标悬停的提示文字',
        ),
    );
    $wp_admin_bar->add_menu( $args );
}
add_action( 'wp_before_admin_bar_render', 'my_admin_bar_with_class' );

第五部分:注意事项

  • ID的唯一性: 每个菜单项的ID必须是唯一的,否则会导致冲突。
  • 优先级: wp_before_admin_bar_render 钩子的优先级默认为 10。 如果你的修改没有生效,可以尝试调整钩子的优先级。
  • 调试: 使用 var_dump($wp_admin_bar)print_r($wp_admin_bar) 可以查看 $wp_admin_bar 对象的内容,方便调试。
  • 性能: 避免在 wp_before_admin_bar_render 钩子中执行耗时的操作,以免影响页面加载速度。
  • 不要过度修改: 尽量保持工具栏的简洁和易用性,不要添加太多不必要的菜单项。

第六部分:总结

wp_before_admin_bar_render 钩子是一个强大的工具,可以让你灵活地定制 WordPress 管理员工具栏。通过它可以添加新的菜单项,移除不需要的,修改已有的,甚至添加自定义的 CSS 样式。 掌握了这个钩子,你就可以打造一个更符合你需求的 WordPress 管理界面。

记住,代码只是工具,创意才是灵魂。 祝大家玩得开心!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注