WordPress子页面访问时让父导航元素添加current-menu-item类

嘿，这个问题我之前折腾WordPress菜单的时候也遇到过！默认情况下，wp_nav_menu确实不会自动给父菜单加上current-menu-item类，不过有几个实用的方法能解决这个问题，我给你详细说说：

这是最通用的方案，通过WordPress的过滤器钩子，检测当前页面的父页面关系，手动给对应的父菜单项添加上激活类。

把下面的代码复制到你主题的functions.php文件里：

add_filter('nav_menu_css_class', 'add_parent_menu_active_class', 10, 2);
function add_parent_menu_active_class($classes, $item) {
    global $post;
    // 先判断当前是否是页面，并且有父页面
    if ($post && is_page() && $post->post_parent) {
        // 递归找到当前页面的顶级父页面ID
        $top_parent_id = $post->post_parent;
        while ($top_parent_id) {
            $parent_page = get_post($top_parent_id);
            $top_parent_id = $parent_page->post_parent;
        }
        // 把最后找到的顶级父页面ID赋值
        $top_parent_id = $parent_page->ID;

        // 如果菜单项对应的页面ID等于顶级父页面ID，添加激活类
        if ($item->object_id == $top_parent_id) {
            $classes[] = 'current-menu-item';
            // 顺便加上WordPress默认的父菜单激活类，样式兼容更好
            $classes[] = 'current-menu-parent';
        }
    }
    return $classes;
}

这段代码的逻辑是：先找到你当前访问页面的顶级父页面，然后对比菜单里的每个项，如果某个菜单项正好对应这个顶级父页面，就给它加上current-menu-item类。不管你在多少级子页面，顶级父菜单都会被标记为激活状态。

如果你的菜单只有两级（父菜单→直接子页面），可以用更简单的方式，直接检测当前页面是否是菜单项的直接子页面：

add_filter('nav_menu_css_class', 'highlight_direct_parent_menu', 10, 3);
function highlight_direct_parent_menu($classes, $item, $args) {
    global $post;
    // 可选：指定只给某个菜单位置生效，比如你的主菜单位置是'primary'
    if ($args->theme_location == 'primary') {
        // 检查当前页面的直接父页面ID是否等于菜单项的ID
        if ($post && is_page() && $post->post_parent == $item->object_id) {
            $classes[] = 'current-menu-item';
            $classes[] = 'current-menu-parent';
        }
    }
    return $classes;
}

这个方法更轻量化，适合结构简单的菜单，直接判断当前页面的父页面是不是菜单项对应的页面，是的话就加激活类。

• 要确认你的父菜单项是关联到实际的父页面，而不是自定义链接（如果是自定义链接，要把URL设置成父页面的完整URL，这样代码才能匹配到）。
• 如果你已经有自定义的菜单样式，记得current-menu-item类的样式要和你预期的激活状态一致哦。

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