2026年8月24日

WordPressのSwiper.jsでスライダーを実装する方法

プラグイン関連

はじめに

Swiper.jsは、モダンなインターフェースを持つスライダーやカルーセルを簡単に作成できるJavaScriptライブラリです。WordPressサイトで最新の視覚効果を提供するためには、このライブラリを利用するのがおすすめです。本記事では、Swiper.jsをインストールし、カスタマイズしてWordPressサイトに統合する方法を紹介します。

症状・背景

新しいプロダクトページの作成: 新製品やサービスを強調表示するために、滑らかなスライダーが必要な場合。
ポートフォリオの更新: ポートフォリオページで最新のプロジェクトを展示するためのスライダーが欲しい時。
バナー広告の管理: トップページのバナー広告を順番に表示したい場合。
ビジュアルなウェルカムメッセージ: 新規訪問者に対して、サイトの魅力的なポイントを紹介するためのスライダー。

手順・設定方法

ステップ1: Swiper.jsと依存関係をインストール

# WordPressテーマ内のassetsディレクトリに移動します。
cd wp-content/themes/your-theme/assets/

# npmを使用してSwiper.jsと必要な依存ライブラリをインストールします。
npm install swiper

# 既存のstyles.cssとscripts.jsファイルを編集または作成します。

ステップ2: Swiper.jsのCSSとJSを読み込む

# styles.cssにSwiperのスタイルシートを追加します。
@import url('node_modules/swiper/css/swiper.min.css');

# scripts.jsにswiper.min.jsとその依存関係であるpopper.jsを読み込みます。
import Swiper from 'swiper';

// グローバル変数としてSwiperオブジェクトを定義
window.Swiper = require('swiper');

ステップ3: HTMLテンプレートの準備とJavaScriptのインスタンス化

# テンプレートファイル（例えばsingle.php）に以下のHTML構造を作成します。
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide1</div>
    <div class="swiper-slide">Slide2</div>
    <div class="swiper-slide">Slide3</div>
  </div>

  <!-- オプションのナビゲーションボタン -->
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  
  <!-- オプションのページネーションインジケーター -->
  <div class="swiper-pagination"></div>
</div>

# scripts.jsでSwiperオブジェクトを初期化します。
new window.Swiper('.swiper-container', {
    // 必須のパラメータ
    direction: 'horizontal',
    
    // オプション
    loop: true,
    effect: 'fade',
    autoplay: {
        delay: 3000,
    },
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});

ステップ4: カスタムCSSとJavaScriptの追加

# styles.cssをカスタマイズしてSwiperコンポーネントに独自のスタイルを適用します。
.swiper-container {
  width: 100%;
  height: auto;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* スライド間の間隔 */
  padding-top: 20px;
  padding-bottom: 20px;
}

/* ページネーションスタイル */
.swiper-pagination-bullet {
  width: 15px !important;
  height: 15px !important;
}

注意事項

スライダーの表示位置: スライダーがページ全体に広がる場合、height: auto;を設定して適切な高さを自動的に調整させること。
レスポンシブデザイン: デバイスサイズごとに異なるスライダー動作を適用するには、メディアクエリを使用してスタイルをカスタマイズすること。
セキュリティ上の注意: Swiper.jsの使用は通常安全ですが、外部からのJavaScriptコードがサイトに影響を与えないよう、適切なサニタイジングとXSS対策を実施すること。
パフォーマンス/運用上の注意: スライダーはCSSアニメーションやJavaScriptによる処理を必要とするため、多くの要素を使用するとページの読み込み速度が遅くなる可能性がある。最適なパフォーマンスを得るには、必要な機能だけを選択して使用すること。

まとめ

1. インストール: Swiper.jsとその依存関係をnpmでインストールする。

2. CSS/JSの読み込み: スタイルシートとスクリプトをWordPressテーマに追加する。

3. HTML構造の作成: HTMLテンプレートを作り、Swiperコンテナとスライドを設定する。

4. JavaScriptインスタンス化: Swiperオブジェクトを初期化し、必要なパラメータを設定する。

5. カスタマイズ: カスタムCSSを使用してスライダーに独自のスタイルを追加する。

Post Views: 10