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. Betty

    上海

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

    八年前 Google Chrome 47 · Windows 8.1

    回复

    • S

      江苏

      @Betty 嗯就是这个意思……

      八年前 Wordpress App 5 · iPhone iOS 9.2

      回复

      • Betty

        上海

        @S 。。。。。。。。

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

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

        八年前 Google Chrome 47 · Windows 8.1

        回复

        • S

          江苏

          @Betty 后台也可以,用上面的代码。

          八年前 Google Chrome 46 · Mac OS X 10.11

          回复

          • Betty

            上海

            @S 不想在function.php加太多非必要性的代码,我喜欢轻装上阵。

            另外,强烈建议订阅设置开启全文输出。

            八年前 Google Chrome 47 · Mac OS X 10.11

            回复

            • S

              江苏

              @Betty ok

              八年前 Wordpress App 5 · iPhone iOS 9.2

              回复

       

发表评论

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