我正在嘗試在產品類別頁面中顯示隨機影像/視頻。每個類別頁面都將顯示自己的一組影像。
我以典型的新手方式通過在每個產品類別頁面中添加各自的影像集來做到這一點。有沒有一種方法可以使用鉤子在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]];uj5u.com熱心網友回復：
我過去開發過類似的東西，但不是在 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 hljs-variable">$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 hljs-variable">$class.'">';
echo $banner;
echo '</div>';
break;
}
}
}
}
}
如果您想改用 javascript，則必須將其添加到子主題的 js 檔案中，并像這樣呼叫腳本：
$ (function () {
// your code
});
uj5u.com熱心網友回復：
簡單的方法 - 安裝 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('cat_banners', $term->taxonomy . '_' . $term->term_id);
if($banners):
echo '<div >';
foreach($banners as $k => $banner):
$banner_data = $banners[$k];
echo '<div ><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);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/349532.html
標籤：javascript php 查询 WordPress的 求购
上一篇：如何在光滑的滑塊中垂直對齊圖片？