2026年5月20日

WordPressでSwiper.jsを使ってスライダーを作る方法

テーマ・デザイン

はじめに

Swiper.jsはモバイル対応の高機能スライダーライブラリです。WordPressではCDNまたはnpmからSwiper.jsを読み込み、wp_enqueue_script で管理することでテーマに統合できます。

症状・原因

WordPressにスワイプ対応のスライダーを追加したい
ヒーローエリアのカルーセルを実装したい
商品・実績・メンバー紹介をスライドで見せたい
Swiper.jsをWordPressのキューイングシステムで管理したい

解決手順

ステップ1：Swiper.jsをCDNから読み込む

// functions.php
add_action('wp_enqueue_scripts', function(): void {
    // Swiper CSS
    wp_enqueue_style(
        'swiper',
        'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css',
        [],
        '11.0.0'
    );

    // Swiper JS
    wp_enqueue_script(
        'swiper',
        'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js',
        [],
        '11.0.0',
        true
    );

    // 初期化スクリプト（swiperに依存）
    wp_enqueue_script(
        'my-slider',
        get_template_directory_uri() . '/js/slider.js',
        ['swiper'],
        filemtime(get_template_directory() . '/js/slider.js'),
        true
    );
});

ステップ2：HTMLのマークアップ

<!-- テンプレートに追加 -->
<div class="swiper hero-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="slide1.jpg" alt="スライド1">
            <div class="slide-caption"><h2>キャッチコピー1</h2></div>
        </div>
        <div class="swiper-slide">
            <img src="slide2.jpg" alt="スライド2">
            <div class="slide-caption"><h2>キャッチコピー2</h2></div>
        </div>
        <div class="swiper-slide">
            <img src="slide3.jpg" alt="スライド3">
        </div>
    </div>
    <!-- ナビゲーション -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <!-- ページネーション -->
    <div class="swiper-pagination"></div>
</div>

ステップ3：Swiperの初期化

// js/slider.js
document.addEventListener('DOMContentLoaded', function() {

    // ヒーロースライダー（フェード + オートプレイ）
    new Swiper('.hero-slider', {
        loop:       true,
        effect:     'fade',
        speed:      800,
        autoplay: {
            delay:                3000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el:        '.swiper-pagination',
            clickable: true,
        },
        a11y: {
            prevSlideMessage: '前のスライド',
            nextSlideMessage: '次のスライド',
        },
    });

    // カード型カルーセル（レスポンシブ）
    new Swiper('.card-slider', {
        loop:        true,
        spaceBetween: 24,
        grabCursor:  true,
        breakpoints: {
            0:   { slidesPerView: 1 },
            640: { slidesPerView: 2 },
            960: { slidesPerView: 3 },
        },
        pagination: {
            el:        '.swiper-pagination',
            clickable: true,
        },
    });
});

ステップ4：PHPでスライドを動的に生成（カスタムフィールド）

// テンプレートファイル
<?php
$slides = get_field('hero_slides'); // ACFリピーターフィールド
if ($slides):
?>
<div class="swiper hero-slider">
    <div class="swiper-wrapper">
    <?php foreach ($slides as $slide): ?>
        <div class="swiper-slide">
            <?php if (!empty($slide['image'])): ?>
                <img src="<?= esc_url($slide['image']['url']) ?>"
                     alt="<?= esc_attr($slide['image']['alt']) ?>">
            <?php endif; ?>
            <?php if (!empty($slide['caption'])): ?>
                <p class="slide-caption"><?= esc_html($slide['caption']) ?></p>
            <?php endif; ?>
        </div>
    <?php endforeach; ?>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-pagination"></div>
</div>
<?php endif; ?>

注意事項

Swiper.jsをCDNから読み込む場合、外部接続が発生します。プライバシー・速度を重視する場合は /wp-content/themes/my-theme/js/ にコピーしてローカルから読み込んでください
loop: true と slidesPerView: 'auto' の組み合わせは動作が不安定になる場合があります。loop: true を使う場合は slidesPerView に数値を指定してください
autoplay を設定する場合は、ユーザーがスライドを操作したときに自動再生が停止するよう pauseOnMouseEnter: true の追加を検討してください

まとめ

Swiper.jsは wp_enqueue_script('swiper', CDN_URL, [], version, true) で読み込み、new Swiper('.hero-slider', { loop, effect, autoplay, navigation, pagination }) で初期化します。レスポンシブは breakpoints オブジェクトで各ブレークポイントの slidesPerView を指定します。

Post Views: 15