首页 > WordPress
wordpress 文章详情页轮播图
来源:TP课堂 时间:2022-04-16 点击:3097

很多时候需要在详情页面有轮播图的效果,特色图片只有一个,但是我们可能需要几张轮播图来展示,比如某房子的展示图,某产品的展示图等。


插件: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>