woocommerce调用产品相册gallery图片如何操作?wordpress技巧

　　wordpress官网有很多woocommerce模板，但有些客户要求定制模板，这时可能会碰到产品相册图片调用的问题，如果根据自带的Storefront主题来改很麻烦，那我们就自己定义吧！下来就随ytkah一起来看看woocommerce调用产品相册gallery图片吧！以下方法参考https://gist.github.com/Niloys7/17b88d36c1c38844a6cf2127c15dee63

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

<?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图片）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<!-- 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文件需要自己定义

 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<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>'; } ?>

　　高级用法：woocommerce调用gallery