WordPress

自定义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 admin bar链接
添加自定义菜单

移除菜单

例如,移除菜单最左边的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

IDMenu TitleParent ID
user-actionsGroup Nodemy-account
documentationDocumentationwp-logo-external
feedbackFeedbackwp-logo-external
support-forumsSupportwp-logo-external
wporgWordPress.orgwp-logo-external
aboutAbout WordPresswp-logo
wp-logo-externalGroup Nodewp-logo
edit-profileEdit Profileuser-actions
logoutLog Outuser-actions
user-infoadminuser-actions
my-accountHowdy, admintop-secondary
searchSearchtop-secondary
comments00 Comments in moderationTop Level
customizeCustomizeTop Level
new-contentNewTop Level
query-monitorQuery MonitorTop Level
site-nameWordPressTop Level
top-secondaryGroup NodeTop Level
wp-logoAbout WordPressTop Level
appearanceGroup Nodesite-name
dashboardDashboardsite-name
new-mediaMedianew-content
new-pagePagenew-content
new-postPostnew-content
new-productProductnew-content
new-shop_couponCouponnew-content
new-shop_orderOrdernew-content
new-userUsernew-content
backgroundBackgroundappearance
headerHeaderappearance
menusMenusappearance
themesThemesappearance
widgetsWidgetsappearance

参考文章:Customize Admin Bar in WordPress

2条评论

留言

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