為什麼要不同樣式化第一和最後的導航項目？
有時候，您可能需要為導航選單中的第一和最後項目添加自定義樣式，這樣可以讓一些重要的鏈接更加醒目，例如網站的聯絡表單或 WooCommerce 購物車頁面的鏈接。在這種情況下，您可以添加自定義的 CSS 類。不過，如果您在之後更改選單順序，這可能會完全破壞自定義樣式。
因此我們建議使用過濾器。在本指南中，我們將向您展示如何樣式化導航選單的第一和最後項目，這樣您可以在不破壞自定義樣式的情況下重新排列選單。
方法 1：使用過濾器添加第一和最後類（推薦）
注意：此方法僅適用於經典 WordPress 主題。如果您使用的是塊主題，請參考方法 2。
樣式化導航選單項目最簡單的方法是向主題添加過濾器。你會經常在 WordPress 教程中發現一些要添加到主題 functions.php 文件的代碼片段。
最大問題是，即使是自定義代碼片段中的一個小錯誤，也可能會破壞您的 WordPress 網站並使其無法訪問。更不用說，如果您更新 WordPress 主題，將會丟失所有自定義設置。
這就是 WPCode 插件的用處所在。這個免費插件可以讓您輕鬆向 WordPress 添加自定義 CSS、PHP、HTML 等，而不會讓您的網站面臨風險。
首先，您需要安裝並激活免費的 WPCode 插件。詳細信息請參考我們的分步指南如何安裝 WordPress 插件。啟動後，前往代碼片段 » 添加片段。
在這裡，簡單地懸停在 ‘添加自定義代碼’ 上。當它出現時，點擊 ‘使用片段’。
首先，為自定義代碼片段輸入一個標題，這可以是任何幫助您在 WordPress 儀表板中識別該片段的內容。
接下來，打開 ‘代碼類型’ 下拉菜單，選擇 ‘PHP 片段’。
您現在可以將以下 PHP 添加到代碼框中：
function wpb_first_and_last_menu_class($items) { $items[1]->classes[] = 'first'; $items[count($items)]->classes[] = 'last'; return $items; } add_filter('wp_nav_menu_objects', 'wpb_first_and_last_menu_class');隨後，您準備好將頂部的 ‘待用’ 切換為 ‘啟用’。最後點擊 ‘保存片段’ 以使 PHP 片段生效。
這樣就為您的第一和最後的選單項目創建了 .first 和 .last CSS 類。 您現在可以使用這些類來為這些項目應用獨特的樣式。
要實現這點，您需要向 WordPress 網站添加第二個片段。首先，按照上述相同的過程創建新的自定義代碼片段。
受此指南中，我們將簡單地將以下 CSS 格式化添加到代碼框中，使第一和最後選單項目加粗：
.first a {font-weight: bold;} .last a {font-weight: bold;}完成後，點擊 ‘待用’ 切換到 ‘啟用’。最後點擊 ‘保存片段’ 以使 CSS 片段生效。
現在，如果您訪問您的網站，您將看到更新的選單已生效。
方法 2：使用 CSS 選擇器樣式化第一和最後項（適用於所有主題）
如果您不想使用插件，您可以使用 CSS 選擇器為第一和最後的選單項目進行樣式化。不過此方法可能不適用於某些較舊的瀏覽器，例如 Internet Explorer。鑑於此，建議您在不同的瀏覽器中測試您的 WordPress 網站。
要遵循此方法，您需要向主題樣式表或 WordPress 主題定制器的 ‘額外 CSS’ 部分中添加代碼。如果您之前沒有這樣做過，請參考我們的指南如何輕鬆向您的 WordPress 網站添加自定義 CSS。
首先是編輯主題的 style.css 文件，或前往外觀 » 自定義，然後點擊 ‘額外 CSS’。
接下來，添加以下代碼片段到您的網站：
ul#yourmenuid > li:first-child { } ul#yourmenuid > li:last-child { }注意，您需要將 ‘yourmenuid’ 替換為導航選單的 ID。選擇器 ‘first-child’ 和 ‘last-child’ 選擇其父級的第一和最後子元素，也就是導航選單的第一和最後項。
例如，我們使用此代碼來加粗我們的 WordPress 部落格中的第一和最後導航菜單項：
ul#primary-menu-list > li:first-child a { font-weight: bold; } ul#primary-menu-list > li:last-child a { font-weight: bold; }如果您使用的是 WordPress 塊主題，則在 WordPress 管理中將找不到主題定制工具。您需要在瀏覽器中輸入此 URL 以訪問主題定制工具：
https://yourdomainname.com/wp-admin/customize.php
請確保將域名替換為您的網站域名。然後像以前一樣打開 ‘額外 CSS’ 標簽並插入以下代碼。注意，這段代碼看起來有些不同，因為您不需要添加選單 ID。
li:first-child a, li:last-child a { background-color: black; border: none; color: white !important; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 12px; }隨意根據需要自定義此代碼。在下面的例子中，我們將第一和最後的鏈接變成按鈕。效果如下：
希望本教程幫助您學習如何為 WordPress 導航選單添加 .first 和 .last 類。您可能還想看看我們的指南如何使用 WordPress 創建登陸頁面或查看我們推薦的最佳拖放式頁面構建器列表。
如果您喜歡這篇文章，請訂閱我們的YouTube 頻道以獲取 WordPress 視頻教學。您還可以在Twitter和Facebook上找到我們。
