WordPress 隱藏上方工具列：前台關閉、只讓管理員看到，或移到畫面下方

登入 WordPress 之後瀏覽自己的網站，畫面最上方會多一條黑色的「工具列」（Admin Bar），可以快速回到後台、編輯目前這一頁。

工具列只有登入的人看得到，一般訪客看不到。所以如果只是覺得它擋到畫面，其實不影響訪客。真正需要處理的情況通常是：

• 會員網站：會員登入後，不想讓他看到這條後台工具列。
• 工具列擋住了固定頁首：自己登入檢查版面時很不方便。
• 想把工具列移到畫面下方：原本另一篇〈用代碼把 WordPress 上方工具欄移到下方〉的內容，已經整合到這篇的最後。

方法一：在個人資料關閉（不用程式碼）

到後台「使用者 → 個人資料」，在「工具列」這一項取消勾選「瀏覽網站時顯示工具列」，按最下面的「更新個人資料」。

這只影響你自己的帳號，其他人不受影響。如果只是自己嫌礙眼，這樣就好。

方法二：全站隱藏，所有人都不顯示

add_filter( 'show_admin_bar', '__return_false' );

這就是舊版文章教的那一行，現在仍然有效。加在子主題的 functions.php 或 Code Snippets 外掛即可。

舊文章說要貼在 ?> 的前面；現在的 functions.php 結尾通常不寫 ?>，直接加在檔案最後面就可以。如果你的檔案結尾真的有 ?>，程式碼要放在它的前面。

這一行只影響前台。後台的工具列是 WordPress 管理介面的一部分，沒辦法用這個方法關閉。

方法三：只讓管理員看到（會員網站常用）

add_filter( 'show_admin_bar', function ( $show ) {
    if ( ! current_user_can( 'manage_options' ) ) {
        return false;
    }
    return $show;
} );

• manage_options 只有網站管理員才有，所以編輯、作者、訂閱者都看不到工具列。
• 想讓會寫文章的人（投稿者以上）保留工具列，只對訂閱者和顧客隱藏，把 manage_options 換成 edit_posts。
• 最後用 return $show 而不是直接回傳 true，管理員在個人資料裡關掉工具列的設定才會繼續有效。

隱藏工具列不代表會員進不了後台。想連後台一起擋，請看WordPress 禁止非管理員進入後台。

不想隱藏，只是工具列擋住了固定頁首

工具列顯示時，WordPress 會在 body 加上 admin-bar 這個 class，並把整個網頁往下推 32px（螢幕寬度 782px 以下是 46px）。如果佈景主題的頁首用 position: fixed 固定在畫面最上方，就會跟工具列疊在一起。

用 admin-bar 這個 class 把頁首往下移就好：

.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

• .site-header 要換成你佈景主題頁首的 class，在頁首按右鍵選「檢查」就看得到。
• CSS 可以放在佈景主題的自訂 CSS，例如「外觀 → 自訂 → 附加的 CSS」。
• 只有登入、工具列出現時才會套用，一般訪客看到的版面不受影響。
• 在手機的窄螢幕上，工具列不會固定在最上方，而是會跟著頁面捲走，頁首上方可能留一段空白。這只有登入時看得到，可以不用理會。

把工具列移到畫面下方

原本另一篇文章的寫法，是用 CSS 把工具列移到畫面底部。那段程式碼是依照早期 WordPress 工具列 28px 的高度寫的，現在工具列是 32px（窄螢幕 46px），直接用會對不齊；而且它同時改動了後台，後台的版面也會被影響。

下面是只作用在前台的新寫法：

add_action( 'wp_head', function () {
    if ( ! is_admin_bar_showing() ) {
        return;
    }
    ?>
    <style>
        html { margin-top: 0 !important; }
        body.admin-bar { padding-bottom: 32px; }
        #wpadminbar { position: fixed !important; top: auto !important; bottom: 0; }
        #wpadminbar .ab-top-menu > .menupop > .ab-sub-wrapper { top: auto; bottom: 100%; }
        @media screen and (max-width: 782px) {
            body.admin-bar { padding-bottom: 46px; }
        }
    </style>
    <?php
}, 100 );

每一行的作用：

• html { margin-top: 0 }：取消 WordPress 為了工具列在網頁上方留的空間。
• body.admin-bar 的 padding-bottom：在網頁最下面留出工具列的高度，頁尾的內容才不會被蓋住。
• #wpadminbar：把工具列固定在畫面底部。
• .ab-sub-wrapper 那一行：讓工具列的下拉選單改成往上展開，不然會跑到螢幕外面。

這段是以 WordPress 預設的工具列樣式為準，如果佈景主題或外掛改過工具列的樣式，可能需要再微調。後台不建議移動工具列，後台的選單與版面都是依照工具列在上方設計的。

老實說，這個需求並不常見。如果只是嫌工具列礙眼，方法一到方法三會簡單很多。

延伸閱讀

• WordPress 禁止非管理員進入後台：訂閱者、會員登入後自動導回首頁
• WordPress 依訪客或會員角色套用不同 CSS：body class 與載入樣式檔的寫法
• WordPress functions.php 實用程式碼整理：10 個常用又安全的小技巧

會員登入後看到的畫面，也是網站體驗的一部分。正威網路行銷是基隆在地、25 年經驗的基隆網頁設計工作室，提供 RWD 響應式網站與客製化網頁設計，服務台北與全台客戶，歡迎來聊聊。