如何在新版WooCommerce产品分类列表区块小部件中为当前项及祖先项添加激活类

嗨，我明白你遇到的困扰了——用WooCommerce的Product Categories List Block做侧边栏筛选器时，当前分类和它的父分类没法自动加上current-cat和current-ancestor类，导致样式没法高亮对吧？我给你准备了两个靠谱的解决方法：

方法一：PHP钩子方案（原生WordPress/WooCommerce写法） #

这个方法从源头修改区块输出，稳定性更高，适合懂点基础PHP的同学。你可以把下面的代码加到主题的functions.php文件里，或者用自定义代码插件来添加：

add_filter('render_block', 'add_product_category_active_classes', 10, 2);
function add_product_category_active_classes($block_content, $block) {
    // 只针对WooCommerce产品分类列表区块生效
    if ($block['blockName'] !== 'woocommerce/product-categories') {
        return $block_content;
    }

    // 获取当前页面的产品分类ID
    $current_cat_id = 0;
    if (is_product_category()) {
        $current_cat = get_queried_object();
        $current_cat_id = $current_cat->term_id;
    }

    if (!$current_cat_id) {
        return $block_content;
    }

    // 获取当前分类的所有祖先分类ID
    $ancestor_ids = get_ancestors($current_cat_id, 'product_cat');

    // 给当前分类的li添加current-cat类
    $block_content = preg_replace(
        '/<li class="wp-block-woocommerce-product-categories-list-item([^"]*)"><a[^>]*href="[^"]*\/product_cat\/' . get_term($current_cat_id)->slug . '\/"[^>]*>/',
        '<li class="wp-block-woocommerce-product-categories-list-item$1 current-cat"><a href="' . get_term_link($current_cat_id) . '" ',
        $block_content
    );

    // 给祖先分类的li添加current-ancestor类
    foreach ($ancestor_ids as $ancestor_id) {
        $block_content = preg_replace(
            '/<li class="wp-block-woocommerce-product-categories-list-item([^"]*)"><a[^>]*href="[^"]*\/product_cat\/' . get_term($ancestor_id)->slug . '\/"[^>]*>/',
            '<li class="wp-block-woocommerce-product-categories-list-item$1 current-ancestor"><a href="' . get_term_link($ancestor_id) . '" ',
            $block_content
        );
    }

    return $block_content;
}

这段代码的逻辑很清晰：

• 先判断当前渲染的是不是目标区块，避免影响其他区块
• 如果是产品分类页面，拿到当前分类ID和它的所有祖先分类ID
• 用正则匹配对应分类的链接，给父级li加上对应的激活类

方法二：JavaScript动态添加（无需修改PHP） #

要是你不想碰PHP代码，用JS动态加类也能搞定。把下面的代码加到主题的自定义JS区域，或者用插件添加：

document.addEventListener('DOMContentLoaded', function() {
    // 从body类里提取当前产品分类的slug（WooCommerce默认会给body加product-category-{slug}类）
    const bodyClasses = document.body.classList;
    let currentCatSlug = '';
    bodyClasses.forEach(className => {
        if (className.startsWith('product-category-')) {
            currentCatSlug = className.replace('product-category-', '');
        }
    });

    if (!currentCatSlug) return;

    // 找到侧边栏里的产品分类列表项
    const categoryItems = document.querySelectorAll('.wp-block-woocommerce-product-categories-list-item');

    categoryItems.forEach(item => {
        const link = item.querySelector('a');
        if (!link) return;

        // 匹配当前分类链接，添加current-cat类
        if (link.href.includes('/product_cat/' + currentCatSlug + '/')) {
            item.classList.add('current-cat');
            // 查找父级分类项（针对嵌套分类）
            let parentItem = item.closest('.wp-block-woocommerce-product-categories-list__child');
            if (parentItem) {
                parentItem = parentItem.previousElementSibling;
                if (parentItem) {
                    parentItem.classList.add('current-ancestor');
                }
            }
        }
    });

    // 处理多层级祖先分类
    const currentCatItem = document.querySelector('.current-cat');
    if (currentCatItem) {
        let parentList = currentCatItem.closest('.wp-block-woocommerce-product-categories-list__children');
        while (parentList) {
            const parentItem = parentList.parentElement;
            if (parentItem.classList.contains('wp-block-woocommerce-product-categories-list-item')) {
                parentItem.classList.add('current-ancestor');
            }
            parentList = parentItem.closest('.wp-block-woocommerce-product-categories-list__children');
        }
    }
});

JS方法的逻辑：

• 从body的类里提取当前分类的slug
• 遍历侧边栏分类项，匹配到当前分类后给li加current-cat
• 递归往上查找所有祖先分类的li，添加current-ancestor类

小提醒 #

• 如果用主题的functions.php，建议用子主题修改，避免主题更新丢失代码
• JS方法需要确保你的分类链接包含/product_cat/路径（WooCommerce默认是这样的，要是改了固定链接结构，得调整匹配规则）

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