如何通过functions.php的hooks实现产品分类页随机展示对应专属图片/视频

完全可以通过WordPress钩子实现该需求，仅需维护一套逻辑即可，无需单独修改每个分类页代码。

通过wp_enqueue_scripts钩子判断当前页面所属产品分类，动态注入对应分类的素材集合到前端页面，通用随机展示逻辑全局复用。

1. functions.php 新增钩子代码 #

add_action('wp_enqueue_scripts', 'inject_category_banner_materials');
function inject_category_banner_materials() {
    // 仅在产品分类页执行，若你的产品分类法不是product_cat请自行替换，默认文章分类可改为is_category()
    if (!is_tax('product_cat')) return;
    
    // 获取当前分类ID
    $current_cat_id = get_queried_object_id();
    
    // 配置各分类对应的素材集合，key为分类ID，value为素材数组
    $cat_materials = [
        // 示例：分类ID为12的服装分类素材
        12 => [
            '<a href="cloth-banner1.jpeg"><img src="cloth-banner1.jpeg"></a>',
            '<a href="cloth-banner2.jpeg"><img src="cloth-banner2.jpeg"></a>',
            '<a href="cloth-banner3.jpeg"><img src="cloth-banner3.jpeg"></a>',
            '<a href="cloth-banner4.jpeg"><img src="cloth-banner4.jpeg"></a>'
        ],
        // 示例：分类ID为25的数码分类素材
        25 => [
            '<a href="digital-banner1.jpeg"><img src="digital-banner1.jpeg"></a>',
            '<a href="digital-banner2.jpeg"><img src="digital-banner2.jpeg"></a>',
            '<a href="digital-banner3.jpeg"><img src="digital-banner3.jpeg"></a>'
        ]
        // 新增分类仅需在此处按格式添加对应配置即可
    ];
    
    // 当前分类无配置则不执行
    if (!isset($cat_materials[$current_cat_id])) return;
    
    // 将素材数组转为JSON注入为全局JS变量
    $inline_js = 'window.categoryBannerMaterials = ' . json_encode($cat_materials[$current_cat_id]) . ';';
    wp_add_inline_script('jquery', $inline_js, 'before');
    
    // 注入通用随机展示JS
    $random_js = <<<JS
    document.addEventListener('DOMContentLoaded', function() {
        const materials = window.categoryBannerMaterials;
        if (!materials || materials.length < 3) return;
        
        // 生成3个不重复的随机索引
        const randomIndexes = [];
        while (randomIndexes.length < 3) {
            const randomNum = Math.floor(Math.random() * materials.length);
            if (!randomIndexes.includes(randomNum)) {
                randomIndexes.push(randomNum);
            }
        }
        
        // 赋值到对应DOM元素
        document.getElementById('banner1').innerHTML = materials[randomIndexes[0]];
        document.getElementById('banner2').innerHTML = materials[randomIndexes[1]];
        document.getElementById('banner3').innerHTML = materials[randomIndexes[2]];
    });
JS;
    wp_add_inline_script('jquery', $random_js, 'after');
}

2. 原有代码清理 #

删除所有分类页单独添加的图片集配置和随机JS代码，仅需保留页面上banner1、banner2、banner3三个ID的容器元素即可。

后续需要新增分类素材、修改已有分类的素材集合，仅需调整上述代码中$cat_materials数组的对应配置即可，无需修改其他代码。

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