在functions.php文件中添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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中的菜单代码

1
2
3
4
5
6
7
8
9
10
11
<?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参数：

1
2
'items_wrap' => '<ul class="navbar">%3$s</ul>'

自定义Walker类：

完全控制每个菜单项的HTML输出

根据菜单项类型生成特定ID：

首页项目 → id=”nvabar-item-index”

分类项目 → id=”navbar-category-{分类ID}”

简化输出结构：

移除了所有多余的CSS类

保留了必要的aria-current属性

保持语义化但精简的HTML结构