如何隱藏 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中文網其他相關文章！