//アイキャッチ画像を使用可能にする
add_theme_support('post-thumbnails');

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div class="container-swiper">
  <div class="swiper-wrapper">
    <?php
	    $loop = array(//配列を定義
 	'posts_per_page' => 5,
	'paged' => $paged,//現在のページ番号指定
	'orderby' => 'post_date',//日付が新しい順
	'order' => 'DESC',//降順　昇順はASC
	'post_type' => 'post',//投稿タイプを取得　固定ページならpageとか
	'post_status' => 'publish'//公開済の記事　下書きとかは除くということ
    );
    $the_query = new WP_Query($loop);
    ?>
    <?php
    /* Start the Loop */
    while ($the_query->have_posts()) : $the_query->the_post();
    ?>
      <div class="swiper-slide">
          
            <?php if (has_post_thumbnail()) : ?><!-- アイキャッチ画像がある場合  -->            
              <figure class="post__thumb--img"><!-- backgroundにサムネール画像を指定  --> 
                <a href="<?php the_permalink(); ?>" style="background-image: url('<?php the_post_thumbnail_url(); ?>')"></a>
              </figure>
              
            <?php else : ?><!-- アイキャッチ画像がない場合  -->           
              <figure class="post__thumb--img"><!-- backgroundに専用画像指定  -->                
                <a href="<?php the_permalink(); ?>" style="background-image: url('<?= get_template_directory_uri(); ?>/img/nonimg4.png')"></a>
              </figure>
            <?php endif; ?>

            <div class="text-block"><!-- 画像上にタイトルなど表記  -->   
              <div class="meta-block">
                <span><i class="far fa-calendar-alt"></i>　<?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>
    <?php
    endwhile;
    wp_reset_query();
    ?>
  </div><div class="swiper-pagination swiper-pagination-black"></div>
<!-- スライドボタンをつけるなら
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div> -->
</div>

<script>
  var mySwiper = new Swiper('.container-swiper', {

	// スライドの間隔ー単位はpx
	spaceBetween: 0,
	// 表示されるスライドの枚数
	slidesPerView: 1,
	// スライドの高さに合わせてSwiperの高さを変える
	autoHeight: true,
	// ループする
	loop: true,
	// スライドスピード	
	speed: 1500,
	// エフェクト	
	effect: 'fade',
	/*自動で再生する*/
	autoplay: {
	// スライドが動く間隔。(これなら3秒)
	delay: 8000,
	// trueなら最後のスライドまで行ったら停止する。falseなら最初に戻る
	stopOnLastSlide: false,
	// trueなら触った後停止falseなら再生され続ける
	disableOnInteraction: false,
	// trueなら最後のスライドまで行ったら停止する。falseなら最初に戻る
	reverseDirection: false
	},

	/*スライドボタン*/
	navigation: {
		nextEl: '.swiper-button-next',
		prevEl: '.swiper-button-prev'
	},

	/*ページネーション*/
	pagination: {
		el: '.swiper-pagination',
		type: 'bullets',
		clickable: true,
	}
});</script>

// スライドの高さに合わせてSwiperの高さを変える
autoHeight: true,//falseだと高さを画像に合わせて自動調整しない
effect: 'slide'//スライドのアニメーション（fade・cube・coverflow・flipの4種類）
direction: 'vertical' //スライドを縦に
grabCursor: true //マウスオンでカーソルがグローブ
slidesPerView: 3//一画面にスライド画像の表示枚数
slidesPerGroup: １//スワイプした時に設定枚数スワイプする

<?php if ( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } ?>

.container-swiper {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
margin-top: 10px;
position: relative;/*相対配置*/
overflow: hidden;/*はみ出た部分隠す*/
}
.swiper-slide .post__thumb--img {
margin: 0 0 0 0px;
}
.swiper-slide .post__thumb--img a {
padding-top: 75%;
width: 100%;
display: block;
background-position: center;/*背景画像の位置指定*/
background-repeat: no-repeat;/*背景画像の繰り返し指定*/
background-size: cover;/*背景画像の繰り返し指定*/
}
.swiper-pagination{
margin-bottom: 10px;
}
.container-swiper .text-block {
position: absolute;/*絶対配置*/
top: 10px;
left: 10px;	
}
.container-swiper .text-block a{
font-weight:500;
}