如何在WordPress自定义PHP菜单中高亮当前页面菜单项？

一、PHP服务端判断（推荐，无需JS） #

直接修改你现有的nav_menu函数，在生成菜单项时通过WordPress原生逻辑判断当前页面，给匹配的菜单项添加active类，服务端直接输出带高亮标识的HTML，比JS更可靠，尤其适合静态缓存场景。

修改后的函数代码：

function nav_menu( $theme_location ) {
    if ( ($theme_location) && ($locations = get_nav_menu_locations()) && isset($locations[$theme_location]) ) {
        $menu = get_term( $locations[$theme_location], 'nav_menu' );
        $menu_items = wp_get_nav_menu_items($menu->term_id);
        // 获取当前页面的ID和标准化URL
        $current_page_id = get_queried_object_id();
        $current_url = trailingslashit( home_url( $_SERVER['REQUEST_URI'] ) );
        
        $menu_list  = '<nav class="titlemenu">' ."\n";
            $menu_list  .= '<ul class="navbar-nav" id="menu-top">' ."\n";
            foreach( $menu_items as $key => $menu_item ) {
                $is_active = false;
                // 两种判断逻辑，任选其一或结合使用
                // 1. 匹配页面ID（适合页面/文章类型的菜单项）
                if ( $current_page_id == $menu_item->object_id ) {
                    $is_active = true;
                }
                // 2. 匹配标准化后的URL（兼容自定义链接类型的菜单项）
                $menu_item_url = trailingslashit( $menu_item->url );
                if ( $current_url === $menu_item_url ) {
                    $is_active = true;
                }
                
                // 给菜单项添加active类
                $li_class = $is_active ? 'nav-item active' : 'nav-item';
                $a_class = $is_active ? 'nav-link active' : 'nav-link';
                
                $menu_list .= '<li class="' . esc_attr($li_class) . '">' ."\n";
                $menu_list .= '<a href="' . esc_url($menu_item->url) . '" class="' . esc_attr($a_class) . '">' . strtoupper(esc_html($menu_item->title)) . '</a>' ."\n";
                $menu_list .= '</li>' ."\n";
            }
            $menu_list .= '</ul>' ."\n";
        $menu_list .= '</nav>' ."\n";
    } else {
        $menu_list = '<!-- no menu defined in location "'.$theme_location.'" -->';
    }
    echo $menu_list;
}

注：添加了esc_attr()/esc_url()/esc_html()做安全转义，避免XSS风险。

二、JavaScript客户端判断 #

如果不想修改PHP代码，可以用JS在页面加载后匹配当前URL，给对应菜单项加高亮类：

document.addEventListener('DOMContentLoaded', function() {
    // 标准化当前URL（去掉末尾斜杠，统一格式）
    const currentUrl = window.location.href.replace(/\/$/, '');
    // 获取所有菜单项链接
    const menuLinks = document.querySelectorAll('#menu-top .nav-link');
    
    menuLinks.forEach(link => {
        // 标准化菜单项URL
        const linkUrl = link.href.replace(/\/$/, '');
        // 匹配URL并添加active类
        if (linkUrl === currentUrl) {
            link.classList.add('active');
            // 也可以给父级li加类：
            link.parentElement.classList.add('active');
        }
    });
});

最后添加CSS高亮样式 #

不管用哪种方法，都需要在样式表中定义active类的高亮效果（示例样式可按需调整）：

.nav-item.active .nav-link {
    color: #e74c3c;
    font-weight: 700;
    border-bottom: 2px solid #e74c3c;
}

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