Question

我正在建立一个Woocommerce网站。

在商店网格概览中，我展示了每种产品的精选图片（see link）。此特色图像将被裁剪，以在Shop Grid中保持相同的图像比率。

在单品页面中，我设法隐藏了精选图片，并使第一张缩略图显示为大（see link）。

我使用以下代码执行此操作：

<div class="images">

    <?php

            $imgid = $product->get_gallery_attachment_ids();

    ?>

    <a href="<?php echo wp_get_attachment_url( $imgid[0] ); ?>"
       class="woocommerce-main-image zoom first" 
       rel="lightbox[product-gallery]">
            <img src="<?php echo wp_get_attachment_url( $imgid[0] ); ?>" alt="">
    </a>

    <?php do_action( 'woocommerce_product_thumbnails' ); ?>

</div>

<script>
    jQuery('.thumbnails.columns-3 a:first-child').hide()
</script>

第一部分将找到图库数组中的第一张图片并以大尺寸显示（类woocommerce-main-image zoom first），同时链接到灯箱。

然后我调用缩略图，我使用jQuery隐藏第一个以避免重复（第一个大尺寸图像和第一个拇指是相同的）。

现在的问题是Lightbox中的，第一个图像将显示重复，因为它在数组中存在两次，第一个我调用big，而一个来自thumbs数组

有关如何在灯箱中两次显示图像的任何提示？

有人提到我应该过滤以下功能，但截至目前我还不知道如何做到这一点。

public function get_gallery_attachment_ids() {
    return apply_filters( 'woocommerce_product_gallery_attachment_ids', array_filter( (array) explode( ',', $this->product_image_gallery ) ), $this );
}

Answer 1

我认为使用Multiple Post Thumbnails是最简单的解决方案。完全用于在不同位置显示不同的特色图像。

选项＃1：多个帖子缩略图

您将安装该插件，然后将以下内容添加到主题的functions.php中。它没有100％经过测试，因此可能会出现流浪错误等等。完整documentation is here。

// register the new thumbnail
function so_31835142_register_extra_thumbnail() {
    if (class_exists('MultiPostThumbnails')) {
        new MultiPostThumbnails(
            array(
                'label' => __('Product Loop Image', 'your-theme'),
                'id' => 'product-loop-image',
                'post_type' => 'product'
            )
        );
    }
}
add_action( 'after_setup_theme', 'so_31835142_register_extra_thumbnail' );

// remove the existing loop thumbnail
function so_31835142_swap_loop_product_thumbnail(){
    if (class_exists('MultiPostThumbnails')) {
        remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
        add_action( 'woocommerce_before_shop_loop_item_title', 'so_31835142_loop_product_thumbnail', 10 );
    }
}
add_action( 'woocommerce_before_shop_loop_item, 'so_31835142_swap_loop_product_thumbnail' );

// Display the Secondary Thumbnail
function so_31835142_loop_product_thumbnail(){
    global $product;
    $thumbnail = MultiPostThumbnails::get_post_thumbnail(
        'product',
        'product-loop-image',
        $product->id,
        'shop_catalog'
    );

    if ( $thumbnail ) {
        return $thumbnail;
    } elseif ( wc_placeholder_img_src() ) {
        return wc_placeholder_img( $size );
    }
}

然后使用它，您可以像传统设置“特色图像”一样设置“产品循环图像”。这个新图像将在循环中使用。

选项＃2：模板覆盖

但作为替代方案，如果您坚持，可以编写自定义single-product/product-image.php模板并将其放在主题的woocommerce模板文件夹中。

在此替代方案中，我们仅显示单个产品页面$product->get_gallery_attachment_ids()上图像库中的图像，我们将使用基本的PHP循环和计数器系统以不同方式显示图像取决于它们在循环中的位置。 IE浏览器。第一个图像将显示为用于显示的后缩略图，其余项目将显示为拇指。

本节我已经测试过，所以理论上它应该是好的。

<?php
/**
 * Single Product Image
 *
 * @author      WooThemes
 * @package     WooCommerce/Templates
 * @version     2.0.14
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

global $post, $woocommerce, $product;

?>
<div class="images">

<?php
$attachment_ids = $product->get_gallery_attachment_ids();

if ( $attachment_ids ) {
    $loop       = 0;
    $columns    = apply_filters( 'woocommerce_product_thumbnails_columns', 3 );
    $attachment_count = count( $attachment_ids );

    foreach ( $attachment_ids as $attachment_id ) {

        // here's your first image
        if( $loop === 0 ){

            $image_title    = esc_attr( get_the_title( $attachment_id ) );
            $image_caption  = get_post( $attachment_id )->post_excerpt;
            $image_link     = wp_get_attachment_url( $attachment_id );
            $image          = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), null, array(
                'title' => $image_title,
                'alt'   => $image_title
            ) );

            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 );

        // resume the thumbnails for the rest
        } else {

            // open the thumbnails div
            if( $loop === 1 ) { ?> 
                <div class="thumbnails <?php echo 'columns-' . $columns; ?>">
            <?php }

                $classes = array( 'zoom' );

                if ( $loop == 0 || $loop % $columns == 0 )
                    $classes[] = 'first';

                if ( ( $loop + 1 ) % $columns == 0 )
                    $classes[] = 'last';

                $image_link = wp_get_attachment_url( $attachment_id );

                if ( ! $image_link )
                    continue;

                $image_title    = esc_attr( get_the_title( $attachment_id ) );
                $image_caption  = esc_attr( get_post_field( 'post_excerpt', $attachment_id ) );

                $image       = wp_get_attachment_image( $attachment_id, apply_filters( 'single_product_small_thumbnail_size', 'shop_thumbnail' ), 0, $attr = array(
                    'title' => $image_title,
                    'alt'   => $image_title
                    ) );

                $image_class = esc_attr( implode( ' ', $classes ) );

                echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', sprintf( '<a href="%s" class="%s" title="%s" data-rel="prettyPhoto[product-gallery]"  data-id="'. $attachment_id. '">%s</a>', $image_link, $image_class, $image_caption, $image ), $attachment_id, $post->ID, $image_class );

            // close the thumbnails div
            if( $loop === $attachment_count ) { ?> 
                </div>
            <?php }

        }

        $loop++;
    }

    ?>
    <?php
} else {

    echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" />', wc_placeholder_img_src(), __( 'Placeholder', 'woocommerce' ) ), $post->ID );

}
?>

</div>

Woocommerce中缩略图库中的重复图片

1 个答案: