WooCommerce产品页面导航元素动态添加CSS类的实现方案

核心思路 #

WordPress默认只会给当前页面或层级关联的菜单项添加激活类，而你的单个产品页（/products/shop/xxx）和自定义「产品」页面（/products/）没有默认层级关联，因此需要通过钩子手动给目标菜单项追加激活类。

方法一：PHP钩子实现（推荐） #

将以下代码添加到主题的functions.php文件中，访问单个产品页面时，会自动给自定义「产品」菜单项添加激活类：

add_filter('nav_menu_css_class', 'append_product_menu_active_class', 10, 2);
function append_product_menu_active_class($classes, $item) {
    // 仅在单个产品页面执行逻辑
    if (!is_product()) return $classes;

    // 通过slug获取自定义「产品」页面的ID，确保slug和你的页面一致
    $custom_product_page = get_page_by_path('products');
    if (!$custom_product_page) return $classes;

    // 匹配到自定义产品页面的菜单项时，添加激活类
    if ($item->object_id === $custom_product_page->ID) {
        // 根据主题实际使用的激活类调整，比如仅保留其中一个
        $classes[] = 'current-menu-item';
        $classes[] = 'active';
    }

    return $classes;
}

关键说明 #

1. is_product()：WooCommerce内置函数，用于判断当前是否为单个产品页面
2. get_page_by_path('products')：通过页面slug获取自定义「产品」页面的ID，替换成你实际的页面slug即可
3. 激活类：根据主题实际使用的类调整，比如你的主题可能只需要current-menu-item，可删除active相关代码

方法二：确认主题激活类 #

如果上述代码不生效，先检查主题的激活类：

1. 访问自定义「产品」页面
2. 右键检查导航项的HTML，找到激活状态下的类（例如current-menu-item或active）
3. 确保PHP代码中添加的是这个类

备选：JavaScript方案（仅应急使用） #

如果无法修改PHP文件，可使用JS动态添加类（存在页面加载闪烁问题，不推荐）：

document.addEventListener('DOMContentLoaded', () => {
    if (window.location.pathname.includes('/products/shop/')) {
        const productLink = document.querySelector('nav a[href="/products/"]');
        if (productLink) {
            productLink.closest('li').classList.add('current-menu-item', 'active');
        }
    }
});

将代码添加到主题的自定义JavaScript区域即可。

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