SWELLで「Swiper」を利用する方法：スライド内容はブログパーツで簡単作成！

当サイトはアフィリエイト広告を利用しています。

SWELLでスライドを使うなら「Swiper」がおすすめです。

プラグインだとスライドの中身の作成が大変だったり、思うようにいかなかったりします。

また、SWELLでは「記事スライド」でSwiperが利用されているのですが、そのままでは使えません。

そこで、この記事ではSWELLで「Swiper」を使う方法を解説します。

この記事で分かること

  • Swiperを使うメリット
  • SWELLで「Swiper」を使えるようにする方法

SWELLでSwiperを使った時の動作イメージ

まずは、Swellで「Swiper」を利用した時の動作イメージを紹介します。

SWELLにSwiperを入れた場合の動作イメージ

Swiperを利用するメリット

利用するメリットを一言でいうと、「情報を省スペースで魅力的に見せる」です。

個人サイトであれば、利用しなくてもいいのですが、企業サイトを作成する時に便利。

  • 省スペースで多くの情報を伝えられる
  • サイトに動きを付けて魅力的に見せられる

本家にはいろいろな「スライドの見せ方」がのっているので、参考になります。

SWELLでSwiperを使うための必要なファイル

必要なファイルや作業手順は以下のとおりです。

必要なファイル

  • swiper-bundle.init.css（自分で作成）
  • swiper-bundle.init.js（自分で作成）
  • functions.php（子テーマのファイルを修正）

Swiper本体ファイル

Swiper本体ファイルは、CDNにある公式ファイルを利用するのが一番簡単です。

WordPressへ、javascriptやCSSをアップロードする必要がありません。

  • Swiper公式サイトから「Get Started」ボタンをクリック
  • 左メニューから「Use Swiper from CDN」を選択
  • 表示されたCSSとjavascriptのURLをメモ（functions.phpを修正する時に利用します）。

Swiper関連ファイル

Swiper本体だけでは起動できません。

必要な情報を別途「javascript」と「CSS」に書く必要があります。

  • swiper-bundle.init.js：Swiperの起動（左右ボタン、ページネーション、動きなどを設定）
  • swiper-bundle.init.css：SWELLのCSSキャンセル・オリジナルの見栄えを追加
    • カスタマイズの追加CSSを使う場合は不要

下記のサンプルは、一番よく使う、「前後に進むボタン」と「ページネーション」を追加したコードです。

「swiper-bundle.init.js」の中身はこちら。

//swiper-bundle.init.js

var swiper = new Swiper(".mySwiper", {
    slidesPerView: 1,
    spaceBetween: 30,
    loop: true,
    pagination: {
    el: ".swiper-pagination",
    clickable: true,
    },
    navigation: {
    nextEl: ".my-next",
    prevEl: ".my-prev",
    },
});

「swiper-bundle.init.css」には、「SWELLのCSSキャンセル」と「前後ボタンをスライドの中段左右に配置する指定CSS」を追加しています。

.swiper-button-next:after, .swiper-button-prev:after {
    all: unset;
}

.my-swiper { position: relative; }

.my-prev, .my-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 100px; height: 100px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.5);
  color: #fff; border: 0; border-radius: 9999px;
  cursor: pointer;
}

.my-prev { left: -80px; }
.my-next { right: -80px; }

.my-prev.swiper-button-disabled,
.my-next.swiper-button-disabled {
  opacity: .35; pointer-events: none;
}

.swiper {
    width: 100%;
    height: 500px;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper {
    margin-left: auto;
    margin-right: auto;
}

子テーマにあるfunctions.phpに以下のコードを加えます。

Swiper本体のCDNファイルと、自分で作成したjavascriptとCSSを読み込む指示です。

function enqueue_post_slider_assets() {

    $timestamp = date('YmdHis');

    // Swiper-bundle
    wp_enqueue_style( 'swiper-bundle-css', 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css', [], $timestamp );
    wp_enqueue_style( 'swiper-bundle-init-css', get_stylesheet_directory_uri() .'/js/swiper-bundle.init.css', [], $timestamp );
    wp_enqueue_script('swiper-bundle-js', 'https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js', array(), $timestamp, true);
    wp_enqueue_script('swiper-bundle-init-js', get_stylesheet_directory_uri() .'/js/swiper-bundle.init.js', array(), $timestamp, true);

}
add_action( 'wp_enqueue_scripts', 'enqueue_post_slider_assets' );

SWELLでSwiperを使うための設定方法

SWELLでSwiperを使うための手順は次のとおり。

作業手順

  • 自分で作成したjavascriptとCSSを子テーマフォルダにアップロード
  • functions.phpをアップロード
  • スライドの中身をSWELLの「ブログパーツ」で作成
  • 投稿や固定ページで「カスタムHTML」を利用してスライドHTMLを追加

自分で作成したjavascriptとCSSを子テーマフォルダにアップロード

自分で作成したjavascriptとCSSを子テーマフォルダにアップロードします。

アップロード先は、子テーマフォルダの下にjsフォルダを作成し、その中に入れています。

functions.phpをアップロード

修正したfunctions.phpを子テーマ側で上書き保存してください。

スライドの中身を作成

スライドの中身をSWELLの「ブログパーツ」を使って作成します。

「カスタムHTML」にそのまま書き込むこともできますが、画像を追加するだけでも「imgタグ」で書かないといけないので大変です。

ブログパーツを使った方が簡単に作成でき、コードも見やすくなるのでおすすめ。

カスタムHTMLでSwiperのHTMLを作成

最後にSwiperのHTMLを「カスタムHTML」で作成します。

スライドやボタンの中身は全て「ブログパーツ」のシートコードに置き換えます。

<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">[blog_parts id="223961"]</div>
    <div class="swiper-slide">[blog_parts id="224003"]</div>
    <div class="swiper-slide">[blog_parts id="223998"]</div>
    <div class="swiper-slide">[blog_parts id="223996"]</div>
  </div>
  <div class="swiper-pagination"></div>
</div>
<div class="my-prev" aria-label="前へ">[blog_parts id="224004"]</div>
<div class="my-next" aria-label="次へ">[blog_parts id="224005"]</div>

上記のサンプルで使っているブログパーツの中身はこちら。

  • id="223961"：説明リスト（DL）
  • id="224003"：画像
  • id="223998"：動画（mp4形式）
  • id="223996"：投稿リスト（タイトルのHTMLタグをdivに設定）
  • id="224004"：前へボタンに表示するテキスト「＜」
  • id="224005"：次へボタンに表示するテキスト「＞」

Swiperを使う時の質問

スライドをオリジナルデザインにしたい

オリジナルCSS（swiper-bundle.init.css）の編集が必須

例えば、「前へ次へボタン」を画像にしたい場合、CSSで指示します。

何も書かないとボタンの位置が左下にきてしまったり、デフォルトデザインが表示されたりするため、センター揃えで左右に配置するCSSが必要です。

前へ次へボタンが表示されない。

<div class="swiper mySwiper">～</div>の中に、前へ次へタグ（<div class="my-prev">など）を書くと表示できないみたいです。

<div class="swiper mySwiper">～</div>の外に書くと表示されました。

ほかのスライドデザインにしたい場合はどうすればいい？

公式サイトの指定を参考にするといいです。

①https://swiperjs.com/demosにアクセス。

②好きなデモの「Core」をクリック。

③Demo styleと書かれているCSSを全て「swiper-bundle.init.css」に書く（下記の画像はCSSの一部なので全て書いてください）。

④Swiperと書かれている部分を「カスタムHTML」に書く。

⑤Initialize Swiperの内容を「swiper-bundle.init.js」に書く。

⑥必要に応じて、javascriptやCSSを修正してください。

「ページネーション」や「前へ次へボタン」などのjavascriptやCSSを付け加えて、見た目を整えます。

スライドをもっと追加したい

カスタマイズHTMLの下記の部分を追加してください。

<div class="swiper-slide">[blog_parts id="xxxx"]</div>

まとめ

SWELLでSwiperを使う手順を簡単にまとめると以下のようになります。

  • swiper-bundle.init.cssを作成（カスタマイズの追加CSSを使うなら不要）
  • swiper-bundle.init.jsを作成
  • functions.phpを修正（Swiper本体のCDN読込と上記2つのJSとCSSの読込追加）
  • 作成したCSSとJSを子テーマフォルダにアップロード
  • functions.phpをアップロード
  • Swiperの中身をブログパーツで作成
  • 投稿や固定ページで「カスタムHTML」を利用してスライドHTMLを追加（スライド内容はブログパーツショートコードに変更）

企業サイト作成時に参考になれば幸いです。

-SWELL
-,