為什麼在 WordPress 中突出顯示選單項目？
導航選單是指向您網站重要區域的連結列表，通常以橫條的形式出現在每個 WordPress 網站頁面的頁頭。通過在導航選單中突出顯示一個選單項目，您可以輕鬆地將使用者的注意力引導至您最重要的行動呼籲。例如，如果您希望使用者訪問定價頁面或某篇特定文章，那麼您可以在導航選單中突出顯示該項目，這樣可以增加該頁面的流量並提升銷售量。
方法 1：使用完整網站編輯器（Full Site Editor）突出顯示選單項目
如果您使用的是區塊啟用的主題，那麼您將擁有完整網站編輯器（FSE）而不是較舊的主題自訂器。您也可以在其中輕鬆地突出顯示當前的選單項目。首先，從 WordPress 管理儀表板前往“外觀 » 編輯器”頁面。這將把您引導至完整網站編輯器。
接著，雙擊要突出顯示的選單項目，然後點擊頂部的“設定”圖標。這會立即在區塊面板中打開該選單項目的設定。現在，向下滾動到“進階”標籤，點擊旁邊的箭頭圖標以展開它。這會打開一個“額外 CSS 類別”字段，您需要在其中寫入 highlighted-menu。
接下來，點擊頁面頂部的“保存”按鈕以存儲您的更改。之後，您需要向主題添加一點 CSS 代碼以達成突出效果。您可以選擇修復缺失的主題自訂器，或者使用代碼片段插件來添加 CSS 代碼。
如何使用 WPCode 添加 CSS 片段
要將 CSS 添加到 WordPress，我們推薦使用 WPCode，因為它是市場上最佳的 WordPress 代碼片段插件，可以安全且簡單地添加自訂代碼。首先，您需要安裝並啟用 WPCode 插件。更多說明請參考我們的逐步指南如何安裝 WordPress 插件。
注意：WPCode 也有免費版本，但您需要該插件的高級計畫才能解鎖“CSS 片段”選項。
在激活後，從 WordPress 管理面板導航到“代碼片段 » + 添加片段”頁面。這裡，將滑鼠懸停在“添加您的自訂代碼（新片段）”選項上，然後點擊下面的“使用片段”按鈕。這會帶您到“創建自訂片段”頁面，您可以首先為您的片段選擇一個名稱。之後，從屏幕右上角的下拉選單選擇“CSS 片段”作為代碼類型。
接下來，將以下 CSS 代碼複製並粘貼到“代碼預覽”框中：
/* 突出顯示的選單 */ .highlighted-menu { background: #d3d3d3; border-radius: 35px; padding: 0px 20px; line-height: 50px; }粘貼完畢後，向下滾動到“插入方式”區域。在這裡，選擇“自動插入”模式，以便代碼可以在您的整個網站上自動執行。現在，前往頁面頂部並將開關從“非活動”切換到“活動”。然後，簡單點擊“保存片段”按鈕以存儲您的設定。
您現在已成功使用完整網站編輯器在 WordPress 中突出顯示了選單項目。這是添加 CSS 代碼後選單項目的外觀。
如何在區塊主題中使用主題自訂器
如果您希望使用主題自訂器並使用 FSE 主題，則只需將以下 URL 複製並粘貼到您的瀏覽器中。請確保將“example.com”替換為您自己的網站域名：
https://example.com/wp-admin/customize.php
這會打開區塊主題的主題自訂器，您需要在其中展開“額外 CSS”標籤。從這裡，將以下 CSS 片段複製並粘貼到“額外 CSS”框中：
/* 突出顯示的選單 */ .highlighted-menu { background: #FFB6C1; border-radius: 35px; padding: 0px 20px; line-height: 50px; }之後，簡單點擊頁面頂部的“發布”按鈕以存儲您的設定。
方法 2：使用主題自訂器突出顯示選單項目
如果您使用的是較舊的 WordPress 主題，那麼預設會啟用主題自訂器。在主題自訂器中突出顯示選單項目是一個相當簡單的過程。首先，從 WordPress 儀表板導航到“外觀 » 自訂”以啟動主題自訂器。打開後，點擊左側側邊欄的“選單”標籤。在這裡，點擊右上角的齒輪圖標以顯示進階屬性。現在，勾選“CSS 類別”框。
接著，向下滾動到“選單”部分。如果您有多個 WordPress 選單，簡單點擊包含您想要突出的選單項目的選單。這將打開一個新標籤，您可以選擇要突出顯示的選單項目。它可以是“聯絡我們”，如我們的範例，或是您的定價頁面或網上商店的連結。簡單點擊您的選單項目以展開一些設定。在這裡，點擊“CSS 類別”框。您只需在該字段中寫入 highlighted-menu 您可以將此 CSS 類別添加到多個選單項目，所有這些項目都會被突出顯示。
接著，簡單前往主題自訂器中的“額外 CSS”標籤。之後，將以下 CSS 代碼複製並粘貼到“額外 CSS”框中：
/* 突出顯示的選單 */ .highlighted-menu { background: #FFB6C1; border-radius: 35px; padding: 0px 20px; line-height: 50px; }恭喜！您已成功突出顯示了一個選單項目。
注意：您的主題可能沒有在主題自訂器中提供“額外 CSS”字段。如果沒有，請檢查主題設定以瞭解如何添加自訂 CSS。如果找不到，您可能需要聯繫開發者或使用 WPCode 添加代碼。
最後，不要忘記點擊頁面頂部的“發布”按鈕以存儲您的設定。
自訂您的選單項目突出
現在您已經突出顯示選單項目，您可以調整 CSS 代碼來根據喜好自訂選單項目。例如，您可以更改選單項目的背景顏色。簡單查找您剛剛粘貼的 CSS 片段中的以下代碼：
background: #FFB6C1;找到後，您可以簡單替換粉紅色的顏色代碼號碼為您喜歡的任何顏色的十六進通信號碼：
background: #7FFFD4;以上是水綠色的十六進制代碼。您可以參考我們的指南，輕鬆添加自訂 CSS，以獲取更多有關如何自訂突出顯示的選單項目的想法。當您對自己的選擇滿意後，簡單點擊主題自訂器中的“發布”按鈕或在 WPCode 中點擊“保存片段”以保存您的更改。
我們希望這篇文章有助於您學習如何在 WordPress 中突出顯示選單項目。您可能還想查看我們的初學者指南，了解如何為 WordPress 導航選單進行樣式設計或我們專家挑選的必備 WordPress 插件以幫助您的網站成長。
如果您喜歡這篇文章，請訂閱我們的 YouTube 頻道以獲取更多 WordPress 視頻教程。您也可以在 Twitter 和 Facebook 上找到我們。
