WordPressのカスタム投稿タイプでSwiperの実装

Swiperを使用する手順

まず初めにSwiperを使用するに当たって「swiper.js」「swiper.css」が必要になります。
方法としては２種類あります。

1. CDNでサーバーから読み込む（簡単）
2. 公式サイトから「swiper.js」「swiper.css」をダウンロードしてそれらのファイルを読み込む（カスタマイズしやすい）

今回はCDNで読み込みたいと思います。

WordPressにSwiperを読み込む

WordPressの子テーマのfunctions.phpに下記のphpを記述します。
xxx_enqueue_scriptsの「xxx」の箇所は任意の名前に変えていただいてください。（面倒であればそのまま使用いただいても大丈夫です）

  
  //functions.phpにswiperを記述
  function xxx_enqueue_scripts() {
    // swiper.min.css
    wp_enqueue_style( 'swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css');
    // 子テーマの独自jsファイルを直前で読み込む（jQueryの後に）
    wp_enqueue_script( 'swiper', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js', array('jquery'), false, true);
    wp_enqueue_script( 'original', get_theme_file_uri('/js/script.js'), 'swiper-js', false, true);
  }
  add_action( 'wp_enqueue_scripts', 'xxx_enqueue_scripts' );
  

javascriptの記述

続いて「script.js」というファイル名を作成してそこに下記のjavascriptを記述します

  
  jQuery(function ($) {
    let mySwiper = new Swiper('.swiper-container', {
      loop: true,
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: false,
      autoplay: 3000,
      speed: 300,
      visibilityFullFit: true,
      pagination: '.swiper-pagination',
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
      breakpoints: {
        767: {
          slidesPerView: 1,
          spaceBetween: 0,
        }
      }
    })
  });
  

Swiperのパラメータについては公式のサイトに記載がございます。
https://swiperjs.com/swiper-api 

カスタム投稿のループを回してswiperと連動する

 Wordpress側でカスタム投稿（CPT-UI など）を作成してアイキャッチ画像を入れます
そのアイキャッチ画像をスライダーに表示させようと思います。
アイキャッチを設定していない画像は「default-thumbnail.jpg」が出力されるように記述しています。

ここではポストタイプ名を「category_type01」「category_type02」としています。任意の名前に変更して下さい。

  
  <section>
    <div class="_inner">
      <div class="swiper-container">
          <div class="swiper-wrapper">
          <?php
          $loop = new WP_Query(
              array(
              'post_type' => array('category_type01','category_type02'),
              'posts_per_page' => 10,
              'order' => 'DESC',
              'orderby' => 'date'
              ));
          if ($loop->have_posts()): while($loop->have_posts()): $loop->the_post();
          ?>
          <div class="swiper-slide">
              <div class="_content">
              <?php if ( has_post_thumbnail() ) : ?>
                  <div class="p-home_tweet_image">
                  <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('custom-thumbnail'); ?></a>
                  </div>
              <?php else : ?>
                  <div class="p-home_tweet_image">
                  <a href="<?php the_permalink(); ?>"><img src="<?php echo get_theme_file_uri('/img/default-thumbnail.jpg'); ?>" alt="default-thumbnail" /></a>
                  </div>
              <?php endif; ?>
              <div class="_text">
                  <div class="_title"><a href="<?php the_permalink(); ?>"><?php the_title( '<h2>', '</h2>' ); ?></a></div>
                  <div>
                  <span class="_time"><?php the_time('Y/m/d'); ?></span>
                  <div class="_category">
                  <?php
                  if ( is_taxonomy('category_type01') ) {
                      $terms = get_the_terms($post->ID,category_type01);
                      foreach( $terms as $term ) {
                          echo '<span>' . $term->name . '</span>';
                      }
                  }
                  ?>
                  <?php if ( is_taxonomy('category_type02') ) {
                      $terms = get_the_terms($post->ID,category_type02);
                      foreach( $terms as $term ) {
                          echo '<span>' . $term->name . '</span>';
                      }
                  }
                  ?>
                  </div>
                  </div>
              </div><!-- text -->
              </div><!-- _content -->
          </div><!-- swiper-slide -->
          <?php endwhile; else : ?>
          <!-- 投稿が無い場合の処理 -->
          <p>まだ投稿がありません。</p>
          <?php endif; ?>
          </div><!-- swiper-wrapper -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
      </div><!-- swiper-container -->
    </div><!-- _inner -->
  </section>
  <?php wp_reset_query(); ?>
  

装飾や調整

これで表示がされていればあとはhtml,cssでデザインやレイアウト調整をすれば完了です。

是非試してみて下さい。