サイト全体設定 > お知らせバー お知らせバーにボタンを配置できます

アクションフック 'swell_before_post_head'

SWELLの任意の場所へスライダー(スライドショー)の実装方法【Swiper】(SWELL 2.5.3以降対応版)

アクションフック 'swell_before_post_thumb'

SWELLでスライダー(Swiper)を実装しよう

SWELLにSwiperを使ってスライダー(スライドショー)を実装する元祖の記事(?)を書いたのは私ですが、その内容をSWELL 2.5.3以降対応版に更新しました。

WordPressテーマ「SWELL」ではスライダーにSwiper.jsが使用されています。

これは私が、仕事で任意の場所にスライダーを実装して欲しいという要望があったのと、あとは知り合いのフロントエンドエンジニアのフォロワーさんからの勧めもあったので、今回Swiper.jsによるスライダーの実装をやってみました。

以下に、投稿記事固定ページトップページ等の任意の場所に、スライダー実装する方法をまとめまたのでご参考ください。

このやり方で実装をすると、よっぽど複雑なカスタマイズをしない限り、SWELLのPjaxBarba.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.jsswiper.cssを読み込ませる必要があります。 そのため、改めてCDNから読み込んだり、Githubからダウンロードして読み込んだりする必要はありません。また、SWELLの高速性能を最大限生かすために、必要なページのみSwiperが読み込まれるようにしてあります。

子テーマのfunctions.phpか、もしくはCode Snippetsプラグインを使用して書いてください。

本記事以上に高度なカスタマイズをしている方は、Swiperが読み込まれていても表示が崩れる可能性があります。

単一の投稿記事用のコード

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')

などに置き換えてください。詳しくはこのあたりの記事が参考になると思います。

動作サンプル

実際に実装したものを見てみましょう。以下が見本です。

実装する手順

以下の手順で実装しましょう。

STEP
メディアに画像をアップロードする

予めメディアに画像をアップロードしておきましょう。それぞれの画像は縦横比を揃えておきましょう。

この時点で、画像のURLはそれぞれコピーして控えておきましょう。STEP2で、画像URLをHTML上に貼り付けていきます。

STEP
カスタムHTMLブロックにスライダーの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を貼り付けていきましょう。

STEP
Swiper基本設定のJavaScriptを書く

カスタムCSS & JS > JSの部分に、たとえば以下の通りにSwiper基本設定のJavaScriptを書きます。以下のコードは、上記のサンプルと同じスライダーを実装する場合のコードです。

Swiperのスライダーは、HTMLCSSJavaScriptを変更することによって、比較的簡単にカスタマイズすることができます。ここでは理解しやすいように、コメントを丁寧に入れてみました。

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のスライダーを実装することができました。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

埼玉県在住・男性。SWELLを使い続けて2年、フォーラムで回答し続けて1年以上。この経験から得られたノウハウをみなさんに役立てたいと思い、このサイトを作りました。

コメント

コメント一覧 (5件)

  • SWELLの任意の場所へスライダー(スライドショー)の実装方法【Swiper】(SWELL 2.5.3以降対応版)

    こちらの記事ありがとうございます!!早速swellのトップページ『追加html』で実装できました。

    そこで、、、
    こちらの追加HTMLを携帯のみで表示したいのですが、調べてもどうすれば良いかわからず。ご相談させてほしいです(*´ー`*)

    • 記事をお読みいただきまして、ありがとうございます。

      PC・スマホの出し分けについては、こちらのページを見ていただき、
      https://tecchan.jp/swell-tips/entry/device-only/

      divのクラス名にsp_onlyを追加すれば出来ると思います。

      つまり、最初の
      class=”swiper slider1″
      を、
      class=”swiper slider1 sp_only”
      とする感じですね。

      正確には「PCでは非表示(読み込み自体は行われる)」といった感じの動作になります。

  • しらこさん、返信いただきありがとうございます!嬉しいです。家に帰ったら早速してみたいと思います!!

    また、最後にもうひとつ。
    携帯でみるとき画像エリアの縦を倍にすることは可能でしょうか??m(_ _)m

    • さて、それはどうすれば良いでしょうか?
      ここまでのヒントを出したら、それくらいはあと一歩で出来ると思います。

      また、まだ試していない方に、ここで質問すれば答えを返すわけではありません。必ずしも、私が考える必要はないと思います。
      こちらとしては試した結果をフィードバックしてもらえると嬉しいです。
      ぜひ試したことを書いてください。

      また、厳しいようですがまず手を動かして自分で考えることができないと、Swiperを扱って今後トラブルが起きたときにも解決は難しいと思います。
      コードを触るのであれば、そのメンテナンスを行う人は自分です。

      もしも確実なサポートをご要望でしたら、有償対応となります。

  • ありがとうございます!
    そうですよね。
    もう少し自身で模索してみたいと思います!
    しらこさんありがとうございますm(__)m

うえの へ返信する コメントをキャンセル

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

目次