如何将现有HTML实现为WordPress手风琴式导航？

嘿，我来帮你搞定这个WordPress手风琴菜单的结构问题！要让导航生成你想要的手风琴HTML结构，核心是通过自定义Walker类来修改WordPress默认的菜单输出逻辑——这玩意儿就像菜单的“渲染引擎”，能让咱们完全掌控每个菜单项、子菜单的标签和样式类。

步骤1：在functions.php中添加自定义Walker类 #

先把这段代码放到你的主题functions.php文件里，它会帮你生成手风琴需要的层级结构（你可以根据自己的目标HTML调整里面的class和标签）：

class Accordion_Walker_Nav_Menu extends Walker_Nav_Menu {
    // 开始渲染单个菜单项
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        
        // 给菜单项添加自定义class
        $class_names = '';
        $classes = empty($item->classes) ? array() : (array)$item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        // 给有子菜单的父项加标记类
        if (in_array('menu-item-has-children', $classes)) {
            $classes[] = 'has-children';
        }
        
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = ' class="' . esc_attr($class_names) . '"';
        
        $output .= $indent . '<li' . $class_names . '>';
        
        // 渲染菜单链接
        $atts = array(
            'title'  => !empty($item->attr_title) ? $item->attr_title : '',
            'target' => !empty($item->target) ? $item->target : '',
            'rel'    => !empty($item->xfn) ? $item->xfn : '',
            'href'   => !empty($item->url) ? $item->url : ''
        );
        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);
        
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
        
        $item_output = $args->before;
        $item_output .= '<a' . $attributes . ' class="menu-link">';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        
        // 给父菜单添加折叠触发按钮
        if (in_array('menu-item-has-children', $classes) && $depth === 0) {
            $item_output .= '<button class="accordion-toggle" aria-expanded="false">+</button>';
        }
        
        $item_output .= $args->after;
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
    
    // 开始渲染子菜单容器
    function start_lvl(&$output, $depth = 0, $args = null) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu\" aria-hidden=\"true\">\n";
    }
    
    // 结束渲染子菜单容器
    function end_lvl(&$output, $depth = 0, $args = null) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
}

步骤2：修改导航调用代码，启用自定义Walker #

找到你在functions.php（或模板文件，比如header.php）里调用导航的代码，添加walker参数指定咱们刚创建的类，示例如下：

wp_nav_menu(array(
    'theme_location' => 'primary', // 替换成你实际的菜单位置名称
    'menu_class'     => 'accordion-menu', // 手风琴菜单的外层容器class
    'walker'         => new Accordion_Walker_Nav_Menu(), // 启用自定义Walker
    'depth'          => 2, // 控制菜单层级，手风琴一般2层足够
));

步骤3：补充CSS/JS实现折叠交互 #

光有HTML结构还不够，得加样式和脚本让手风琴动起来：

CSS（放到主题的style.css里）

/* 默认隐藏子菜单 */
.accordion-menu .sub-menu {
    display: none;
    margin-left: 15px;
}
/* 激活状态显示子菜单 */
.accordion-menu .sub-menu.active {
    display: block;
}
/* 折叠按钮样式 */
.accordion-toggle {
    margin-left: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
}

JS（放到主题的js文件里，或footer.php中）

document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('.accordion-toggle');
    toggles.forEach(toggle => {
        toggle.addEventListener('click', function() {
            const parentItem = this.closest('.has-children');
            const subMenu = parentItem.querySelector('.sub-menu');
            const isExpanded = this.getAttribute('aria-expanded') === 'true';
            
            // 更新状态属性和样式
            this.setAttribute('aria-expanded', !isExpanded);
            subMenu.setAttribute('aria-hidden', isExpanded);
            subMenu.classList.toggle('active');
            this.textContent = isExpanded ? '+' : '-';
        });
    });
});

注意事项 #

• 如果你的目标HTML结构和示例不同（比如用div代替ul/li），可以修改Walker类里的start_el、start_lvl方法中的标签；
• 菜单位置名称theme_location要和你在后台设置的菜单位置一致。

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