2026年6月1日

WordPressにSplideでスライダーを追加する方法｜テーマへの読み込みと投稿スライダーの作り方

プラグイン関連

Splide は、jQuery などに依存しない JavaScript のスライダー（カルーセル）ライブラリです。MIT ライセンスで、ファイルを読み込んで HTML に決まったクラスを付けるだけでスライダーになります。

この記事では、プラグインを使わずにテーマ（子テーマ）へ Splide を組み込み、新着投稿をスライダーで表示する手順を説明します。2026年10月時点の Splide の最新版は 4.1.4（2022年11月公開）で、この記事のコードもこの版を前提にしています。

作るもの

トップページに、アイキャッチ画像付きの新着投稿を最大6件並べるスライダー
パソコンでは3枚、タブレットでは2枚、スマートフォンでは1枚ずつ表示
一定時間ごとに自動で切り替わり、マウスを乗せると止まる

親テーマを直接編集すると、テーマの更新で変更が消えます。以下のファイルは子テーマに置いてください。子テーマの作り方は WordPressで子テーマ（Child Theme）を正しく作成する方法を参照してください。

ファイルの配置は次のとおりです。

wp-content/themes/your-child-theme/
├── functions.php
├── front-page.php              ← スライダーを表示するテンプレート（クラシックテーマ）
├── template-parts/
│   └── splide-posts.php        ← スライダーのHTML
└── assets/
    ├── splide/
    │   ├── splide.min.js
    │   └── splide.min.css
    └── js/
        └── splide-init.js      ← 初期化スクリプト

ステップ1: Splideのファイルを用意する

Splide の配布ファイルは、npm パッケージ @splidejs/splide の dist フォルダーに入っています。使うのは dist/js/splide.min.js と dist/css/splide.min.css の2つです。

npm を使える環境なら、作業用のフォルダーでインストールしてから子テーマにコピーします。

# 作業用フォルダーでインストールする（バージョンを固定する）
npm install @splidejs/splide@4.1.4

# 配布ファイルを子テーマにコピーする
mkdir -p wp-content/themes/your-child-theme/assets/splide
cp node_modules/@splidejs/splide/dist/js/splide.min.js wp-content/themes/your-child-theme/assets/splide/
cp node_modules/@splidejs/splide/dist/css/splide.min.css wp-content/themes/your-child-theme/assets/splide/

パッケージ名は @splidejs/splide です。npm install splide でインストールされる splide は Splide とは別のパッケージ（中身のないセキュリティ用の予約パッケージ）なので注意してください。

npm を使わない場合は、jsDelivr の配信 URL からファイルを保存しても構いません。本番ではバージョンを固定した URL を使います。

https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css

dist/css には、矢印やページ送りの見た目を含まない splide-core.min.css もあります。デザインをすべて自分で作る場合はこちらを使います。

ステップ2: functions.phpでスクリプトとCSSを読み込む

WordPress では、JavaScript と CSS を <script> タグで直接書かず、wp_enqueue_scripts フックで登録・読み込みします。子テーマの functions.php に次のコードを追加します。

<?php
add_action( 'wp_enqueue_scripts', function () {
	$uri = get_stylesheet_directory_uri();

	// Splide 本体を登録する
	wp_register_style( 'splide', $uri . '/assets/splide/splide.min.css', array(), '4.1.4' );
	wp_register_script( 'splide', $uri . '/assets/splide/splide.min.js', array(), '4.1.4', array( 'in_footer' => true ) );

	// 初期化スクリプト（Splide 本体の後に読み込む）
	wp_register_script( 'mytheme-splide-init', $uri . '/assets/js/splide-init.js', array( 'splide' ), '1.0.0', array( 'in_footer' => true ) );

	// スライダーを置くトップページでだけ読み込む
	if ( is_front_page() ) {
		wp_enqueue_style( 'splide' );
		wp_enqueue_script( 'mytheme-splide-init' );
	}
} );

get_stylesheet_directory_uri() は子テーマのフォルダーの URL を返します（親テーマのフォルダーは get_template_directory_uri()）
初期化スクリプトの依存関係に splide を指定しているので、mytheme-splide-init を読み込むだけで Splide 本体も先に読み込まれます
wp_register_script() の5番目の引数を配列にして in_footer を指定する書き方は WordPress 6.3 以降のものです。それより前の版では true を渡します

スクリプトの読み込みの基本は WordPressのwp_enqueue_scriptsでJSとCSSを読み込む方法でも説明しています。

ステップ3: スライダーのHTMLを作る

Splide は、次の構造の HTML をスライダーにします。

一番外側の要素に splide クラス
その中に splide__track → splide__list → splide__slide の順に入れ子にする

一番外側を section にする場合は、スクリーンリーダー向けに aria-label でスライダーの名前を付けます（Splide の公式ガイドの推奨）。

新着投稿を並べるテンプレートパーツを template-parts/splide-posts.php として作ります。

<?php
// アイキャッチ画像がある新着投稿を最大6件取得する
$slider_query = new WP_Query(
	array(
		'post_type'           => 'post',
		'posts_per_page'      => 6,
		'ignore_sticky_posts' => true,
		'no_found_rows'       => true,
		'meta_key'            => '_thumbnail_id',
	)
);

if ( ! $slider_query->have_posts() ) {
	return;
}
?>
<section class="splide js-post-slider" aria-label="新着記事">
	<div class="splide__track">
		<ul class="splide__list">
			<?php while ( $slider_query->have_posts() ) : $slider_query->the_post(); ?>
				<li class="splide__slide">
					<a href="<?php the_permalink(); ?>">
						<?php the_post_thumbnail( 'medium_large' ); ?>
						<span class="slide-title"><?php the_title(); ?></span>
					</a>
				</li>
			<?php endwhile; ?>
		</ul>
	</div>
</section>
<?php
wp_reset_postdata();

meta_key に _thumbnail_id を指定すると、アイキャッチ画像が設定された投稿だけが取得されます
no_found_rows を true にすると、ページ送り用の件数計算を省くため、取得が軽くなります
メインループの外で WP_Query を使ったので、最後に wp_reset_postdata() で投稿データを元に戻します

クラシックテーマでは、表示したい場所（この例では子テーマの front-page.php）に次の1行を書きます。

<?php get_template_part( 'template-parts/splide-posts' ); ?>

WP_Query の条件の付け方は WordPressのWP_Queryで記事を取得する方法を参照してください。

ステップ4: 初期化スクリプトでスライダーを動かす

assets/js/splide-init.js を作り、Splide を起動します。new Splide( 要素, オプション ).mount() でスライダーが動き始めます。

document.addEventListener( 'DOMContentLoaded', function () {
	document.querySelectorAll( '.js-post-slider' ).forEach( function ( el ) {
		new Splide( el, {
			type: 'loop',        // 最後のスライドの次に最初へ戻る（ループ）
			perPage: 3,          // 一度に表示する枚数
			perMove: 1,          // 1回の操作で動かす枚数
			gap: '1.5rem',       // スライドの間隔
			speed: 500,          // 切り替えにかける時間（ミリ秒）
			autoplay: true,      // 自動で切り替える
			interval: 5000,      // 自動切り替えの間隔（ミリ秒）
			pauseOnHover: true,  // マウスを乗せている間は止める
			breakpoints: {
				1024: { perPage: 2 },
				640: { perPage: 1, gap: '1rem' },
			},
		} ).mount();
	} );
} );

breakpoints は、初期設定（mediaQuery: 'max'）では「画面幅がその値以下のとき」に適用されます。この例では、幅1024px以下で2枚、640px以下で1枚になります。

画像の大きさをそろえるには、子テーマの style.css などに次のような CSS を追加します。

.js-post-slider img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.js-post-slider .slide-title {
	display: block;
	margin-top: 0.5rem;
}

よく使うオプション

オプション	初期値	内容
`type`	`'slide'`	`'slide'`（通常）、`'loop'`（ループ）、`'fade'`（フェード。1枚ずつ表示）
`perPage`	`1`	一度に表示する枚数
`perMove`	なし	1回の操作で動かす枚数。指定しないと `perPage` の枚数ずつ動く
`gap`	なし	スライドの間隔（`'1rem'` や数値のピクセル）
`speed`	`400`	切り替えにかける時間（ミリ秒）
`rewind`	`false`	`'slide'` のとき、最後から最初へ巻き戻せるようにする
`autoplay`	`false`	自動で切り替える
`interval`	`5000`	自動切り替えの間隔（ミリ秒）
`pauseOnHover`	`true`	マウスを乗せている間、自動切り替えを止める
`arrows`	`true`	前後の矢印を表示する
`pagination`	`true`	ページ送りのドットを表示する
`lazyLoad`	`false`	画像の遅延読み込み（`'nearby'` または `'sequential'`）
`breakpoints`	なし	画面幅ごとにオプションを変える

一覧は Splide 公式サイトの Options のページにあります。旧版の記事にある perPageMove のようなオプションは存在しないので、名前は公式の一覧で確かめてください。

矢印などの読み上げを日本語にする

矢印やページ送りのボタンには、スクリーンリーダー向けの英語のラベル（例: Next slide）が付きます。日本語にしたい場合は i18n オプションで置き換えます。

new Splide( el, {
	i18n: {
		prev: '前のスライド',
		next: '次のスライド',
		first: '最初のスライドへ',
		last: '最後のスライドへ',
		slideX: '%s枚目のスライドへ',
		pageX: '%sページ目へ',
		play: '自動再生を開始',
		pause: '自動再生を停止',
	},
} ).mount();

ブロックテーマで使う場合

Twenty Twenty-Five のようなブロックテーマには front-page.php などの PHP テンプレートがないため、ステップ3の get_template_part() を書く場所がありません。その場合は、テンプレートパーツをショートコードとして登録し、サイトエディターの「ショートコード」ブロックから呼び出す方法があります。ステップ2のコードの登録部分（wp_register_style() と wp_register_script()）はそのまま使います。

<?php
function mytheme_post_slider_shortcode() {
	// ショートコードが使われたときだけ読み込む
	wp_enqueue_style( 'splide' );
	wp_enqueue_script( 'mytheme-splide-init' );

	ob_start();
	get_template_part( 'template-parts/splide-posts' );
	return ob_get_clean();
}
add_shortcode( 'post_slider', 'mytheme_post_slider_shortcode' );

ショートコードブロックには post_slider を角かっこで囲んだものを入力します。この方法では、CSS がページの末尾で読み込まれるため、表示の一瞬だけスライダーの体裁が整っていない状態が見えることがあります。気になる場合は、ステップ2の is_front_page() の条件で CSS を先に読み込んでおきます。

うまく動かないとき

スライドが縦に並んだままになる：Splide の JavaScript が読み込まれていないか、初期化でエラーが出ています。ブラウザーの開発者ツールの「コンソール」で Splide is not defined などのエラーを確認し、「ネットワーク」で splide.min.js が 404 になっていないか確かめます
矢印やドットの見た目が崩れる：splide.min.css が読み込まれていないか、テーマの CSS（ul や button の装飾）と競合しています。splide-core.min.css を使っている場合、矢印などの装飾は自分で用意する必要があります
ループで同じスライドが何度も出る：type: 'loop' はスライドを複製して表示します。投稿の件数が perPage より少ないと複製が目立つので、件数を増やすか type: 'slide' に変えます
トップページ以外に置いたら動かない：ステップ2の is_front_page() の条件で、ほかのページでは読み込まれていません。条件を表示するページに合わせて変えます

まとめ

Splide の npm パッケージ名は @splidejs/splide。dist の splide.min.js と splide.min.css を子テーマに置く
wp_enqueue_scripts で読み込み、初期化スクリプトの依存関係に splide を指定する
splide → splide__track → splide__list → splide__slide の構造で HTML を出力する
new Splide( 要素, オプション ).mount() で起動し、perPage や breakpoints で表示枚数を調整する