在产品类别页面中显示随机图像

Posted 2023-05-08

【中文标题】在产品类别页面中显示随机图像

【英文标题】：Display random Images in product category page

【发布时间】：2021-12-19 06:56:25

【问题描述】：

我正在尝试/视频。每个类别页面都会显示自己的一组图像。

我以典型的菜鸟方式做到了这一点，在每个产品类别页面中添加了各自的图像集。有没有办法可以在functions.php中使用钩子来方便维护？

var total_images = 7;
var image1 = document.getElementById('banner1');
var image2 = document.getElementById('banner2');
var image3 = document.getElementById('banner3');
var random_numbers = [];
var random_number;
var random_img = [];

random_img[0] = '<a href="banner1.jpeg"><img src="banner1.jpeg"></a>';
random_img[1] = '<a href="banner2.jpeg"><img src="banner2.jpeg"></a>';
random_img[2] = '<a href="banner3.jpeg"><img src="banner3.jpeg"></a>';
random_img[3] = '<a href="banner4.jpeg"><img src="banner4.jpeg"></a>';
random_img[4] = '<a href="banner5.jpeg"><img src="banner5.jpeg"></a>';
random_img[5] = '<a href="banner6.jpeg"><img src="banner6.jpeg"></a>';
random_img[6] = '<a href="banner7.jpeg"><img src="banner7.jpeg"></a>';

while(random_numbers.length < 3)
  random_number = Math.floor((Math.random() * total_images));
  if(random_numbers.indexOf(random_number) < 0)
    random_numbers.push(random_number);
  


image1.innerhtml = random_img[random_numbers[0]];
image2.innerHTML = random_img[random_numbers[1]];
image3.innerHTML = random_img[random_numbers[2]];

【参考方案1】：

简单的方法 - 安装 ACF 插件并创建您的字段 - https://prnt.sc/1yek9zy。 对于图像字段，选择图像 url。复制横幅 1 尽可能多的横幅，并将位置规则设置为分类产品类别 - https://prnt.sc/1yekgys

然后转到产品类别并添加您的图片和网址 - https://prnt.sc/1yeklpf 如果您有 ACF pro，请使用中继器字段。它更具动态性，您可以为每个产品类别添加任意数量的横幅。

使用此视觉挂钩指南更改您希望横幅显示的位置 - https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/

function woo_category_banners() 
    $term = get_queried_object();
    $banners = get_field('banners', $term->taxonomy . '_' . $term->term_id);
    if($banners):
    echo '<div class="banners">';
    foreach($banners as $k => $banner):
        $banner_data = $banners[$k];
        echo '<div class="banner"><a href="'.$banner_data['banner_url'].'"><img src="'.$banner_data['banner_image'].'"></a></div>';
    endforeach;
    echo '</div>';
    endif;
    

add_action('woocommerce_before_shop_loop','woo_category_banners',40);

【讨论】：

非常感谢！！从来没有想过这样做！ woocommerce_before_shop_loop 是我想要的位置，但是，横幅不会显示在页面上。我仔细检查了字段组是否正确创建并使用主题二十二十进行检查。我检查了浏览器检查器，但不存在。我尝试在本指南advancedcustomfields.com/resources/code-examples 之后的页面上添加简码，但仍然无济于事。我不熟悉 ACF，是否需要合并一个步骤来显示值？谢谢！

抱歉，我输入了 cat_banners，而不是横幅。我已经更新了我的代码。如果您仍然没有看到横幅，请重新保存您的类别横幅

感谢您的帮助。我试过但仍然没有显示在页面上。图片和网址已正确保存。我已经禁用了除 woocommerce 和 ACF 之外的所有插件，并使用默认的 2020 进行测试。我试图回显some text，以防万一可能是图像问题，但仍然无济于事。浏览器检查器也不显示 css。 WP_DEBUG 没有错误。

对不起，我的错。第 793 行出现错误消息 Notice: Undefined property: WP_Post_Type::$taxonomy in /bitnami/wordpress/wp-content/themes/twentytwenty/functions.php，这是从 cat_banners 编辑到 banners 的行

我已经测试了 2020 主题及其工作 - prnt.sc/1yj9evd

【参考方案2】：

我过去开发过类似的东西，但不是在 javascript 中，都是 php 代码。 我在 ACF 的类别中添加了一个新的横幅字段（只有一个，你会有很多），然后在类别页面上我会显示该横幅，或者递归地显示父亲的横幅，直到找到一个。 你会有多个图像字段，你会随机提取一个，也许它对你有用。

无论如何，要使用的钩子是：woocommerce_before_main_content 操作。

add_action('woocommerce_before_main_content','bannertop');
function bannertop() recursebanner('banner_top','bannertop');
function recursebanner($type,$class) 
    if ( is_tax( 'product_cat' ) ) 
        $term = get_queried_object();
        $banner = get_field('banner_top', $term);
        if ($banner) 
            echo '<div class="'.$class.'">';
            echo $banner;
            echo '</div>';
         else 
            // no banner defined, parse ancestors
            $cat_ancestors = get_ancestors( $term->term_id, 'product_cat' );
            foreach ($cat_ancestors as $cat_ancestor) 
                $termancestor = get_term($cat_ancestor);
                $banner = get_field($type, $termancestor);
                if ($banner) 
                    echo '<div class="'.$class.'">';
                    echo $banner;
                    echo '</div>';
                    break;
                
            
        
    

如果你想改用javascript，你必须将它添加到你的js文件中的子主题中，并像这样调用脚本：

$ (function () 
   // your code
); 

【讨论】：

$term 是一个对象，当 $banner = get_field('banner_top', $term);需要 obj id 所以应该是 $term->term_id 。 $cat_ancestor 是一个 id，所以没有必要获取 term 对象。即使你这样做 $termancestor 是一个对象，所以 $banner = get_field($type, $termancestor); $termancestor 应该是 $termancestor->term_id 吗？ .

@MartinMirchev 这段代码是 2 或 3 年前编写的，目前仍在一个站点上运行。也许 ACF 同时改变了函数的语法。从那以后我就没用过，所以我不知道。但是，如果您必须传递 id 而不是对象，则概念不会改变。

谢谢！我试过这个，但它似乎不起作用。我想更有可能是因为我不熟悉 ACF，因为我也无法让 @MartinMirchev 版本工作。我将花一些时间来了解 ACF，以便更好地了解它的工作原理。感谢您分享您的知识和经验。

在浏览了 ACF 文档后，测试了它，仍然可以正常工作！谢谢