新着記事をショートコードで表示させる【swiper.jsでスライダー型に】

// slider
function add_slider_files() {
  // フロントページのみ
  if(is_front_page()){
    //スタイルシートの読み込み
     wp_enqueue_style( 'swiper-style', 'https://unpkg.com/swiper/swiper-bundle.min.css');
    
    //JavaScript の読み込み （body閉じ直前読み）
     wp_enqueue_script( 'swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', '', '', true);
  } 
}
add_action('wp_enqueue_scripts', 'add_slider_files');

//ショートコードを使ったphpファイルの呼び出し
function my_php_Include($params = array()) {
  extract(shortcode_atts(array('file' => 'default'), $params));
  ob_start();
  include(STYLESHEETPATH . "/$file.php");
  return ob_get_clean();
 }
 add_shortcode('myphp', 'my_php_Include');

<style>
  /*  slider */
  .swiper-slide .post__thumb--img {
    margin: 0 0 15px;
  }

  .swiper-slide .post__thumb--img a {
    padding-top: 62.5%;
    width: 100%;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .text-title {
    margin-bottom: 1rem;
    min-height: 2.5rem;
    line-height: 2;
  }

  .text-block .text-title a {
    font-weight: bold;
  }

  .meta-block .date {
    font-size: .75rem;
    margin-right: 1rem;
    color: #aaa;
  }

  .meta-block a {
    font-size: .75rem;
    margin-right: 1rem;
    color: #aaa;
  }

  .swiper {
    padding-bottom: 50px;
  }

  :root {
    --swiper-pagination-bullet-inactive-color: #aaa;
    --swiper-navigation-color: #ffffff;
    --swiper-pagination-color: #28a591;
    --swiper-navigation-size: 1rem;
  }

  .p-postSlider .swiper-pagination {
    bottom: 0;
    line-height: 1;
  }

  .swiper-outer {
    position: relative;
  }

  .p-postSlider .swiper-button-next,
  .p-postSlider .swiper-button-prev {
    font-size: 1.2rem;
    top: 26%;
    width: 24px;
    height: 32px;
    margin-top: 0;
    padding: 8px;
    background: 0 0;
    background: rgba(0, 0, 0, .6);
    transform: translateY(-50%);
  }

  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: 0;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: 0;
  }

  .post__thumb--img {
    overflow: hidden;
  }

  .post__thumb--img a {
    transition: all .4s;
  }

  .post__thumb--img a:hover {
    transform: scale(1.2);
  }

  @media (max-width: 599px) {
    .p-postSlider .swiper-button-next,
    .p-postSlider .swiper-button-prev {
      width: 24px;
      height: 32px;
      padding: 6px;
    }
  }
</style>

<div class="swiper post-slider p-postSlider">
  <div class="swiper-wrapper">
    <?php
    $loop = new WP_Query(array(
      'post_type' => 'news', // ポストタイプを設定 デフォルト投稿はそのまま
      'posts_per_page' => 3 // 記事数を設定
    ));
    ?>
    <?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('large'); ?>')"></a>
              </figure>
            <?php else : ?>
              <figure class="post__thumb--img">
                <!-- アイキャッチ画像がない場合  -->
                <a href="<?php the_permalink(); ?>" style="background-image: url('<?= get_template_directory_uri(); ?>/img/common/no_image1.gif')"></a>
              </figure>
            <?php endif; ?>
            <div class="text-block">
              <div class="text-title">
                <a href="<?php the_permalink(); ?>" rel="bookmark" title="<? echo the_title(); ?>">
                  <?php //echo the_title(); 
                  $the_title = get_the_title();
                  $title = mb_strimwidth($the_title, 0, 68, '…', 'utf-8');
                  if (mb_strwidth($title, 'utf-8') > 66) {
                    echo $title;
                  } else {
                    echo $the_title;
                  }
                  ?>
                </a>
              </div>
              <div class="meta-block">
                <span class="date"><?php the_time('Y.m.d'); ?></span>
                <?php
                // $cats = get_the_category();
                $cats = get_the_terms($post->ID, 'news_category');
                if (!empty($cats)) {
                  foreach ($cats as $cat) :
                ?><a href="<?php echo get_term_link($cat->slug, 'news_category'); ?>">
                      <?php
                      echo '<span class="cat">' . $cat->name . '</span>';
                      ?>
                    </a>
                <?php
                  endforeach;
                }
                ?>
              </div>
            </div>
          </div>
        </div>
      </div>
    <?php
    endwhile;
    wp_reset_query();
    ?>
  </div>
  <div class="swiper-pagination" style="margin-bottom:10px;"></div>
  <!-- Add Arrows -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
</div>

[myphp file="slider-news"]