2026年6月1日

WordPressのSplide（軽量スライダー）を使う方法

プラグイン関連

はじめに

WordPressで魅力的なスライダーを簡単に作成したい場合は、Splideという軽量なスライダーが非常に役立ちます。この記事では、Splideのインストール方法から基本設定までを詳しく解説します。

症状・背景

このテーマが必要になる主な場面:

<場面1>: ホームページに最新情報や特集記事を分かりやすく表示したい。
<場面2>: カスタム投稿タイプのリストをスライダー形式で表示する必要がある。
<場面3>: 多数の画像を効果的に並べて表示するために、レスポンシブなスライダーが必要。
<場面4>: 現在利用しているスライダープラグインが重く、ページロード時間が気になる。

手順・設定方法

ステップ1: Splideをインストールする

# WordPressプロジェクトディレクトリに移動します。
cd /path/to/wordpress-project

# npmでSplideの最新バージョンをインストールします。
npm install splide --save

ステップ2: SplideをWordPressテーマに追加する

# テーマディレクトリ内のfunctions.phpファイルを開きます。
nano wp-content/themes/your-theme/functions.php

# functions.phpに以下のコードを追加してSplideを読み込みます。
wp_enqueue_script( 'splide', get_template_directory_uri() . '/js/splide.min.js', array(), null, true );

ステップ3: Splideの設定と初期化

# テーマディレクトリ内のfunctions.phpファイルを開きます。
nano wp-content/themes/your-theme/functions.php

# functions.phpに以下のコードを追加してSplideのオプションを設定し、スライダーを初期化します。
function initialize_splide() {
    $splide_options = array(
        'type'     => 'loop',
        'perPage'  => 3,
        'perPageMove' => 1,
        'speed'   => 500,
        'gap'     => '2rem'
    );
    
    wp_enqueue_script( 'splide-init', get_template_directory_uri() . '/js/splide-init.js', array('jquery'), null, true );

    // スクリプトを生成して追加
    $script = '<script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var splide = new Splide("#splide-slide").mount();
        });
    </script>';
    
    wp_add_inline_script( 'splide-init', $script );
}

add_action('wp_enqueue_scripts', 'initialize_splide');

ステップ4: テンプレートファイルにスライダーを追加

# フロントエンドで表示するスライダーのHTMLとJavaScriptをテーマディレクトリ内に追加します。
nano wp-content/themes/your-theme/single.php

<!-- HTML部分 -->
<div id="splide-slide" class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <?php
            // ループ内で投稿を表示
            while ( have_posts() ) : the_post();
                ?>
                <li class="splide__slide">
                    <!-- 投稿内容のHTML -->
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo get_the_post_thumbnail_url(get_the_ID()); ?>" alt="">
                        <?php the_title('<h2>', '</h2>'); ?>
                    </a>
                </li>
            <?php endwhile; ?>
        </ul>
    </div>
</div>

注意事項

<実践的な注意点1>: Splideを使用する前に、必ず最新のドキュメントを確認し、バージョンの相違による不具合がないかチェックしてください。
<実践的な注意点2>: スライダー内のコンテンツはレスポンシブに対応していることを確認しましょう。デバイスによって表示が異なる場合があるためです。
<セキュリティ上の注意>: JavaScriptを直接テンプレートファイルに埋め込む際は、XSS攻撃の可能性がないか常にチェックを行うことが重要です。
<パフォーマンス/運用上の注意>: スライダーを複数設置する場合や多数のコンテンツを表示する場合は、ページの読み込み速度が重くなる可能性があるため、適切な最適化を行いましょう。

まとめ

1. インストール: npmを使用してSplideをインストールします。

2. 読み込み: テーマディレクトリ内のfunctions.phpファイルにスクリプトを追加し、Splideを読み込みます。

3. 初期化: functions.phpにオプションを設定してスライダーを初期化します。

4. テンプレートへの追加: 単一投稿ページや他のテンプレートファイルでスライダーを表示するために必要なHTMLとJavaScriptを追加します。

5. レスポンシブデザイン: スライダーが全てのデバイス上で適切に動作するように、CSSやJavaScriptを使用して調整を行います。

Post Views: 12