自定义WordPress admin bar菜单(2021)

WordPress admin bar位于网站顶部，当用户登陆后，这个菜单会在前台后台都显示，因此很适合放置一些常用链接。本文简单介绍一下定制WordPress admin bar菜单的方法。

向WordPress admin bar添加菜单

添加一个名为“My Custom Menu”的菜单项，位置可以用add_action的优先级来控制，参数parent设为false，就是创建顶级菜单，设为某个顶级菜单的id，就是创建次级菜单。

add_action( 'admin_bar_menu', 'sola_add_menu_item_to_admin_bar',400 );
function sola_add_menu_item_to_admin_bar( $wp_admin_bar ){

   $wp_admin_bar->add_menu( array(
        'id'     => 'my-menu-id', // Menu ID (Unique and Required)
        'parent' => false, // False for a top level menu
        'title'  => 'My Custom Menu', // Menu Title
        'href'   => admin_url() . 'my-menu-url', // Menu URI
        'group'  => false,// True for a invisible group to manage a set of menu items
        'meta'   => array(
            'html'     => '',
            'class'    => '',
            'rel'   => '',
            'onclick'  => '',            
            'target'   => '',
            'title'    => '',
            'tabindex' => ''
        )
    ) );
}

或者使用wp_before_admin_bar_render。

add_action( 'wp_before_admin_bar_render', 'sola_add_menu_item_to_admin_bar',400 );
function sola_add_menu_item_to_admin_bar(){
    global $wp_admin_bar;
    $wp_admin_bar->add_menu( array(
       ...
    ) );
}

移除菜单

例如，移除菜单最左边的WordPress Logo

add_action( 'wp_before_admin_bar_render', 'sola_remove_wp_logo' );
function sola_remove_wp_logo(){
    global $wp_admin_bar;
    
    $menu_id = 'wp-logo'; // the menu id which you want to remove
    $wp_admin_bar->remove_menu($menu_id);
}

更改已存在的菜单的属性

用$wp-admin-bar->get_node()获取菜单项，更改属性后再重新加回去。例如，将Howdy admin改为Hello admin。

add_filter( 'admin_bar_menu', 'sola_howdy_to_hello' );
function sola_howdy_to_hello( $wp_admin_bar ) {
    $my_account = $wp_admin_bar->get_node('my-account');
    $newtitle   = str_replace( 'Howdy,', 'Hello!', $my_account->title );
    $wp_admin_bar->add_node( array(
        'id'    => 'my-account',
        'title' => $newtitle,
    ));
}

将次级菜单变为顶级菜单

例如，将New -> Post变为顶级菜单

add_action( 'admin_bar_menu', 'sola_convert_sub_to_top', 999 );
function sola_convert_sub_to_top( $wp_admin_bar ) {
    $args = array(
        'id'     => 'new-post', // id of the existing child node
        'title'  => 'Add New Post',
        'parent' => false 
    );
    $wp_admin_bar->add_menu($args);
}

隐藏Admin Bar

对所有人隐藏。

add_filter( 'show_admin_bar', '__return_false' );

对非管理员用户隐藏。

if ( ! current_user_can( 'manage_options' ) ) {
    show_admin_bar( false );
}

子菜单分组

如果你的顶级菜单下的菜单很多，可以分组，组和组之间有明显的分隔。

add_action( 'admin_bar_menu', 'sola_add_group_node' );
function sola_add_group_node(){

    global $wp_admin_bar;

    // Top level menu
    $wp_admin_bar->add_menu( array(
        'id' => 'my-custom-menu',
        'title' => 'My Menu',
    ) );

    // Group 1 - invisible
    $wp_admin_bar->add_group( array(
        'id' => 'my-custom-menu-group-1',
        'title' => '',
        'parent' => 'my-custom-menu',
    ) );

    // Group 2 - invisible
    $wp_admin_bar->add_group( array(
        'id' => 'my-custom-menu-group-2',
        'title' => '',
        'parent' => 'my-custom-menu',
    ) );

    // Items belongs to group 1
    $wp_admin_bar->add_menu( array(
        'id' => 'sub-menu-1',
        'parent' => 'my-custom-menu-group-1',
        'title' => 'Sub Menu 1 of Group 1',
    ) );

    // Items belongs to group 2
    $wp_admin_bar->add_menu( array(
        'id' => 'sub-menu-2',
        'parent' => 'my-custom-menu-group-2',
        'title' => 'Sub Menu 2 of Group 2',
    ) );
}

默认的wp admin bar菜单项目ID

参考文章：Customize Admin Bar in WordPress