針對不同使用者角色更改網站的外觀有助於創建個人化體驗。
我們發現許多用戶更喜歡具有客製化介面的網站。例如，您可能想要向作者顯示對其他使用者隱藏的特定項目，或為訂閱者或客戶建立不同的部分。
在本教學中，我們將引導您在 WordPress 中為特定使用者角色套用 CSS。這將幫助您根據用戶的特定需求自訂不同的區域。
為何以及何時為 WordPress 中的特定使用者角色套用 CSS
對於我們的公司，我們管理多個需要使用者登入的網站。我們經常需要為不同的使用者角色自訂外觀。
透過在這些網站上執行對比測試，我們發現個人化顯著改善了使用者體驗。更好的使用者體驗最終會帶來更高的客戶滿意度、轉換率和銷售額。
無論您是網站所有者、開發人員還是設計師，控制網站對不同使用者的外觀都非常有用。
以下是一些常見用例：
- 會員網站：您可以使用自訂 CSS 為高級會員提供不同的體驗。
- 電子商務商店：您可以突出顯示購物車、回頭 2024 年更新的全球電話號碼列表 客折扣以及登入客戶的其他功能。
- 多作者部落格：管理多作者部落格可能會變得混亂。使用自訂 CSS，您可以為編輯者建立乾淨且有效率的介面，同時讓貢獻者和訂閱者保持簡單。
- 客戶網站：您可以透過使用自訂 CSS 隱藏某些元素來為客戶建立簡化的管理區域。
現在的問題是如何告訴 WordPress 要為不同的使用者角色載入哪些 CSS 程式碼。
在 WordPress 中為特定使用者角色應用自訂 CSS
在 WordPress 中管理自訂程式碼（包括 CSS）的最簡單方法是使用WPCode。它是 WordPress 最好的程式碼片段插件，可讓您在一個地方安全地管理自訂 CSS。
注意：還有一個免費版本的 WPCode可用。但是，我們建議升級到付費方案以解鎖更多功能。
為什麼我們推薦 WPCode：
- 它允許您安全地添加任何自訂程式碼，包括 CSS，而不會破壞您的網站。如果程式碼片段不起作用，您可以輕鬆停用它。
- 它具有強大的程式碼注入和條件邏輯工具，可讓您僅在必要時運行程式碼片段。
- 您將可以存取包含有用片段的巨大程式碼庫，這將使您無需安裝多個單獨的插件。
話雖如此，讓我們添加一些自訂 CSS 並將其應用到特定的使用者角色。
在 WPCode 中新增自訂 CSS
首先，您需要安裝並啟用WPCode外掛程式。有關更多詳細信息，請參閱我們有關如何安裝 WordPress 插件的教程。
啟動後，進入「程式碼片段」+新增片段頁面。在那裡您將看到許多針對各種任務的有用片段。
現在您可以在「程式碼預覽」方塊中新增自訂 CSS 程式碼。
在本教程中，我們將使用此程式碼，它透過更改 您需要避免的常見 SEO 錯誤 背景顏色來突出顯示管理區域中的「訊息」選單。您可以使用自己的 CSS 程式碼：
選擇使用者角色的條件邏輯
然後，捲動到“智慧條件邏輯”框並打開“啟用邏輯”選項旁邊的開關。
然後，選擇“條件”（顯示或隱藏）並點擊“新增群組”。
按一下第一個規則方塊將其展開。您將看到可供選擇的規則清單。
例如，您可以選擇登入狀態、使用者角色、裝置類型等。
在 WordPress 管理區域中為特定使用者角色新增自訂 CSS
如果您希望僅在 WordPress 管理區域內新增自訂 CSS，那麼 WPCode 可以讓這一切變得更加簡單。
在程式碼編輯畫面上，捲動到“位置”選項。點擊 迴聲資料庫下拉式選單將其展開，您將看到一組可以自動載入 CSS 的位置。
現在只需選擇「管理頁首」或「管理頁尾」選項即可將 CSS 程式碼上傳到您的 WordPress 管理區域。
為其他領域的特定使用者角色新增自訂 CSS
電子商務網站上的設計客製化可改善用戶體驗，並已被證明可以減少廢棄購物車的銷售。
如果您經營WooCommerce 商店、銷售線上課程或其他數位產品，為登入客戶添加自訂 CSS 將會很有幫助。