最後更新：2026/10/15
〈精簡 WordPress 後台〉那篇教過怎麼依角色把用不到的選單藏起來。選單整理好之後，員工每天看的畫面還有一個問題：每一頁上方都可能冒出外掛的升級廣告、評分邀請、更新提示，一排黃色藍色的框，要看的訂單被擠到下面。
這篇再往下做一步：依登入的人是什麼角色，載入不同的後台樣式。員工看到的畫面乾淨，常按的按鈕大一點；管理員的畫面換個顏色，自己一眼就知道現在是用哪個帳號登入。
不想自己改？把這篇交給 AI
把這篇的網址（或全文）連同下面這段話貼給 AI：
我的網站是 WordPress。我想照下面這篇文章，依登入的角色調整後台的樣子：員工帳號藏起外掛的宣傳和提示，常用按鈕放大，管理員的工具列換顏色。
請先問我：員工用的是什麼角色、後台哪些東西想藏起來或放大。
問清楚之後，再一步一步告訴我：要用哪一段程式碼、貼在哪裡、哪些地方要換成我自己的資料，以及改完怎麼測試。
如果文章的做法不適合我的網站，請直接告訴我原因和替代做法。
文章：（貼上這篇的網址，或整篇內容）改之前先備份，密碼不要貼給 AI。
完整程式碼
// 1. 後台的 <body> 加上目前使用者的角色，例如 role-shop_manager
add_filter('admin_body_class', function ($classes) {
foreach ((array) wp_get_current_user()->roles as $role) {
$classes .= ' role-' . sanitize_html_class($role);
}
return $classes;
});
// 2. 依角色調整後台的樣子（只影響後台）
add_action('admin_enqueue_scripts', function () {
$css = '
/* 商店經理（員工）：藏起外掛的宣傳、更新提示，錯誤訊息照常顯示 */
body.role-shop_manager .notice:not(.notice-error) { display: none; }
/* 員工最常按的按鈕放大一點 */
body.role-shop_manager .wrap .button-primary { font-size: 15px; padding: 4px 18px; }
/* 管理員：後台上方的黑色工具列換成品牌色，一眼分得出是誰在操作 */
body.role-administrator #wpadminbar { background: #1b5e20; }
';
wp_add_inline_style('common', $css);
});程式碼放在 Code Snippets 這類外掛或子主題，放法見〈WooCommerce 結帳頁改成台灣習慣〉。
第一段：讓 CSS 知道現在是誰
CSS 本身不知道登入的是誰。第一段在後台每一頁的 <body> 加上一個標記，商店經理登入時是 role-shop_manager，網站管理員是 role-administrator。有了這個標記，CSS 就可以寫「只有商店經理看到的畫面才這樣」。
角色的代號是英文，對照如下：
| 後台顯示的角色 | 代號 |
|---|---|
| 網站管理員 | administrator |
| 編輯 | editor |
| 作者 | author |
| 投稿者 | contributor |
| 商店經理（WooCommerce） | shop_manager |
| 客戶（WooCommerce） | customer |
外掛也可能新增自己的角色。想查代號，到「使用者」列表，上方有一排「網站管理員 (1)」「商店經理 (2)」這樣的篩選連結，點一下，網址最後 role= 後面的字就是代號。
第二段：每個角色各自的樣式
第二段的 CSS 掛在 WordPress 後台本來就會載入的樣式表後面，所以只影響後台，前台網站完全不受影響。裡面三條規則：
商店經理看不到一般提示。 WordPress 和外掛在後台頁面上方顯示的訊息框，都有 notice 這個 class；錯誤訊息另外有 notice-error。我們讓商店經理看不到「不是錯誤」的訊息框，像是外掛的升級廣告、請你去評分、新功能介紹。紅色的錯誤訊息照常顯示，例如付款設定出了問題，員工還是看得到、會來告訴你。我們在測試站放了一個一般提示和一個錯誤訊息，用商店經理登入，只看得到錯誤訊息；用管理員登入，兩個都在。
這條規則不要用在管理員身上。WordPress 和外掛的更新提示也是這種訊息框，管理員要看得到，才會記得更新。
常用按鈕放大。 後台藍色的主要按鈕（儲存、更新、建立訂單）都有 button-primary 這個 class，我們把商店經理畫面上的這些按鈕字放大、左右加寬。用筆電處理訂單的員工，比較不會點錯。
管理員的工具列換顏色。 後台最上面那條黑色的工具列，在管理員登入時換成深綠色。如果你自己有管理員帳號，也有員工帳號用來確認員工看到的畫面，一看顏色就知道現在是哪個身分，不會用員工帳號改了半天設定，才發現沒有權限存檔。
想藏其他東西：用瀏覽器找 class
想再藏某個外掛的方塊，或放大某個按鈕，要先知道它的 class。在 Chrome 對那個東西按右鍵選「檢查」，右邊會跳出網頁的原始碼，反白的那一行就是它，class="..." 裡面的字就是可以用的名稱。找到之後，照第二段的格式加一行：
body.role-shop_manager .那個class { display: none; }藏起來的東西，只是畫面上看不到，功能還在。員工如果知道網址，一樣進得去那一頁，所以不能讓員工動的設定，要用角色權限管，不能只靠藏。角色權限怎麼給，見〈精簡 WordPress 後台〉。
後台也是給人用的
網站的前台是給客人看的，後台是給每天在裡面工作的人用的。員工打開後台，看到的是乾淨的畫面、找得到的按鈕，處理訂單的速度和出錯的次數都會不一樣。把後台整理成員工好用的樣子，和把前台設計得好看一樣值得花時間。
如果你想要一個員工好上手、前後台都整理好的網站，可以先看〈IG 帳號不是你的資產〉想想網站要做到什麼。MIMI 專做客製化網頁設計，交件時會依你的團隊分工設定後台帳號和權限。MIMI 提供台灣網頁設計服務，各縣市的店家都可以用電話、Email 和設計師討論；費用可以先看首頁的製作費用參考，歡迎聯絡 MIMI。
