swiperで投稿一覧をスライダーにする

備忘録です。

functionがある階層にswiperを置く。

• swiper-bundle.min.css
• swiper-bundle.min.js

①headerに追加する

<script src="/cocoon-child-master/swiper-bundle.min.css"></script>

②footerに追加する

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.1.0/jquery-migrate.min.js"></script>
<script src="/cocoon-child-master/swiper-bundle.min.js"></script>
<script src="/cocoon-child-master/slider.js"></script>

③functionがある階層に下記を追加

slider.php

<div class="swiper-container">
  <div class="swiper-wrapper">
    <?php
    $loop = new WP_Query(array(
      'post_type' => 'post', // ポストタイプを設定 デフォルト投稿はそのまま
      'posts_per_page' => 5 // 記事数を設定
    ));
    ?>
    <?php
    /* Start the Loop */
    while ($loop->have_posts()) : $loop->the_post();
    ?>
      <div class="swiper-slide">
        <div class="swiper-slide__inner">
          <div class="swiper-slide__inner--item">
            <?php if (has_post_thumbnail()) : ?>
              <figure class="post__thumb--img">
                <a href="<?php the_permalink(); ?>" style="background-image: url('<?php the_post_thumbnail_url('thumbnail'); ?>')"></a>
              </figure>
            <?php else : ?>
              <figure class="post__thumb--img">
                <!-- アイキャッチ画像がない場合  -->
                <a href="<?php the_permalink(); ?>" style="background-image: url('<?= get_template_directory_uri(); ?>/img/no-image.jpg')"></a>
              </figure>
            <?php endif; ?>
            <div class="text-block">
              <div class="meta-block">
                <span class="date"><?php the_time('Y.m.d'); ?></span>
                <?php
                $cats = get_the_category();
                foreach ($cats as $cat) :
                  if ($cat) echo '<span class="cat">' . $cat->cat_name . '</span>';
                endforeach;
                ?>
              </div>
              <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?= $post->post_title; ?>">
                <?php echo $post->post_title; ?>
              </a>
            </div>
          </div>
        </div>
      </div>
    <?php
    endwhile;
    wp_reset_query();
    ?>
  </div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

slider.js

var swiper = new Swiper('.swiper-container', {
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    pagination: {
      el: '.swiper-my-pagination',
      clickable: true,
      renderBullet: function (index, className) {
        return '<span class="' + className + '">' + '<img src="/wp-content/uploads/s0' + (index + 1) + '.jpg" alt="">' + '</span>';
      },
    },
  });

④cssでデザイン調整をする

style.css

.swiper-pointer-events {
  overflow: hidden;
}
.swiper-slide .post__thumb--img a {
  padding-top: 62.5%;
  width: 100%;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.swiper-my-pagination .swiper-pagination-bullet {
  width: auto;
  height: auto;
  border-radius: 0;
}
.swiper-container-horizontal
  > .swiper-my-pagination.swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0;
}
.swiper-my-pagination {
  margin-bottom: 5px;
  table-layout: fixed;
  display: table;
}
.swiper-my-pagination img {
  box-shadow: none;
  margin: 0;
  vertical-align: bottom;
}
.swiper-my-pagination .swiper-pagination-bullet {
  display: table-cell;
  padding: 2px;
  background: transparent;
  opacity: 1;
}
.swiper-my-pagination .swiper-pagination-bullet {
  background: transparent;
  opacity: 0.2;
}
.swiper-my-pagination .swiper-pagination-bullet-active {
  opacity: 1;
}

.swiper-pagination-bullet img {
  width: 100%;
  height: 30px;
  object-fit: cover;
}
span.swiper-pagination-bullet {
  z-index: 10;
}

.swiper-button-next,
.swiper-button-prev {
  width: 8%;
  height: 8%;
  margin-top: -16px;
  background-size: 18px 28px;
}
.swiper-container .swiper-slide {
	position: relative;
}
.swiper-container .swiper-slide .swiper-slide-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: all 3s ease 0s;
}

⑤固定ページに追加するには下記を挿入

<?php get_template_part( 'slider' ); ?>