很多时候需要在详情页面有轮播图的效果,特色图片只有一个,但是我们可能需要几张轮播图来展示,比如某房子的展示图,某产品的展示图等。
插件:Multiple Post Thumbnails
functions.php添加:
//自定义添加特色图片 if (class_exists('MultiPostThumbnails')) { new MultiPostThumbnails( array( 'label' => '轮播图1', 'id' => 'image1', 'post_type' => 'post' ) ); new MultiPostThumbnails( array( 'label' => '轮播图2', 'id' => 'image2', 'post_type' => 'post' ) ); new MultiPostThumbnails( array( 'label' => '轮播图3', 'id' => 'image3', 'post_type' => 'post' ) ); }
页面调取:
<?php $imageid = MultiPostThumbnails::get_post_thumbnail_id('post', 'image1', $post->ID); $imageurl = wp_get_attachment_image_src($imageid,'large'); $image1_url=$imageurl[0]; $imageid = MultiPostThumbnails::get_post_thumbnail_id('post', 'image2', $post->ID); $imageurl = wp_get_attachment_image_src($imageid,'large'); $image2_url=$imageurl[0]; $imageid = MultiPostThumbnails::get_post_thumbnail_id('post', 'image3', $post->ID); $imageurl = wp_get_attachment_image_src($imageid,'large'); $image3_url=$imageurl[0]; ?> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class='pic' style="background:url('<?php echo $image1_url;?>') no-repeat;background-size: cover;"></div> </div> <div class="swiper-slide"> <div class='pic' style="background:url('<?php echo $image2_url;?>') no-repeat;background-size: cover;"></div> </div> <div class="swiper-slide"> <div class='pic' style="background:url('<?php echo $image3_url;?>') no-repeat;background-size: cover;"></div> </div> </div> <div class="swiper-pagination"></div> </div>