會員網站常有這類需求：
- 經銷商登入後，價格區塊要換成不同的顏色
- 沒登入的訪客看到「加入會員享優惠」的橫幅，登入之後就不要再出現
- 管理員登入時，上方的工具列把固定在最上面的選單擋住了
這些都可以用「依身分套用不同 CSS」解決。這篇整理三種寫法，從完全不用寫 PHP，到依角色載入獨立的樣式檔。
寫法一：用內建的 logged-in class（不用寫 PHP）
WordPress 會在登入使用者看到的頁面上，替 <body> 標籤加上 logged-in 這個 class；有顯示管理工具列時，還會加上 admin-bar。所以只需要分「有沒有登入」的話，直接寫 CSS 就好：
/* 只有沒登入的訪客看得到的橫幅 */
.join-banner {
display: none;
}
body:not(.logged-in) .join-banner {
display: block;
}
/* 登入的會員看到不同顏色的按鈕 */
body.logged-in .buy-button {
background: #0099cb;
}CSS 可以放在「外觀 → 自訂 → 附加 CSS」、區塊主題網站編輯器樣式設定裡的「附加 CSS」，或子主題的 style.css。
前提是主題有在 <body> 標籤上呼叫 body_class()，絕大多數主題都有。不確定的話，按 F12 打開開發者工具，看 <body> 上面有沒有一長串 class 就知道了。
管理工具列擋住固定選單
登入之後，頁面最上方會多一條管理工具列。如果網站的選單是固定在畫面最上方（position: fixed），就會被它擋住。用 admin-bar 這個 class 把選單往下移：
body.admin-bar .site-header {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar .site-header {
top: 46px;
}
}工具列在電腦上的高度是 32px，螢幕寬度 782px 以下會變成 46px。.site-header 請換成你的主題選單的 class。如果你覺得工具列礙事，也可以直接在前台把它隱藏。
寫法二：替 body 加上角色 class
要分得更細，例如只針對「經銷商」角色，就用 body_class 這個 filter，把目前使用者的角色加到 <body> 上。在子主題的 functions.php（或 Code Snippets 外掛）加入：
add_filter( 'body_class', 'ahwei_role_body_class' );
function ahwei_role_body_class( $classes ) {
if ( ! is_user_logged_in() ) {
$classes[] = 'role-guest';
return $classes;
}
$user = wp_get_current_user();
foreach ( (array) $user->roles as $role ) {
$classes[] = 'role-' . sanitize_html_class( $role );
}
return $classes;
}加了之後，<body> 會多出 role-administrator、role-c_business 這樣的 class，沒登入的訪客則是 role-guest。接著就能針對角色寫 CSS：
/* 經銷商(c_business)看到的價格區塊 */
body.role-c_business .price-box {
border: 2px solid #0099cb;
}
/* 訪客不顯示「會員專區」的選單項目 */
body.role-guest .menu-item-members {
display: none;
}c_business 換成你的角色代稱。不知道角色代稱是什麼的話，到後台「使用者」列表，點上方的角色篩選，網址裡 role= 後面的文字就是。自訂角色的建立方式，請看WordPress 使用者角色與權限完整指南。
寫法三：依角色載入獨立的 CSS 檔
某個角色的樣式很多，不想全部擠在主要的樣式檔裡，可以另外寫一個 CSS 檔，只在那個角色登入時載入，其他訪客完全不會下載這個檔案：
add_action( 'wp_enqueue_scripts', 'ahwei_role_stylesheet' );
function ahwei_role_stylesheet() {
if ( ! is_user_logged_in() ) {
return;
}
$user = wp_get_current_user();
if ( in_array( 'c_business', (array) $user->roles, true ) ) {
wp_enqueue_style(
'ahwei-business',
get_stylesheet_directory_uri() . '/css/business.css',
array(),
'1.0'
);
}
}樣式寫在子主題裡的 css/business.css。'1.0' 是版本號，修改 CSS 之後改成 '1.1'，瀏覽器才會重新下載新的檔案。
只有幾行 CSS：用行內樣式
舊版文章的做法，是掛在 wp_head 上直接輸出 <style> 標籤。這樣也能用，但現在建議用 wp_add_inline_style()，讓 WordPress 統一管理樣式的輸出順序：
add_action( 'wp_enqueue_scripts', 'ahwei_role_inline_css' );
function ahwei_role_inline_css() {
$user = wp_get_current_user();
if ( ! in_array( 'c_business', (array) $user->roles, true ) ) {
return;
}
$css = '.price-box { border: 2px solid #0099cb; }';
wp_register_style( 'ahwei-role-inline', false );
wp_enqueue_style( 'ahwei-role-inline' );
wp_add_inline_style( 'ahwei-role-inline', $css );
}wp_register_style() 的第二個參數填 false，代表不載入檔案，只用來掛上這段行內樣式。
想針對「某種權限以上的人」，而不是某個特定角色，把判斷改成權限檢查，例如 current_user_can( 'edit_posts' ) 代表投稿者以上的人。之後新增角色，也不用回頭改程式。
一定要知道：CSS 隱藏不等於權限控管
display: none 只是讓內容不顯示，HTML 原始碼裡還是看得到。任何人按右鍵「檢視網頁原始碼」，就能看到被藏起來的價格、連結或文字。
- 真正只給會員看的內容，要在伺服器端就不輸出，做法請看WordPress 依登入狀態、會員角色顯示部分內容。
- 也不要用這種方式藏關鍵字給搜尋引擎看，那是 Google 明確禁止的隱藏文字手法。
快取外掛會不會影響？
快取外掛通常只替沒登入的訪客產生快取頁面，登入的使用者每次看到的都是即時產生的頁面，所以依角色套用 CSS 一般不會有問題。如果你在快取外掛裡開啟了「替登入使用者快取」之類的選項，不同角色可能拿到同一份頁面，就要特別確認。
延伸閱讀
- WordPress 使用者角色與權限完整指南：預設角色、檢查權限、建立自訂角色
- WordPress 依登入狀態、會員角色顯示部分內容：不用外掛的短代碼寫法
- WordPress 隱藏上方工具列：前台關閉、只讓管理員看到，或移到畫面下方
給不同身分的訪客不同的瀏覽體驗，細節做好了，會員會更有感。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與 RWD 響應式網站，會員網站的版面需求歡迎來聊聊。
發表留言
還沒有人留言，歡迎第一個分享你的想法或問題。留言經審核後才會顯示，Email 不會公開。