如何在WordPress导航栏的最后一个<li>元素上添加自定义class？

开发者阿泽

2026-10-6

WordPress自定义Navwalker为最后一个顶层菜单项添加button类的实现方案

你可以通过在自定义Navwalker中增加计数逻辑实现需求，该方案完全基于WordPress原生Walker的生命周期开发，无hack逻辑，同时兼容后台配置的菜单项自定义类，不会出现后台配置被覆盖的问题。

完整实现代码如下：

class Custom_Nav_Walker extends Walker_Nav_Menu {
    // 存储顶层菜单项总数量
    private $top_level_total = 0;
    // 存储当前遍历的顶层菜单项索引
    private $current_top_index = 0;

    // 重写walk方法，遍历开始前先统计顶层菜单项总数
    public function walk($elements, $max_depth, ...$args) {
        $this->top_level_total = count(array_filter($elements, function($item) {
            return $item->menu_item_parent == 0;
        }));
        return parent::walk($elements, $max_depth, ...$args);
    }

    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $title = $item->title;
        $permalink = $item->url;
        $li_classes = [];

        // 合并WordPress后台配置的菜单项自定义类
        if (!empty($item->classes)) {
            $li_classes = array_merge($li_classes, $item->classes);
        }

        // 仅对顶层菜单项做判断
        if ($depth === 0) {
            $this->current_top_index++;
            // 匹配到最后一个顶层菜单项时添加button类
            if ($this->current_top_index === $this->top_level_total) {
                $li_classes[] = 'button';
            }
        }

        // 生成class属性，无类时不输出冗余属性
        $class_attr = !empty($li_classes) ? ' class="' . esc_attr(implode(' ', $li_classes)) . '"' : '';

        $output .= "<li{$class_attr}>";
        $output .= "<a href='{$permalink}'>{$title}</a>";
    }
}