首页 › WordPress 教程 › 10+关于WordPress顶部工具栏(Adminbar)的小技巧

10+关于WordPress顶部工具栏(Adminbar)的小技巧

在登录WordPress后顶部总有一个小小的工具栏(Adminbar)，但您绝对不知道这里面还可以自定义出许多实用的效果！这篇文章将为您列举在修改顶部工具栏时的10多个小技巧。原文修改自techNerdia的《30+ WordPress Admin Bar Tips and Tricks》转载请注明出处。

请注意：以下代码均放至主题目录下的functions.php文件下，如果您在登录WP后台后依旧没有看到顶部工具栏，不如试试在主题文件中的footer.php里加入一行<?php wp_footer();?> 看看是否解决了问题。以下技巧在WordPress 3.4.1下测试通过，WP若无较大改动应该可以继续使用。

对所有用户和访客禁用顶部工具栏

一行代码搞定：

remove_action( 'init', '_wp_admin_bar_init' );

仅对管理员用户显示顶部工具栏

if ( !current_user_can( 'manage_options' ) ) {  
    remove_action( 'init', '_wp_admin_bar_init' );  
}

仅在后台显示顶部工具栏

或许我们在访问前台时可以不用看到它。

if ( is_admin() ) {  
    remove_action( 'init', '_wp_admin_bar_init' );  
}

仅在前台显示顶部工具栏

与上条相反的功能，仅仅加了个感叹号……

if ( !is_admin() ) {  
    remove_action( 'init', '_wp_admin_bar_init' );  
}

移除顶部工具栏28px的间距

某些博客的顶部工具栏前面还有一段空白，可用以下代码删除

function remove_adminbar_margin() {  
    $remove_adminbar_margin = '<style type="text/css">  
        html { margin-top: -28px !important; }  
        * html body { margin-top: -28px !important; }  
    </style>';  
    echo $remove_adminbar_margin;  
}  
/* wp-admin area */  
if ( is_admin() ) {  
    remove_action( 'init', '_wp_admin_bar_init' );  
    add_action( 'admin_head', 'remove_adminbar_margin' );  
}  
/* websites */  
if ( !is_admin() ) {  
    remove_action( 'init', '_wp_admin_bar_init' );  
    add_action( 'wp_head', 'remove_adminbar_margin' );  
}

移除顶部工具栏上的WordPress Logo

function remove_wp_logo() {  
    global $wp_admin_bar;  
    $wp_admin_bar->remove_menu('wp-logo');  
}  
add_action( 'wp_before_admin_bar_render', 'remove_wp_logo' );

移除顶部工具栏上的评论提示

评论提示是什么？就是那个在网站名右边的泡泡，不需要时可以关掉。

function remove_comment_bubble() {  
    global $wp_admin_bar;  
    $wp_admin_bar->remove_menu('comments');  
}  
add_action( 'wp_before_admin_bar_render', 'remove_comment_bubble' );

移除顶部工具栏“新建”按钮

function disable_new_content() {  
    global $wp_admin_bar;  
    $wp_admin_bar->remove_menu('new-content');  
}  
add_action( 'wp_before_admin_bar_render', 'disable_new_content' );

移除顶部工具栏“升级”按钮

在插件或主题有新版本时会自动提示，可直接关闭。

function disable_bar_updates() {  
    global $wp_admin_bar;  
    $wp_admin_bar->remove_menu('updates');  
}  
add_action( 'wp_before_admin_bar_render', 'disable_bar_updates' );

在顶部工具栏添加一个带链接的按钮

function custom_adminbar_menu( $meta = TRUE ) {  
    global $wp_admin_bar;  
        if ( !is_user_logged_in() ) { return; }  
        if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }  
    $wp_admin_bar->add_menu( array(  
        'id' => 'custom_menu',  
        'title' => __( 'Menu Name' ),  /* 这里是按钮的名称 */
        'href' => 'http://google.com/',  /* 注意改里面的链接 */
        'meta'  => array( target => '_blank' ) )  
    );  
}  
add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 );  
/* add_action后面的15是按钮的位置，具体修改看下
10 = 在WP Logo之前
15 = 在WP Logo之后
25 = 在网站名称之后
100 = 最后 */

在顶部工具栏添加一个带下滑链接的按钮

类似于这样：

function custom_adminbar_menu( $meta = TRUE ) {  
    global $wp_admin_bar;  
        if ( !is_user_logged_in() ) { return; }  
        if ( !is_super_admin() || !is_admin_bar_showing() ) { return; }  
    $wp_admin_bar->add_menu( array(  
        'id' => 'custom_menu',  
        'title' => __( 'Menu Name' ) )       /* 更改按钮名称 */  
    );  
    $wp_admin_bar->add_menu( array(  
        'parent' => 'custom_menu',  
        'id'     => 'custom_links',  
        'title' => __( 'Google'),            /*更改链接 */  
        'href' => 'http://google.com/',      /* 更改链接地址 */  
        'meta'  => array( target => '_blank' ) )  
    );  
}  
add_action( 'admin_bar_menu', 'custom_adminbar_menu', 15 );  
/* 15的修改方法和上面一样 */

更换顶部工具栏的WP Logo

图片最好为png格式：

function add_mysites_logo() {  
    global $wp_admin_bar;  
    foreach ( (array) $wp_admin_bar->user->blogs as $blog ) {  
        $menu_id  = 'blog-' . $blog->userblog_id;  
        $blogname = emptyempty( $blog->blogname ) ? $blog->domain : $blog->blogname;  
        $blavatar = '<img src="' . get_bloginfo('template_directory') . '/images/NEW-ICON-HERE.png" alt="' . esc_attr__( 'Blavatar' ) . '" width="16" height="16" class="blavatar"/>';  /* /images/NEW-ICON-HERE.png 请自行修改 */
        $wp_admin_bar->add_menu( array(  
            'parent'    => 'my-sites-list',  
            'id'    => $menu_id,  
            'title'     => $blavatar . $blogname,  
            'href'  => get_admin_url( $blog->userblog_id ) )  
        );  
    }  
}  
add_action( 'wp_before_admin_bar_render', 'add_mysites_logo' );

让顶部工具栏有透明效果

比较炫，透明度可随意调整。

function adminbar_opacity() {  
    $adminbar_opacity = '<style type="text/css">#wpadminbar { filter:alpha(opacity=50); opacity:0.5; }</style>';  
    echo $adminbar_opacity;  
}  
/* wp-admin area */  
if ( is_admin() ) {  
    add_action( 'admin_head', 'adminbar_opacity' );  
}  
/* websites */  
if ( !is_admin() ) {  
    add_action( 'wp_head', 'adminbar_opacity' );  
}

只在鼠标移至顶部时显示工具栏

function hide_adminbar() {  
    $hide_adminbar = '<script type="text/javascript">  
        $(document).ready( function() {  
            $("#wpadminbar").fadeTo( "slow", 0 );  
            $("#wpadminbar").hover(function() {  
                $("#wpadminbar").fadeTo( "slow", 1 );  
            }, function() {  
                $("#wpadminbar").fadeTo( "slow", 0 );  
            });  
        });  
    </script>  
    <style type="text/css">  
        html { margin-top: -28px !important; }  
        * html body { margin-top: -28px !important; }  
        #wpadminbar {  
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
            filter: alpha(opacity=0);  
            -moz-opacity:0;  
            -khtml-opacity:0;  
            opacity:0;  
        }  
        #wpadminbar:hover, #wpadminbar:focus {  
            -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  
            filter: alpha(opacity=100);  
            -moz-opacity:1;  
            -khtml-opacity:1;  
            opacity:1;  
        }  
    </style>';  
    echo $hide_adminbar;  
}  
/* wp-admin area */  
if ( is_admin() ) {  
    add_action( 'admin_head', 'hide_adminbar' );  
}  
/* websites */  
if ( !is_admin() ) {  
    add_action( 'wp_head', 'hide_adminbar' );  
}

更改顶部工具栏的颜色

基本上需要改的都写上了，本代码预置的颜色为蓝色。

function change_adminbar_colors() {  
    $change_adminbar_colors = '<style type="text/css">  
        #wpadminbar *, #wpadminbar{ color:#ffffff;text-shadow:#444444 0 -1px 0; }  
        #wpadminbar{  
            background-color:#003399;  
            background-image:-ms-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:-moz-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:-o-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399));  
            background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:linear-gradient(bottom,#000033,#003399 5px);  
        }  
        /* menu separators */  
        #wpadminbar .quicklinks>ul>li{border-right:1px solid #003399;}  
        #wpadminbar .quicklinks>ul>li>a,#wpadminbar .quicklinks>ul>li>.ab-emptyempty-item{border-right:1px solid #000033;}  
        #wpadminbar .quicklinks .ab-top-secondary>li{border-left:1px solid #000033;}  
        #wpadminbar .quicklinks .ab-top-secondary>li>a,#wpadminbar .quicklinks .ab-top-secondary>li>.ab-emptyempty-item{border-left:1px solid #003399;}  
        /* menu hover color and hover link color */  
        #wpadminbar.nojs .ab-top-menu>li.menupop:hover>.ab-item,#wpadminbar .ab-top-menu>li.menupop.hover>.ab-item{background:#333333;color:#ffffff;}  
        #wpadminbar .hover .ab-label,#wpadminbar.nojq .ab-item:focus .ab-label{color:#ffffff;}  
        #wpadminbar .menupop.hover .ab-label{color:#ffffff;}  
        /* menu, on mouse over hover colors */  
        #wpadminbar .ab-top-menu>li:hover>.ab-item,#wpadminbar .ab-top-menu>li.hover>.ab-item,#wpadminbar .ab-top-menu>li>.ab-item:focus,#wpadminbar.nojq .quicklinks .ab-top-menu>li>.ab-item:focus{  
            color:#fafafa;  
            background-color:#000033;  
            background-image:-ms-linear-gradient(bottom,#003399,#000033);  
            background-image:-moz-linear-gradient(bottom,#003399,#000033);  
            background-image:-o-linear-gradient(bottom,#003399,#000033);  
            background-image:-webkit-gradient(linear,left bottom,left top,from(#003399),to(#003399));  
            background-image:-webkit-linear-gradient(bottom,#003399,#000033);  
            background-image:linear-gradient(bottom,#003399,#000033);  
        }  
        /* menu item links hover color */  
        #wpadminbar .menupop li:hover,#wpadminbar .menupop li.hover,#wpadminbar .quicklinks .menupop .ab-item:focus,#wpadminbar .quicklinks .ab-top-menu .menupop .ab-item:focus{background-color:#ccffcc;}  
        /* menu item non-link colors */  
        #wpadminbar .ab-submenu .ab-item{color:#333333;}  
        /* menu item link colors */  
        #wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .quicklinks .menupop.hover ul li a,#wpadminbar.nojs .quicklinks .menupop:hover ul li a{color:#0099cc;}  
        /* my sites hover color */  
        #wpadminbar .quicklinks .menupop .ab-sub-secondary>li:hover,#wpadminbar .quicklinks .menupop .ab-sub-secondary>li.hover,#wpadminbar .quicklinks .menupop .ab-sub-secondary>li .ab-item:focus{background-color:#dfdfdf;}  
        /* update menu colors */  
        #wpadminbar .quicklinks a span#ab-updates{background:#eeeeee;color:#333333;}  
        #wpadminbar .quicklinks a:hover span#ab-updates{background:#ffffff;color:#000000;}  
        /* howdy menu */  
        #wpadminbar .ab-top-secondary{  
            background-color:#003399;  
            background-image:-ms-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:-moz-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:-o-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:-webkit-gradient(linear,left bottom,left top,from(#000033),to(#003399));  
            background-image:-webkit-linear-gradient(bottom,#000033,#003399 5px);  
            background-image:linear-gradient(bottom,#000033,#003399 5px);  
        }  
        /* Howdy menu, username text color in dropdown */  
        #wpadminbar #wp-admin-bar-user-info .display-name{color:#333333;}  
        #wpadminbar #wp-admin-bar-user-info .username{color:#999999;}  
        /* search */  
        #wpadminbar #adminbarsearch .adminbar-input{color:#ccc;text-shadow:#444 0 -1px 0;background-color:rgba(255,255,255,0);}  
        #wpadminbar #adminbarsearch .adminbar-input:focus{color:#555;text-shadow:0 1px 0 #fff;background-color:rgba(255,255,255,0.9);}  
        #wpadminbar.ie8 #adminbarsearch .adminbar-input{background-color:#003399;}  
        #wpadminbar.ie8 #adminbarsearch .adminbar-input:focus{background-color:#fff;}  
        #wpadminbar #adminbarsearch .adminbar-input::-webkit-input-placeholder{color:#ddd;}  
        #wpadminbar #adminbarsearch .adminbar-input:-moz-placeholder{color:#ddd;}  
    </style>';  
    echo $change_adminbar_colors;  
}  
/* wp-admin area */  
if ( is_admin() ) {  
    add_action( 'admin_head', 'change_adminbar_colors' );  
}  
/* websites */  
if ( !is_admin() ) {  
    add_action( 'wp_head', 'change_adminbar_colors' );  
}

#AdminBar#顶部工具栏

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题，请至 WP酷的百度网盘（提取码: 5rbm）自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便，敬请谅解！

免费部落

学习了,以后常来!
10年前
yimo

怎么指定作用用户组呢？例如如果我要针对编辑组添加子菜单的话。
10年前
晓午林枫

学习学习
8年前
小若

在顶部工具栏添加一个带链接的按钮
这个只能添加一个，添加两个就会出错，修改了不同的id也出错，是什么问题呀？
766057766@qq.com
6年前
webkv

这篇真的好详细，之前试了几个都无法移除有选项卡节点的下拉菜单。
5年前