SWELLにSwiperを使ってスライダー（スライドショー）を実装する元祖の記事（？）を書いたのは私ですが、その内容をSWELL 2.5.3以降対応版に更新しました。
WordPressテーマ「SWELL」ではスライダーにSwiper.jsが使用されています。
あ、本当ですね…🤔
— 了🌊SWELL開発者 (@ddryo_loos) March 5, 2020
結構前に一度修正入れたんですがその修正外れちゃってるのかな…。
スライダー部分はSwiper使っているのですが、どうもちらつきが出てしまう場合があるんですよね。
特に表示枚数が1 ~ 2の間だと、どうしようもなかった気がします🤢
これは私が、仕事で任意の場所にスライダーを実装して欲しいという要望があったのと、あとは知り合いのフロントエンドエンジニアのフォロワーさんからの勧めもあったので、今回Swiper.jsによるスライダーの実装をやってみました。
以下に、投稿記事や固定ページ・トップページ等の任意の場所に、スライダー実装する方法をまとめまたのでご参考ください。
このやり方で実装をすると、よっぽど複雑なカスタマイズをしない限り、SWELLのPjax（Barba.js）によるページ遷移高速化をONにしても不具合は起きないかと思います。
この記事は、どうしてもPjaxを使いたい方向けに書いています。
しかしながら、Pjaxを使わない（Prefetchまで）あるいはスライダーを設置したページのみPjaxで遷移させないページ指定していただければ、XO Sliderプラグインを使用してスライダーを実装するほうがコードを書かずに手軽で、学習コストが発生しません。特に、ここ最近のSWELLはバージョンアップごとに高速化が目覚ましく、Pjaxも非推奨となっているため他プラグインも導入しやすいです。XO Sliderも同じSwiperを使っていて、比較的手軽に設定できますのでおすすめします（スライダーの種類はある程度制限されます）。
自分でfunctions.phpを編集する場合や、Code Snippetsプラグインを使用してコードを追加する場合、コードの追加の仕方を誤ったときにWordPress自体がエラーが発生して、サイトが閲覧できなくなることがあります。そうした場合の注意点を以下の記事にまとめたので、ぜひご覧ください。
SWELLバージョン2.5.3以降の注意点（事前準備）
SWELL 2.5.3以降では、Swiperのバージョンが7系（記事執筆時点ではバージョン7.0.6）になり、かつSWELLの標準機能からは利用することがないオプションに関するCSSについては削除し、ファイルを軽量化されています。また、2.5.0以降はすべて、必要なときだけSwpierが読み込まれる形に仕様変更になっています。
Swiperを使用しているページで表示が崩れた場合、まず以下のスクリプトで必要なページ表示時にswiper.min.jsとswiper.cssを読み込ませる必要があります。 そのため、改めてCDNから読み込んだり、Githubからダウンロードして読み込んだりする必要はありません。また、SWELLの高速性能を最大限生かすために、必要なページのみSwiperが読み込まれるようにしてあります。
子テーマのfunctions.phpか、もしくはCode Snippetsプラグインを使用して書いてください。
単一の投稿記事用のコード
add_action('wp_enqueue_scripts', function() {
if ( is_single('ページIDまたはスラッグ名') ) {
wp_enqueue_script('swell_swiper');
wp_enqueue_style('swell_swiper');
}
});複数の投稿記事用のコード
add_action('wp_enqueue_scripts', function() {
if ( is_single(array('ページIDまたはスラッグ名', 'ページIDまたはスラッグ名')) ) {
wp_enqueue_script('swell_swiper');
wp_enqueue_style('swell_swiper');
}
});必要に応じて、カンマ（,）区切りでページを追加してください。
- 投稿記事の場合は
is_single - 固定ページの場合は
is_page - カテゴリーページの場合は
is_category - トップページの場合は
is_home()またはis_front_page() - LPページの場合は
is_singular('lp')
などに置き換えてください。詳しくはこのあたりの記事が参考になると思います。
動作サンプル
実際に実装したものを見てみましょう。以下が見本です。
実装する手順
以下の手順で実装しましょう。
予めメディアに画像をアップロードしておきましょう。それぞれの画像は縦横比を揃えておきましょう。
この時点で、画像のURLはそれぞれコピーして控えておきましょう。STEP2で、画像URLをHTML上に貼り付けていきます。
カスタムHTMLブロックを使用して、スライダーのHTMLを書きます。
Swiper 7系からswiper-containerのクラス名がswiperに変更になっているので注意！
<div class="swiper slider1">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="https://****.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://****.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://****.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://****.jpg" alt=""></div>
<div class="swiper-slide"><img src="https://****.jpg" alt=""></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>最初のdivのクラス名swiperは共通ですが、その後に任意のクラス名をあてないと他のスライダーやSWELLの動作にも影響を与えてしまう可能性があるので、必ず任意のクラス名をあてましょう。他のクラス名と被らなければ何でも良いです。ここでは、slider1としています。
そして、上記コードのhttps://****.jpgの部分に、STEP1で取得した画像URLを貼り付けていきましょう。
カスタムCSS & JS > JSの部分に、たとえば以下の通りにSwiper基本設定のJavaScriptを書きます。以下のコードは、上記のサンプルと同じスライダーを実装する場合のコードです。
Swiperのスライダーは、HTML・CSS・JavaScriptを変更することによって、比較的簡単にカスタマイズすることができます。ここでは理解しやすいように、コメントを丁寧に入れてみました。
JSの先頭行のvar mySwiper = new Swiper ('.slider1', {の部分に、必ずSTEP2で設定した任意のクラス名slider1の前に.を付けて.slider1と追記しましょう。
var swiper = new Swiper ('.slider1', {
loop: true, //最後に達したら先頭に戻るかどうか
slidesPerView: 1, //一画面での表示スライド枚数（スマホ）
spaceBetween: 0, //各スライド間の余白の間隔（スペース）（スマホ）
centeredSlides : true, //対象のスライドを中央寄せするかどうか
speed: 1000, //各スライド間の移動速度
breakpoints: {
600: {
slidesPerView: 2, //一画面での表示スライド枚数（PC）
spaceBetween: 5 //各スライド間の余白の間隔（スペース）（PC）
}
},
autoplay: {
delay: 2000, //自動再生の1枚のスライドを待機する速度
disableOnInteraction: false, //Swiperのautoplayがクリック・フリック後も止まらないようにする
},
pagination: {
el: '.swiper-pagination', //ページネーションの要素
type: 'bullets', //ページネーションの種類
clickable: true, //クリックに反応させる
},
//ナビゲーションボタン（矢印）表示の設定
navigation: {
nextEl: '.swiper-button-next', //「次へボタン」要素の指定
prevEl: '.swiper-button-prev', //「前へボタン」要素の指定
},
})もっとカスタマイズしてみたい…！という人は、Googleで「Swiper.js 使い方」「Swiper.js 実装方法」「Swiper.js カスタマイズ」など検索してみると良いのでは…！と思います。様々なカスタマイズ方法があります。
たとえば、ガリガリコードさんのサイトには多種多様なスライダーのサンプルが付いているので参考になります。
ただし、Swiper 7系とそうでないもので、実装方法が若干変わっている場合がありますので、注意してください（特に、前述の通りSwiper 7系からswiper-containerのクラス名がswiperに変更になっているので注意しましょう）。先程、紹介したガリガリコードさんの記事も、旧クラス名のままになっています。また、SWELLに含まれているSwiperでは、CSSが足りない場合もあるので注意してください。
SWELLの開発者さんも自身のブログでSwiper.jsの紹介をされています
以上のやり方で、無事にSWELLで運用中のブログにSwiper.jsのスライダーを実装することができました。
