WordPressの新着記事をスライダーで表示するショートコードのコード

2023年3月3日

2023年3月2日

大東信仁（ものくろ）

WordPressノウハウ

カルーセルスライダーを実装できるswiperを利用した。公式のドキュメントをしっかり読むのが吉。

作成するのに、参考にした記事はこちら、感謝です。

なお、コードは、プラグイン化している。

<?php
/*
Plugin Name: New Slider mono96
Description: 新着記事のカルーセルスライダー [mono96_shortcode_slider] 
Version: 1.0
*/

/* 参考 https://byacco.work/wordpress-post-slider-no_plugin/ */

if ( ! defined( 'ABSPATH' ) ) exit;

define( 'MY_PLUGIN_URL', plugins_url( '/', __FILE__ ) );



// ヘッダーに追加するコード
function add_slider_files() {
  //スタイルシートの読み込み
  wp_enqueue_style( 'swiper-style', 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css');
  wp_enqueue_style( 'swiper-mono96-style', MY_PLUGIN_URL .'css/swiper-style.css');
  
  //JavaScript の読み込み
  wp_enqueue_script( 'swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js', '', '', true);
   wp_enqueue_script( 'swiper-setting-js', MY_PLUGIN_URL . 'js/swiper_setting.js', '', '', true); 
}
add_action('wp_enqueue_scripts', 'add_slider_files');


// フッターに追加するコード
/*
function mono96_plugin_add_to_footer() {
echo '<script type="text/javascript" src="' . MY_PLUGIN_URL . 'js/swiper_setting.js"></script>';
}
add_action( 'wp_footer', 'mono96_plugin_add_to_footer' );
*/

// カルーセルスライダー ショートコード


function mono96_shortcode_slider() {
global $post;
ob_start();


 echo '<div class="swiper">';
 echo '<div class="swiper-wrapper">';

    $loop = new WP_Query(array(
      'post_type' => 'post', // ポストタイプを設定 デフォルト投稿はそのまま
      'posts_per_page' => 10 // 記事数を設定
    ));
    

    /* Start the Loop */

    while ($loop->have_posts()) : 
    $loop->the_post();

    echo '<div class="swiper-slide">';
    echo '<div class="swiper-slide__inner">';
    echo '<div class="swiper-slide__inner--item">';


       	if (has_post_thumbnail()) {
			echo '<figure class="post__thumb--img">'."\n";
			echo ' <!-- アイキャッチ画像 有り  -->'."\n";
   			echo '<a href="';
  			echo the_permalink();
			echo '" style="background-image: url(\'';
			echo the_post_thumbnail_url('large');
			echo '\')"></a>'."\n";
   		}else{ 
			echo '<figure class="post__thumb--img">'."\n";
			echo ' <!-- アイキャッチ画像がない場合  -->'."\n";
			echo '<a href="';
			echo the_permalink();
			echo '" style="background-image: url(\'';
			echo MY_PLUGIN_URL .'img/no-image.jpg';
			echo '\')"></a>'."\n";

			echo '</figure>'."\n";
    	}

       
  echo '<div class="text-block">';
             echo '<div class="meta-block">';
                echo '<span class="date">' . the_time('Y.m.d') . '</span>';

                $cats = get_the_category();
                foreach ($cats as $cat) :
                  if ($cat) echo '<span class="cat">' . $cat->cat_name . '</span>';
                endforeach;
                

              echo '</div>';
              echo '<a href="';
              echo the_permalink() ;
              echo '" rel="bookmark" title="';
              echo  $post->post_title;
              echo '">';
            	echo$post->post_title;
              echo '</a>';
            echo '</div>';
          echo '</div>';
        echo '</div>';
      echo '</div>';

    endwhile;
    wp_reset_query();


  echo '</div>';
  echo '<!-- If we need pagination -->';
  echo '<div class="swiper-pagination"></div>';
  echo '<!-- Add Arrows -->';
  echo '<div class="swiper-button-prev swiper-button-white"></div>';
  echo '<div class="swiper-button-next swiper-button-white"></div>';
  echo '  <!-- If we need scrollbar -->';
  echo '<div class="swiper-scrollbar"></div>';

echo '</div>';


return ob_get_clean();


}

add_shortcode( 'mono96_shortcode_slider', 'mono96_shortcode_slider' );

var Swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: {
		delay: 4000,
		disableOnInteraction: true
	},
slidesPerView: 1,
  breakpoints: { // ブレイクポイント
    992: { // 画面幅992px以上で適用
      slidesPerView: 3,
      spaceBetween: 10
    }
  },
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

/* swiper */
.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-block a {
    padding-top: 0 !important;
}

.swiper-scrollbar.swiper-scrollbar-horizontal {
    display: none;
}

.swiper-button-next,
.swiper-button-prev {
    --swiper-navigation-color: #fff;
}
.swiper-pagination-bullet-active {
    background: #333;
}

/* ページネーション */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 70px;
}

あとは、テーマによっては、微調整のCSSが必要かもしれない。

微調整のCSS例

/* swiper */
.swiper {
    margin-left: 40px;
    margin-right: 40px;
}

.swiper-button-next:after,  
.swiper-button-prev:after {
    top: -50px;
    position: relative;
}
.text-block a {
    color: #333;
}
span.date {
    margin-right: 1em;
}

.swiper-button-next, .swiper-button-prev {
    --swiper-navigation-color: #333;
}

.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 180px;
}


@media screen and (max-width: 480px) {
.swiper-button-next:after,  
.swiper-button-prev:after {
	display:none;
	}
	.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 160px;
}
}