如何隐藏 WordPress 管理栏

WordPress登录用户的管理栏提供了一种便捷方式，可快速访问常用功能，例如编辑文章或清除网站缓存。然而，尤其是在开发新网站时，我一直讨厌管理栏的一点：它过于显眼，难以专注于设计和内容。当然，可以选择完全隐藏它，但偶尔我还是需要快速访问一些基本功能，例如切换到页面编辑。

如果您想完全禁用管理栏，以下是可切换它的截图：

我不喜欢这种解决方案，因为我喜欢轻松切换的便捷性，但同时，我也想要更优雅的方案。几年前，我偶然发现了这个调整方法。因此，我进一步完善它，并将其打包成一个插件，并做了一些调整。只需比较原始的管理栏和我的：

默认管理栏始终可见

调整后的管理栏隐藏在红色圆圈下

将鼠标悬停在圆圈上，垂直管理栏就会出现

如您所见，没有黑色条。取而代之的是一个小小的红色圆圈（颜色和图标可以更改）。将鼠标悬停在图标上，就会显示垂直条。因此，所有基本链接都保持可访问，但在您需要它们之前是隐藏的。简洁明了。

我的解决方案并非完美无缺。可能最大的缺点是它可能无法与各种插件的冗长菜单标题正常工作。这对我来说并不重要，因为我保持插件数量精简。例如，此网站只使用了大约7个插件。

除了重新定位管理栏外，我的解决方案还将网站标题更改为URL地址。在处理标题很长的网站时，这非常方便。域名通常较短。

安装方法

方法一 是使用单个文件插件，将其上传到/wp-content/plugins文件夹并在“插件”部分激活。您可以在我的原始文章中下载插件：https://www.php.cn/link/bca314ed6a27eb1a7ce8434de54e3453

方法二 是将代码添加到主题的functions.php文件：

<code class="language-php">// 在管理栏中显示域名而不是网站标题
add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );
function customize_my_wp_admin_bar( $wp_admin_bar ) {
    $node = $wp_admin_bar->get_node('site-name');
    $new_site_name = preg_replace("(^https?://)", "", get_home_url() );
    $node->title = $new_site_name;
    $wp_admin_bar->add_node($node);
}

final class Kama_Collapse_Toolbar {

    public static function init(){
        add_action( 'admin_bar_init', [ __CLASS__, 'hooks' ] );
    }

    public static function hooks(){

        // remove html margin bumps
        remove_action( 'wp_head', '_admin_bar_bump_cb' );

        add_action( 'wp_head', [ __CLASS__, 'collapse_styles' ] );
    }

    public static function collapse_styles(){

        // do nothing for admin-panel.
        // Remove this if you want to collapse admin-bar in admin-panel too.
        if( is_admin() ){
            return;
        }

        ob_start();
        ?>

        <style>
            #wpadminbar {
                position: fixed !important;
                top: -32px !important;
                transition: top 0.3s ease;
            }
            #wpadminbar.expanded {
                top: 0 !important;
            }
            #wpadminbar #wp-admin-bar-site-name {
                display: none;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded {
                display: block;
            }
            #wpadminbar #wp-admin-bar-site-name .ab-item:before {
                content: "\f321"; /* Dashicons icon */
                font-family: 'dashicons';
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                color: red; /* Icon color */
                margin-right: 0.3em;
            }
            #wpadminbar #wp-admin-bar-site-name.expanded .ab-item:before {
                display: none;
            }
        </style>

        <?php
        echo ob_get_clean();
    }
}

Kama_Collapse_Toolbar::init();</code>

由于我在许多网站上重复使用它，我发现使用第一种方法更方便。它也使我的functions.php文件更精简，这对我来说是一个好处。

几点说明

如何更改图标

要更改图标，您应该更改`wpadminbar #wp-admin-bar-site-name>.ab-item:before`元素。从dashicons中选择任何图标，并编辑CSS中的`content`属性。

如何更改图标颜色

再次进入代码，找到并编辑`wpadminbar #wp-admin-bar-site-name>.ab-item:before`元素的颜色。对我来说，红色由于对比度的原因效果很好。

如何在管理栏中保留网站标题

从插件文件或您的`functions.php`文件中删除此代码：
`add_action( 'admin_bar_menu', 'customize_my_wp_admin_bar', 80 );`
`function customize_my_wp_admin_bar( $wp_admin_bar ) {`
` $node = $wp_admin_bar->get_node('site-name');`
` $new_site_name = preg_replace("(^https?://)", "", get_home_url() );`
` $node->title = $new_site_name;`
` $wp_admin_bar->add_node($node);`
`} ```

以上是如何隐藏 WordPress 管理栏的详细内容。更多信息请关注PHP中文网其他相关文章！