您想學習將第一個和最後一個 CSS 類添加到 WordPress 菜單項嗎？
CSS 指定文檔的外觀。 此外，它操縱網站的所有功能。 您可以輕鬆地將自定義 CSS 添加到第一個和最後一個菜單項。 如果菜單重新排列，則項目既不會是第一個也不會是最後一個。
在本文中，我們將介紹將類添加到 WordPress 菜單。 本文最適合正在尋找添加類的方法但不知道如何添加的人。 讓我們開始吧。
為什麼要將第一個和最後一個 CSS 類添加到 WordPress 菜單項？
首先，你必須對CSS有一個基本的概念。 CSS 是層疊樣式表的縮寫形式。 主要用於為 HTML 內容添加樣式規則。 添加自定義規則後，網站的任務是做它不習慣做的不同事情。
在您需要為 WordPress 中的自定義設計項目的導航菜單添加一些自定義樣式之前。 但是現在您可以輕鬆瀏覽菜單並添加第一個和最後一個 CSS。 當客戶端重新排列菜單時會出現問題。 因此，您需要以這樣一種方式設計菜單，即使客戶端重新排列它也能正常工作。
因此，在本教程中，我們將使用代碼方法對 CSS 類進行分析，並學習如何設置它們的樣式。
使用代碼添加第一個和最後一個 CSS 類
此方法是添加 CSS 類的最簡單快捷的方法。 在這個方法中，您需要做的就是將代碼添加到您的 function.php 文件中。 請仔細按照以下步驟操作：
- 從安裝插件開始 代碼片段.
- 導航到代碼段 >> 添加新內容。
- 複製下面提到的代碼：
| 123456 | 函數 wpb_first_and_last_menu_class($items) { $items[1]-> 類[] = ‘第一’; $items[count($items)]-> 類[] = ‘最後’; 返回 $items;}add_filter(‘wp_nav_menu_objects’, ‘wpb_first_and_last_menu_class’); |
- 將上述代碼粘貼到代碼區域下方的新代碼段中。
- 保存更改並激活代碼。
因此，您已成功將第一個和最後一個 CSS 類添加到 WordPress 導航菜單。
使用 CSS 選擇器設置第一個和最後一個 CSS 的樣式
設置第一個和最後一個 CSS 樣式的另一種方法是使用 CSS 選擇器。 這種方法也很簡單，但它在舊版本的瀏覽器（如內部資源管理器）中不起作用。
為了遵循此方法，您需要滿足必需的條件，即您必須將代碼添加到主題的樣式表或 WordPress 主題定製器的附加 CSS 部分。 現在，請按照下面提到的步驟操作：
- 導航到外觀>>自定義。
- 單擊「附加 CSS」按鈕。
- 複製並粘貼下面提到的代碼：
| 12 | ul#menuid > li:first-child { }ul#menuid > li:last-child { } |
注意：menuid 應替換為菜單的實際 ID。 此外，選擇器「first-child」和「last-child」選擇菜單的一個元素。
- 保存更改。
總結
我們希望本文對您有所幫助，並幫助您在 WordPress 導航菜單中添加第一個和最後一個 CSS 類。 另外，請查看我們的文章「如何在不鏈接頁面的情況下在 WordPress 菜單中添加標題？」 了解更多關於 WordPress 的信息。
如何將第一個和最後一個 CSS 類添加到 WordPress 菜單項？ 首次出現在 WP HowToPress – 你的 WordPress 指南。