Swiper.js│サムネイル付きスライダーを作成する方法

2021.03.062024.03.07

スライダーを入れる時に、Meta Sliderのプラグインを良く使います。

しかしサムネイル付きスライダーを作成するには有料版を契約しないといけません。

MetaSlider

Slider, Gallery, and Carousel by MetaSlider – WordPress Slideshow Create a powerful, SEO-optimized slider, slideshow, carousel, or gallery with the #1 WordPress plugin for image, photo, video (YouTube / Vimeo)

ということで、有名なSwiper.jsを使ってサムネイル付きスライダーを作成（カスタマイズ）してみました！（スワイプもできます）

motoki

カラムブロックの入れるとマイベストっぽくなりますね。

ここにテキストが入ります。

WordPressでサムネイル付きスライダーを作成する方法

Swiper.jsというライブラリを使用しています。

これは jQuery使わないので、SWELLなどのテーマと相性が良さそうです。

Swiper

Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

STEP

HTMLの作成

基本的にSwiperのHTMLです。

画像のパスは手動でいれてください。※連番にしてください

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s01.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s03.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s04.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s05.jpg" alt=""></div>
    <div class="swiper-slide"><img src="https://motoki-design.co.jp/wordpress/wp-content/uploads/s06.jpg" alt=""></div>
  </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  <div class="swiper-my-pagination"></div>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</div>

コードの最後にSwiperのJSを読み込んでいます。

コードをダウンロードして子テーマから読み込みたい時は下記のコードをfunctions.phpにいれてみてください。

function load_script_init() {
	wp_enqueue_style( 'main-script', get_stylesheet_directory_uri() .'/css/swiper.min.css');
	wp_enqueue_script( 'main-script', get_stylesheet_directory_uri() .'/js/swiper.min.js');
}
add_action( 'wp_enqueue_scripts', 'load_script_init' );

STEP

CSSの挿入

SwiperのCSSを挿入します。

こちらの見た目はお好みにどうぞ。

.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-button-next,
.swiper-container-rtl .swiper-button-prev {
  top: 43%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  top: 43%;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.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;
}

STEP

JavaScriptの挿入

SwiperのJavaScriptコードです。

画像は連番にしておくとサムネイルのコードを自動生成できます。

下記の記事を参考にさせていただきました。パス部分はは手動で変更してください。

HPcode（えいちぴーこーど）

【実例12パターン】画像スライダーはSwiper使っておけば間違いない！実用的な使い方を紹介 | HPcode（えい… スライダー系プラグインの最高峰と名高い「Swiper」の紹介です。いろんなスライダープラグイン使ってますが、実現できるパターンが一番多いのではないかと思います。jQuery…

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="https://motoki-design.co.jp/wordpress/wp-content/uploads/s0' + (index + 1) + '.jpg" alt="">' + '</span>';
    },
  },
});

JavaScriptをfunctions.phpに入れてあげる場合はこちら。

function my_swiper() {
$my_swiper = <<<EOM

<!-- headに表示させたいコードはここにいれる-->

EOM;
echo $my_swiper;
}
add_action( 'wp_head', 'my_swiper', 99);

WordPressでサムネイル付きスライダーを作成する方法まとめ

本記事では｢【Swiper.js】Wordpressでサムネイル付きスライダーを作成する方法｣について書きました。

Swiperにはさまざまオプションが付いていて、どんなスライダーでも作成できる応用力があります。

Swiperのオプション

気になる方は公式のデモページをみてください。

Swiper

Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

Swiper.js│サムネイル付きスライダーを作成する方法

WordPressでサムネイル付きスライダーを作成する方法

WordPressでサムネイル付きスライダーを作成する方法まとめ

関連記事