在functions.php文件中添加以下代码:
class Custom_Nav_Walker extends Walker_Nav_Menu {
public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
// 为当前菜单项构建自定义ID
$item_id = '';
// 首页菜单项
if ($item->type == 'custom' && untrailingslashit($item->url) == untrailingslashit(home_url())) {
$item_id = 'id="nvabar-item-index"';
}
// 分类菜单项
elseif ($item->type == 'taxonomy' && $item->object == 'category') {
$item_id = 'id="navbar-category-' . $item->object_id . '"';
}
// 构建菜单项HTML
$output .= '<li ' . $item_id . '>';
$output .= '<a href="' . esc_url($item->url) . '"';
// 添加aria-current属性(如果是当前页面)
if ($item->current) {
$output .= ' aria-current="page"';
}
$output .= '>';
$output .= esc_html($item->title);
$output .= '</a></li>';
}
}
修改header.php中的菜单代码
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => '',
'items_wrap' => '<ul class="navbar">%3$s</ul>',
'depth' => 1,
'walker' => new Custom_Nav_Walker(),
'fallback_cb' => false
) );
?>
关键修改说明:
items_wrap参数:
'items_wrap' => '<ul class="navbar">%3$s</ul>'
1.自定义Walker类:
1.1完全控制每个菜单项的HTML输出
1.2根据菜单项类型生成特定ID:
1.3首页项目 → id=”nvabar-item-index”
1.4分类项目 → id=”navbar-category-{分类ID}”
2.简化输出结构:
2.1移除了所有多余的CSS类
2.2保留了必要的aria-current属性
2.3保持语义化但精简的HTML结构
本文地址: WordPress主题wp_nav_menu函数
版权声明:如发现本站有涉嫌抄袭侵权/违法违规的内容请联系客服!





