我安装了带有 Woocommerce 的 Wordpress。 商店的每件产品都有一个特色图片,它将显示在商店页面和单品页面中,而画廊图片只会显示在单个产品页面(首先作为拇指,然后在灯箱中点击放大)。
这是由以下代码产生的:
<div class="images">
<?php
if ( has_post_thumbnail() ) {
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_caption = get_post( get_post_thumbnail_id() )->post_excerpt;
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array(
'title' => $image_title,
'alt' => $image_title
) );
$attachment_count = count( $product->get_gallery_attachment_ids() );
if ( $attachment_count > 0 ) {
$gallery = '[product-gallery]';
} else {
$gallery = '';
}
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a>', $image_link, $image_caption, $image ), $post->ID );
} else {
echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );
}
?>
<?php do_action( 'woocommerce_product_thumbnails' ); ?>
</div>
这样,在一个正常的单品页面中会产生以下内容:
<div class="images">
<a href="br1-opression.jpg"
itemprop="image"
class="woocommerce-main-image zoom"
title=""
data-rel="prettyPhoto[product-gallery]">
<img width="750"
height="544"
src="br1-opression.jpg"
class="attachment-shop_single wp-post-image"
alt="br1-opression"
title="br1-opression">
</a>
<div class="thumbnails columns-3">
<a href="br1-opression-1.jpg"
class="zoom first"
title="br1-opression-1"
data-rel="prettyPhoto[product-gallery]">
<img width="180"
height="180"
src="br1-opression-1-180x180.jpg"
class="attachment-shop_thumbnail"
alt="br1-opression-1">
</a>
<a href="br1-opression-2.jpg"
class="zoom"
title="br1-opression-2"
data-rel="prettyPhoto[product-gallery]">
<img width="180"
height="120"
src="br1-opression-2-180x120.jpg"
class="attachment-shop_thumbnail"
alt="br1-opression-2">
</a>
</div>
</div>
如您所见,它基本上将特色图片(大尺寸)和缩略图中的画廊图片(较小,在特色图片下方)放在一个画廊中。
我要实现的目标如下:
- 从单个产品页面中删除特色图片
- 从图库中取出第一张图片,并放入大图片(与特色图片大小相同)
- 将其他拇指放在下面
长话短说,我想在单一产品页面中用图库中的第一张图片替换特色图片。
到目前为止,我已经尝试过:
使用 CSS 和 Functions.php 中的新 Hook 隐藏特色图片。
它确实会杀死特色图片,但它仍会显示在灯箱中。 而且拇指仍然很小,所以单品页面没有大图,这是不可取的。
有什么想法或想法吗?
最佳答案
你可以试试这个:
$imgid = $product->get_gallery_attachment_ids();
get_gallery_attachment_ids()
函数获取数组中的所有图库 ID,因此现在您可以通过这种方式获取该数组的第一张图像:
<a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" class="woocommerce-main-image zoom"><img src="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" alt=""></a>
关于php - 从 Woocommerce 的单个产品页面中删除特色图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31630542/