使用Walker类实现WordPress三级自定义菜单并指定类名与添加按钮

你可以通过继承WordPress原生的Walker_Nav_Menu类自定义菜单输出逻辑，完全匹配你需要的结构、class和按钮元素，具体操作如下：

步骤1：添加自定义Walker类到主题 #

将以下代码复制到你当前使用主题的functions.php文件中：

class Custom_Menu_Walker extends Walker_Nav_Menu {
    // 自定义各级子菜单ul标签输出
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        if ($depth === 0) {
            // 二级菜单ul配置
            $output .= "\n$indent<ul data-spollers=\"768,max\" class=\"menu__sub-list\">\n";
        } elseif ($depth === 1) {
            // 三级菜单ul配置
            $output .= "\n$indent<ul class=\"menu__subsub-list\">\n";
        }
    }

    // 自定义各级菜单项li、链接、按钮输出
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $indent = $depth ? str_repeat("\t", $depth) : '';
        $li_classes = $a_classes = [];
        $button = '';

        // 按菜单深度分配对应class和按钮
        switch ($depth) {
            case 0:
                // 一级菜单配置
                $li_classes[] = 'menu__item';
                $a_classes[] = 'menu__link';
                if ($args->walker->has_children) {
                    $button = '<button type="button" class="menu__arrow _icon-menu_down"></button>';
                }
                break;
            case 1:
                // 二级菜单配置
                $li_classes[] = 'menu__sub-item';
                $a_classes[] = 'menu__sub-link';
                if ($args->walker->has_children) {
                    $button = '<button data-spoller type="button" class="menu__sub-arrow _icon-menu_left"></button>';
                }
                break;
            case 2:
                // 三级菜单配置
                $li_classes[] = 'menu__subsub-item';
                $a_classes[] = 'menu__subsub-link';
                break;
        }

        // 生成li的class属性
        $li_class = implode(' ', apply_filters('nav_menu_css_class', array_filter($li_classes), $item, $args, $depth));
        $li_attr = $li_class ? ' class="' . esc_attr($li_class) . '"' : '';

        // 生成链接的class和href属性
        $a_attr = [];
        $a_attr[] = !empty($item->url) ? ' href="' . esc_attr($item->url) . '"' : '';
        $a_class = implode(' ', apply_filters('nav_menu_link_attributes', array_filter($a_classes), $item, $args, $depth));
        $a_attr[] = $a_class ? ' class="' . esc_attr($a_class) . '"' : '';
        $a_attr = implode(' ', $a_attr);

        // 拼接最终菜单项内容
        $output .= "{$indent}<li{$li_attr}>";
        $output .= "<a{$a_attr}>" . apply_filters('the_title', $item->title, $item->ID) . "</a>";
        $output .= $button;
    }
}

步骤2：注册菜单位置（未注册的情况下需要操作） #

如果还没有注册过主导航位置，同样在functions.php中添加以下代码：

function register_custom_nav() {
    register_nav_menu('primary', '站点主导航');
}
add_action('after_setup_theme', 'register_custom_nav');

添加完成后进入WordPress后台「外观-菜单」，创建你需要的菜单结构并分配到「站点主导航」位置。 #

步骤3：在主题中调用自定义菜单 #

找到主题中需要输出导航的位置（通常是header.php），替换原有菜单调用代码为以下内容：

wp_nav_menu([
    'theme_location' => 'primary', // 对应你注册的菜单位置标识
    'container' => false, // 取消外层默认的div容器
    'menu_class' => 'menu__list', // 最外层ul的class
    // 自定义最外层ul结构，添加你需要的data属性
    'items_wrap' => '<ul data-spollers="768,max" class="%2$s">%3$s</ul>',
    'walker' => new Custom_Menu_Walker(), // 调用我们自定义的Walker类
    'depth' => 3, // 最多支持3级菜单输出
]);

完成以上操作后输出的菜单结构会和你提供的示例完全一致，你已经开发完成的按钮JS逻辑可以直接复用，不需要做额外调整。

内容的提问来源于stack exchange，提问作者Dmitry Timofeev