如何將第一類和最後一類添加到WordPress導航菜單項


最近,在進行自定義設計項目時,我們發現需要在WordPress導航菜單項中添加一些自定義樣式。 對於第一菜單項和最後一個菜單項,這種設計尤其需要不同的樣式。 現在我們可以輕鬆地進入WordPress管理員並將自定義CSS類添加到第一個和最後一個菜單項。 但是,因為我們正在將其交付給客戶,所以他們很可能在將來重新安排菜單的順序。 使用管理面板添加類的方法不是最有效的方法。 因此,我們決定通過使用過濾器來做到這一點。 在本文中,我們將向您展示如何通過添加.first和.last CSS類來為第一個和最後一個WordPress菜單項設置不同的樣式。

所有您需要做的就是打開主題的 functions.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');

另一種樣式設置第一和最後一個菜單項的方法是使用CSS選擇器,該選擇器可在大多數現代瀏覽器中使用。

ul#yourmenuid > li:first-child { }
ul#yourmenuid > li:last-child { }

注意:如果使用舊版瀏覽器(Internet Explorer)的用戶很多,則可能要避免使用以下技術。

希望本文對您有所幫助。 我們在默認的WordPress生成的CSS類上創建了備忘單,在樣式菜單項時也可能會派上用場。