自动隐藏WordPress顶部管理工具条

WordPress登录后,会在顶部显示一黑色顶部管理工具条(Admin Bar),着实不美观。虽然要隐藏它很容易,只要登陆后台→用户→个人资料→取消在浏览站点时显示工具栏的勾选即可,但一旦想用就不方便了。

找到了一个灵活的办法,可以实现隐藏工具条,当鼠标悬停在上面时才显示。将如下代码复制入function.php即可。

/* 
 * Hide the WordPress Admin Bar with CSS, then display the Admin Bar on hover with CSS and jQuery 
 */  
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' ); 
}

参考:《25+自定义WordPress顶部管理工具条的技巧》。

共有 6 条评论

发表评论

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

  1. 我的个人资料下,没有取消工具栏这项,只有“在浏览站点时显示工具栏”这一项。
    并且这一选项只在前端有效……
    所以你的取消工具栏这项是哪里来的?

      1. @老虎 。。。。。。。。

        我还以为你是说在后台也能取消掉这个功能呢……

        “WordPress登录后”这句话太有误导性了,嚓!