分析 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' );

这段代码做了什么？

my_custom_admin_bar_menu() 函数：这是你的自定义函数，用于修改工具栏。
global $wp_admin_bar;：声明 $wp_admin_bar 为全局变量，以便在函数内部访问它。
if ( ! is_object( $wp_admin_bar ) ) return;：一个安全检查，确保 $wp_admin_bar 对象存在。
$wp_admin_bar->add_menu( $args );：这个是关键，它用于添加新的菜单项。
- id：菜单项的唯一ID，必须是唯一的。
- title：菜单项显示的文字。
- href：菜单项的链接地址。
- parent：指定父菜单的ID。如果为空，则添加到顶级菜单。
- meta：一个数组，可以包含 title (鼠标悬停提示)，onclick (点击事件) 等其他属性。
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 管理界面。

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

发表回复 取消回复

发表回复取消回复