为wp_nav_menu的<li>元素添加指定class及属性失败求助

问题根源 #

你的代码存在两个关键问题：

• 语法错误：在自定义Walker的start_lvl方法中，错误地将data-split-text-type属性嵌入到class属性字符串内，且属性值未加引号，导致浏览器无法识别该data属性。
• 逻辑偏差：你需要给<li>元素添加class和data属性，但当前代码是在子菜单外层生成div，不符合需求。

修复方案 #

重写Walker的start_el方法（该方法负责生成每个菜单项的<li>起始标签），在其中正确添加所需的class和data属性。同时注意类名不要与WordPress原生的WP_Walker冲突，自定义一个专属类名。

正确的自定义Walker代码 #

class Custom_Nav_Walker extends Walker_Nav_Menu {
    // 处理菜单项的起始标签（<li>）
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        $indent = ($depth) ? str_repeat("\t", $depth) : '';
        
        // 合并原有class与需要添加的class
        $classes = empty($item->classes) ? array() : (array)$item->classes;
        $classes[] = 'menu-overlay__item-wrapper split-text js-split-text';
        
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        
        // 生成带data属性的<li>起始标签
        $output .= $indent . '<li' . $class_names . ' data-split-text-type="lines">';
        
        // 处理菜单项内容（保留原有逻辑）
        $atts = array();
        $atts['title']  = !empty($item->attr_title) ? $item->attr_title : '';
        $atts['target'] = !empty($item->target)     ? $item->target     : '';
        $atts['rel']    = !empty($item->xfn)        ? $item->xfn        : '';
        $atts['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 . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }

    // 保留默认子菜单结构（如需修改可自行调整）
    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='sub-menu'>\n";
    }

    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul>\n";
    }
}

对应的wp_nav_menu调用代码 #

<?php
wp_nav_menu( array(
    'menu'              => 'primary', // 匹配你的菜单名称
    'theme_location'    => 'primary',
    'menu_class'        => 'menu-overlay js-menu-overlay',
    'fallback_cb'       => false,
    'container'         => false,
    'items_wrap'        => '%3$s',
    'walker'            => new Custom_Nav_Walker // 使用自定义的Walker类
));
?>

备选方案（若需给子菜单外层div加属性） #

如果你确实需要在子菜单外层添加div而非给<li>加属性，只需修正原start_lvl方法的语法错误即可：

function start_lvl(&$output, $depth = 0, $args = array()) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<div class='menu-overlay__item-wrapper split-text js-split-text' data-split-text-type='lines'><ul class='sub-menu'>\n";
}

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