woocommerce調用產品相冊gallery圖片如何操作?wordpress技巧

　　wordpress官網有很多woocommerce模板，但有些客戶要求定制模板，這時可能會碰到產品相冊圖片調用的問題，如果根據自帶的Storefront主題來改很麻煩，那我們就自己定義吧！下來就隨ytkah一起來看看woocommerce調用產品相冊gallery圖片吧！以下方法參考https://gist.github.com/Niloys7/17b88d36c1c38844a6cf2127c15dee63

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

foreach( $attachment_ids as $attachment_id ) 
{
  //Get URL of Gallery Images - default wordpress image sizes
  echo $Original_image_url = wp_get_attachment_url( $attachment_id );
  echo $full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0];
  echo $medium_url = wp_get_attachment_image_src( $attachment_id, 'medium' )[0];
  echo $thumbnail_url = wp_get_attachment_image_src( $attachment_id, 'thumbnail' )[0];
  
  //Get URL of Gallery Images - WooCommerce specific image sizes
  echo $shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0];
  echo $shop_catalog_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_catalog' )[0];
  echo $shop_single_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_single' )[0];
  
  //echo Image instead of URL
  echo wp_get_attachment_image($attachment_id, 'full');
  echo wp_get_attachment_image($attachment_id, 'medium');
  echo wp_get_attachment_image($attachment_id, 'thumbnail');
  echo wp_get_attachment_image($attachment_id, 'shop_thumbnail');
  echo wp_get_attachment_image($attachment_id, 'shop_catalog');
  echo wp_get_attachment_image($attachment_id, 'shop_single');
}
?>

　　以下是ytkah實現的效果圖，圖片可左右切換，點擊下方縮略圖也可以切換

　　具體的代碼如下（一個是調用產品特色圖the_post_thumbnail_url，一個是產品相冊gallery圖片）

<!-- Swiper -->
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="<?php the_post_thumbnail_url( 'full' ); ?>" alt="">
                        </div>
                            <?php
                            global $product;
                            $attachment_ids = $product->get_gallery_attachment_ids();
                            foreach( $attachment_ids as $attachment_id )
                            {
                                echo '<div class="swiper-slide"><img src="' .$full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0] .'" alt=""></div>';
                            }
                            ?>
                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next hidden-xs"></div>
                    <div class="swiper-button-prev hidden-xs"></div>
                </div>
                <div class="swiper-container gallery-thumbs">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="<?php the_post_thumbnail_url( 'small' ); ?>" alt="">
                        </div>
                        <?php
                        global $product;
                        $attachment_ids = $product->get_gallery_attachment_ids();
                        foreach( $attachment_ids as $attachment_id )
                        {
                            echo '<div class="swiper-slide"><img src="' .$shop_thumbnail_image_url = wp_get_attachment_image_src( $attachment_id, 'shop_thumbnail' )[0] .'" alt=""></div>';
                        }
                        ?>
                    </div>
                </div>

　　當然，js和css文件需要自己定義

 

								<div class="swiper-slide">
									<img src="<?php the_post_thumbnail_url( 'full' ); ?>" alt="<?php the_title(); ?>">
								</div>
                                <?php
                                global $product;
                                $attachment_ids = $product->get_gallery_attachment_ids();

                                foreach( $attachment_ids as $attachment_id )
                                {
                                    echo '<div class="swiper-slide"><img src="' .$full_url = wp_get_attachment_image_src( $attachment_id, 'full' )[0] .'" alt="';
                                    the_title();
                                    echo '"></div>';
                                }
                                ?>