2026年9月11日

WordPressでカルーセル（スライダー）を実装する方法｜プラグインとCSSスクロールスナップ

テーマ・デザイン

カルーセル（スライダー）は、複数の画像やカードを横に並べ、ボタンやスワイプで切り替えて見せる部品です。WordPress の標準ブロックにはカルーセルのブロックが無いため（2026年10月時点）、プラグインを使うか、テーマにコードを追加して作ります。

方法	向いている場合
プラグイン	管理画面で画像を選んでスライドを作りたい。コードを触りたくない
CSS のスクロールスナップ＋短い JavaScript	依存ライブラリを増やさず、軽く作りたい。テーマを自分で管理している
Swiper・Splide などのライブラリ	ループ、自動再生、サムネイル連動などの機能が多く必要

ライブラリを使う方法は、WordPressのSwiper.jsでスライダーを実装する方法とWordPressにSplideでスライダーを追加する方法で説明しています。この記事では、プラグインと、ライブラリを使わない方法を扱います。

方法1：プラグインで作る

管理画面だけで作るなら、スライダー専用のプラグインを使います。2026年10月時点で公式ディレクトリで更新が続いているものの例です。

MetaSlider（「Slider, Gallery, and Carousel by MetaSlider」）：管理画面に「MetaSlider」メニューが追加され、画像を選んでスライドショーを作る。ブロック、ショートコード、ウィジェットで表示できる
Carousel Slider Block for Gutenberg：ブロックエディターにカルーセルのブロックを追加する。スライドの中に通常のブロックを置ける

MetaSlider の場合の流れは次のとおりです。

「プラグイン」→「新規プラグインを追加」で「MetaSlider」を検索し、インストールして有効化する
管理画面の「MetaSlider」でスライドショーを作り、画像を追加して保存する
投稿や固定ページの編集画面で MetaSlider のブロックを追加し、作ったスライドショーを選ぶ

プラグインは、スライダーを置いていないページでも CSS や JavaScript を読み込むことがあります。導入後は、表示速度を計測して変化を確かめます。

方法2：CSSのスクロールスナップで作る

ブラウザーには、横スクロールの位置を要素の端にそろえる「スクロールスナップ」（scroll-snap-type と scroll-snap-align）の機能があります。これを使うと、スワイプやトラックパッドでの横スクロールはブラウザーの標準動作のまま、1枚ずつ止まるカルーセルを作れます。前後のボタンだけを JavaScript で追加します。

HTMLを用意する

ブロックエディターの「カスタムHTML」ブロックに書くか、テーマのテンプレートに書きます。画像のURLと代替テキストは自分のものに置き換えます。

<div class="lsc-carousel" data-lsc-carousel>
  <ul class="lsc-carousel__track" tabindex="0" aria-label="施工事例のスライド">
    <li class="lsc-carousel__slide"><img src="https://example.com/wp-content/uploads/slide-1.jpg" width="1200" height="675" alt="施工事例1：外観"></li>
    <li class="lsc-carousel__slide"><img src="https://example.com/wp-content/uploads/slide-2.jpg" width="1200" height="675" alt="施工事例2：リビング" loading="lazy"></li>
    <li class="lsc-carousel__slide"><img src="https://example.com/wp-content/uploads/slide-3.jpg" width="1200" height="675" alt="施工事例3：キッチン" loading="lazy"></li>
  </ul>
  <button type="button" class="lsc-carousel__prev" aria-label="前のスライド">‹</button>
  <button type="button" class="lsc-carousel__next" aria-label="次のスライド">›</button>
</div>

画像に width と height を書くと、読み込み中にレイアウトがずれにくくなります
1枚目は最初に見えるので loading="lazy" を付けず、2枚目以降に付けます
tabindex="0" を付けると、キーボードでトラックにフォーカスを移し、矢印キーで横にスクロールできます

CSSを書く

子テーマの style.css か「追加CSS」に書きます。

.lsc-carousel {
  position: relative;
}
.lsc-carousel__track {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.lsc-carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.lsc-carousel__slide img {
  display: block;
  width: 100%;
  height: auto;
}
.lsc-carousel__prev,
.lsc-carousel__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}
.lsc-carousel__prev { left: 8px; }
.lsc-carousel__next { right: 8px; }

@media (prefers-reduced-motion: reduce) {
  .lsc-carousel__track { scroll-behavior: auto; }
}

1画面に複数枚を並べたい場合は、.lsc-carousel__slide の flex を次のように変えます（3枚並べ、間隔16pxが2か所の例）。

.lsc-carousel__slide {
  flex: 0 0 calc((100% - 32px) / 3);
}

前後のボタンをJavaScriptで動かす

テーマのフォルダーに js/lsc-carousel.js として保存します。

document.querySelectorAll('[data-lsc-carousel]').forEach(function (carousel) {
  var track = carousel.querySelector('.lsc-carousel__track');
  var prev = carousel.querySelector('.lsc-carousel__prev');
  var next = carousel.querySelector('.lsc-carousel__next');
  if (!track || !prev || !next) {
    return;
  }

  function step() {
    var slide = track.querySelector('.lsc-carousel__slide');
    var gap = parseFloat(getComputedStyle(track).columnGap) || 0;
    return slide ? slide.getBoundingClientRect().width + gap : track.clientWidth;
  }

  prev.addEventListener('click', function () {
    track.scrollBy({ left: -step(), behavior: 'smooth' });
  });
  next.addEventListener('click', function () {
    track.scrollBy({ left: step(), behavior: 'smooth' });
  });
});

wp_enqueue_script で読み込む

JavaScript は <script> タグを直接書かず、子テーマの functions.php から wp_enqueue_script() で読み込みます。カルーセルを置いたページだけで読み込むと、ほかのページの負担が増えません。次の例はフロントページだけで読み込みます。

<?php
function lsc_enqueue_carousel() {
	if ( ! is_front_page() ) {
		return;
	}

	$path = get_stylesheet_directory() . '/js/lsc-carousel.js';

	wp_enqueue_script(
		'lsc-carousel',
		get_stylesheet_directory_uri() . '/js/lsc-carousel.js',
		array(),
		file_exists( $path ) ? (string) filemtime( $path ) : null,
		array(
			'in_footer' => true,
			'strategy'  => 'defer',
		)
	);
}
add_action( 'wp_enqueue_scripts', 'lsc_enqueue_carousel' );

第5引数の配列で in_footer と strategy（defer または async）を指定する書き方は、WordPress 6.3 以降で使えます
バージョンにファイルの更新時刻を入れると、ファイルを書き換えたときにブラウザーのキャッシュが更新されます
親テーマに直接置く場合は、get_stylesheet_directory() を get_template_directory() に、get_stylesheet_directory_uri() を get_template_directory_uri() に変えます

読み込みの書き方の詳細はWordPressのwp_enqueue_scriptsでJSとCSSを読み込む方法を参照してください。

表示と動作を確かめる

パソコンでボタンを押して1枚ずつ切り替わること、スマートフォンでスワイプして1枚ずつ止まることを確かめる
キーボードの Tab キーでボタンにフォーカスが移り、Enter キーで操作できることを確かめる
ブラウザーの開発者ツールのコンソールにエラーが出ていないことを確かめる
キャッシュプラグインを使っている場合は、ページキャッシュを削除してから確かめる

注意点

最初に見える画像を遅延読み込みにしない：ページ上部のカルーセルの1枚目は、表示速度の指標（LCP）の対象になることが多い画像です。遅延読み込みの設定はWordPressで画像の遅延読み込み（Lazy Load）を設定する方法を参照してください
自動再生は控えめにする：自動で切り替わるカルーセルを作る場合は、利用者が止められるボタンを付けます。動きを減らす設定（prefers-reduced-motion）の利用者には自動再生しないようにします
重要な情報をカルーセルだけに置かない：2枚目以降は見られないことがあります。伝えたい内容は1枚目か、カルーセルの外にも書きます
画像を軽くする：表示幅に合ったサイズの画像を使い、WebP などの形式も検討します

まとめ

WordPress の標準ブロックにはカルーセルが無いので、プラグインかコードで作る
管理画面で作るなら MetaSlider などのプラグイン
軽く作るなら、CSS のスクロールスナップと前後ボタン用の短い JavaScript で足りる
JavaScript は wp_enqueue_script() で、使うページだけに読み込む
1枚目は遅延読み込みにせず、自動再生には停止手段を付ける