WordPress 6+自定义Menu Walker求助:给<a>加类名及内部div
解决WordPress 6+自定义菜单Walker的两个需求
你之前写的start_lvl和end_lvl方法是用来处理**子菜单层级(比如下拉菜单的ul容器)**的,和你要修改的<a>元素完全不相关,所以代码没生效是正常的。
要实现你的两个需求——给<a>添加nav-item-a类、在<a>内部插入<div class="nav-underline"></div>——需要重写Walker_Nav_Menu的start_el方法,这个方法负责渲染每个菜单项的核心内容(包括<a>标签)。
正确的自定义Walker代码
在functions.php中替换你原来的custom_walker类:
class custom_walker extends Walker_Nav_Menu { // 重写菜单项渲染方法 public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) { // 初始化<a>标签的属性数组 $atts = array( 'href' => !empty($item->url) ? $item->url : '', 'title' => !empty($item->title) ? $item->title : '', 'class' => 'nav-item-a' // 直接添加目标类名 ); // 处理WordPress默认的菜单属性(如target、rel) if (!empty($item->target)) $atts['target'] = $item->target; if (!empty($item->xfn)) $atts['rel'] = $item->xfn; // 将属性数组转换为HTML字符串 $atts_str = ''; foreach ($atts as $attr => $value) { $value = ($attr === 'href') ? esc_url($value) : esc_attr($value); $atts_str .= " {$attr}=\"{$value}\""; } // 构建菜单项的完整HTML结构 $item_output = $args->before; $item_output .= "<a{$atts_str}>"; $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after; $item_output .= '<div class="nav-underline"></div>'; // 插入下划线div $item_output .= '</a>'; $item_output .= $args->after; // 将内容追加到最终输出 $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args); } }
补充:匹配预期的完整结构
如果你需要让外层<ul>和<li>也带上预期的类名(nav-list、list-item),可以在调用菜单时补充参数:
wp_nav_menu(array( 'walker' => new custom_walker, 'menu_class' => 'nav-list', // 给外层ul添加类 'item_class' => 'list-item' // 给每个li添加类(WordPress 6.2+支持该参数) ));
执行以上代码后,就能生成你预期的HTML结构:
<ul class="nav-list"> <li class="list-item"> <a class="nav-item-a" href="#">item <div class="nav-underline"></div></a> </li> </ul>
内容的提问来源于stack exchange,提问作者celli
相关产品推荐
相关产品推荐

