如何将第一个和最后一个CSS类添加到WordPress菜单项

为什么样式的第一个和最后一个导航项目不同?

在过去的自定义设计项目中，我们需要为WordPress网站的导航菜单项添加一些自定义样式.这种设计特别需要对第一个菜单项和最后一个菜单项的不同样式.

现在我们可以轻松编辑菜单并将自定义CSS类添加到第一个和最后一个菜单项.但是因为我们向客户提供项目，即使他们重新排列了菜单的顺序，我们的解决方案也必须工作.

所以我们决定使用过滤器.

在本教程中，我们将向您展示两种方法来拟合导航菜单的第一个和最后一个项目.您可以从下面的列表中选择您的首选方法:

• 方法1:使用过滤器
• 方法2添加第一和最后类:使用CSS选择器

样式和最后一个项目

方法1:使用过滤器添加第一和最后类

拟合您的第一个和最后一个导航菜单项的一种方法是不同的，是向主题添加过滤器.

您需要将代码添加到主题的函数.php文件.如果您之前没有这样做过，那么请查看我们关于如何在WordPress中复制和粘贴代码的指南.

所有您所要做的就是打开主题的函数.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');