WordPress主题wp_nav_menu函数

风中赏雪 Wordpress Wordpress 2025-09-27 105 0

在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结构