您想突出顯示 WordPress 網站上的功能表項嗎？
突出顯示功能表項確實可以説明您將使用者的注意力吸引到功能表上的特定區域。 如果您想在您的網站上突出顯示定價或聯繫我們頁面，這可能會很棒。
在本文中，我們將向您展示如何使用 CSS 代碼輕鬆突出顯示 WordPress 中的功能表項。
為什麼要突出顯示功能表項？
導航功能表是指向網站重要區域的連結清單。 它們通常顯示為WordPress 網站每個頁面頂部的水平條 。
這個導航功能表是通過添加不同的功能表項創建的。
突出顯示的功能表項可以很好地吸引使用者注意您最突出的號召性用語。 當訪問者訪問您的網站時，他們的眼睛會自動被吸引到功能表項上。
通過添加此功能，您可以創建一個使用者友好的網站並突出顯示您希望使用者簽出的重要功能表項。
話雖如此，讓我們看看如何使用 CSS 在 WordPress 中突出顯示功能表項。
方法 1. 使用完整網站編輯器突出顯示功能表項
如果您使用的是FSE主題，那麼您將擁有完整的網站編輯器，而不是舊的主題定製器。 您也可以輕鬆地突出顯示其中的功能表項。
首先，從 WordPress 管理儀錶板轉到外觀 » 編輯器。 這將引導您進入完整的網站編輯器。
在這裡只需按兩下要突出顯示的功能表項，然後按下頂部的齒輪圖示。 這將立即打開該特定功能表項的「設置」 塊。
只需在“设置”块中向下滚动到“高级”选项卡，然后单击它旁边的箭头图标即可展开选项卡。
这将打开一个“附加 CSS 类”字段，您只需 在该字段中输入即可。highlighted-menu
接下來，按下頁面頂部的「保存」 按鈕以儲存您的更改。
之後，您需要在主題中添加少量 CSS 以實現高亮效果。
如何使用 WPCode 添加 CSS 片段
要在 WordPress 中添加 CSS，我們建議使用WPCode，因為這是向 WordPress 添加任何自定義代碼的最簡單方法。
首先，您需要安裝並啟動免費的 WPCode 外掛程式。
啟動后，從您的 WordPress 管理面板導航到代碼片段 » 添加片段。 現在按下「添加新」按鈕。
這會將您帶到「添加代碼段」頁面。
在這裡，將滑鼠懸停在「添加您的自訂代碼（新代碼段）」選項上，然後只需按兩下其下方的“使用代碼段”按鈕。
現在您位於「創建自定義代碼段」頁面，首先為您的 CSS 代碼段選擇名稱和「代碼類型」。
你可以選擇任何你喜歡的名字。
接下來，只需按下右側「代碼類型」選項旁邊的下拉功能表，然後選擇「通用代碼段」選項。
之後，將以下 CSS 代碼複製/粘貼到“代碼預覽”中。
<style type="text/css">
/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
</style>請務必包含樣式標籤，如下面第 1 行和第 10 行所示。
粘貼代碼後，向下滾動轉到“插入”部分。
這裡只需選擇「自動插入」模式，這樣代碼就可以在您的整個網站上自動執行。
現在，轉到頁面頂部並將開關從“非活動”切換到“活動”。
然後只需按下「保存代碼段」 按鈕。
您現在已經使用完整的網站編輯器成功地在 WordPress 中突出顯示了一個功能表項。
這是添加 CSS 代碼後功能表項的外觀。
如何使用FSE主題訪問主題定製器
如果您想使用主題定製器並使用 FSE 主題，只需將下面的 URL 複製並粘貼到您的瀏覽器中即可。 確保將「example.com」替換為您自己網站的功能變數名稱。
https://example.com/wp-admin/customize.php在這裡，您只需按兩下其他 CSS 選項卡。
現在，展開「其他 CSS」字段，然後複製/粘貼以下代碼片段。
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}之後，只需按兩下頂部的「發佈」 按鈕。
這就是突出顯示功能表項所需的全部。
完成後它在您的網站上應該看起來像這樣：
方法 2. 使用主題定製器突出顯示功能表項
如果您使用的是非FSE主題，那麼您可能會默認啟用主題定製器。 在主題定製器中突出顯示功能表項是一個相當簡單的過程。
首先，只需轉到WordPress 儀錶板中的外觀 » 自定義即可啟動主題定製器。 主題定製器打開后，只需按兩下「功能表」選項卡。
進入「功能表」部分後，只需按下右上角的齒輪圖示即可顯示高級屬性。
現在，只需選中“CSS 類”框。
之後，向下滾動到「功能表」部分。
如果您的網站上有多個功能表，只需按下要突出顯示其功能表項的功能表。
這將打開一個新選項卡，您可以在其中選擇要突出顯示的功能表項。 它可以是我們示例中的「開始」 ，也可以是您的聯繫表單頁面或您在線商店的連結。
只需按下您選擇的功能表項，它就會展開以顯示一些選項。 按兩下“CSS 類”字段。
您所要做的就是在該欄位中寫入。 您可以將此 CSS 類添加到多個功能表項，它們將全部突出顯示。 'highlighted-menu'
接下來，只需轉到主題定製器中的“其他 CSS”選項卡。
現在，只需複製並粘貼以下 CSS 代碼。
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}恭喜！ 您已成功突出顯示一個功能表項。
注意：您的主題在主題定製器中可能沒有“附加 CSS”欄位。 如果沒有，請檢查主題設置以瞭解如何添加自定義 CSS。 如果找不到，您可能需要聯繫開發人員或使用 WPCode 添加。
自訂您的功能表項突出顯示
現在您已經突出顯示了功能表項，您可以調整 CSS 代碼以按照您喜歡的方式自定義功能表項。
例如，您可以更改功能表項的背景顏色。
只需在剛剛粘貼的 CSS 片段中查找以下代碼即可。
background: #FFB6C1找到它后，您可以簡單地將粉色代碼替換為您選擇的任何顏色的十六進位代碼：
background: #7FFFD4;以上是海藍寶石的十六進位代碼。
對您的選擇感到滿意後，只需按兩下主題定製器中的「發佈」 按鈕或 WPCode 中的「保存代碼段」即可保存您的更改。
