画像が切り替わるカルーセル・スライダーを設置する方法
login_user目次
WordPressサイトでカルーセル・スライダーを表示したいとき、プラグインに頼らなくてもPHP＋JavaScript＋CSSだけで実装できます。
投稿や固定ページにショートコードで呼び出せるようにしておけば、軽量かつ自由度の高いスライダーが作れます。
「カルーセル」とは 複数画像を順番に切り替えるUI全般をいいます。「スライダー」も同じ意味で使われることが多いです。
1 実装のポイント
- functions.phpにショートコードを登録
- JavaScriptでスライダーの動きを制御
- 汎用CSSを追加
2 functions.php にコードを追加
//-------------------------------------------
// カルーセルスライダー用ショートコード
//-------------------------------------------
function my_carousel_slider() {
ob_start();
?>
<div class="my-carousel">
//スライド画像のアドレスを入力
<div class="slide active"><img src="https://example.com/wp-content/uploads/2025/09/slide1.jpg" alt="スライド1"></div>
<div class="slide"><img src="https://example.com/wp-content/uploads/2025/09/slide2.jpg" alt="スライド2"></div>
<div class="slide"><img src="https://example.com/wp-content/uploads/2025/09/slide3.jpg" alt="スライド3"></div>
//スライドボタン（文字の矢印）のアドレスを入力
<button class="prev">←</button>
<button class="next">→</button>
</div>
//javascriptのアドレスを入力
<script src="/wp-content/themes/child-theme/js/my-carousel.js"></script>
//CSSのアドレスを入力
<link rel="stylesheet" href="/wp-content/themes/child-theme/style.css" />
<?php
return ob_get_clean();
}
add_shortcode('my_carousel', 'my_carousel_slider');
補足:
投稿や固定ページ内で ショートコード [my_carousel] と書くだけでスライダーが表示されます。
投稿や固定ページ内で ショートコード [my_carousel] と書くだけでスライダーが表示されます。
記事内で表示する場合：
[my_carousel]
3 javascript にコードを追加
3.1 クリックで自動的にスライド
ファイル名：my-carousel.js
保存先：wp-content/themes/child-theme/js/my-carousel.js
// クリックで自動的にスライド
document.addEventListener("DOMContentLoaded", function() {
const slides = document.querySelectorAll(".my-carousel .slide");
const prev = document.querySelector(".my-carousel .prev");
const next = document.querySelector(".my-carousel .next");
let index = 0;
let autoSlideInterval;
function showSlide(i) {
slides.forEach((slide, idx) => {
slide.classList.toggle("active", idx === i);
});
}
function nextSlide() {
index = (index + 1) % slides.length;
showSlide(index);
}
function prevSlide() {
index = (index - 1 + slides.length) % slides.length;
showSlide(index);
}
prev.addEventListener("click", function() {
prevSlide();
});
next.addEventListener("click", function() {
nextSlide();
});
// 自動スライド開始（5秒ごと）
autoSlideInterval = setInterval(nextSlide, 5000);
});
3.2 ディレクトリ構造
- child-theme/
- style.css
- functions.php
- footer.php
- header.php
- js/
- my-carousel.js
- images/
- logo.png
4 汎用CSS
/* -------------------------
* カルーセル・スライダー（レスポンシブ対応）
* ------------------------- */
.my-carousel {
position: relative; /* 前後ボタンや子要素を絶対位置で配置できるように */
width: 100%; /* 親幅に合わせる */
max-width: 800px; /* 最大幅800px */
margin: 0 auto; /* 中央寄せ */
overflow: hidden; /* はみ出したスライドを非表示 */
}
/* 各スライドを非表示に */
.my-carousel .slide {
display: none; /* 非アクティブスライドは非表示 */
}
/* アクティブなスライドだけ表示 */
.my-carousel .slide.active {
display: block; /* 現在表示中のスライド */
}
/* 画像をスライド幅に合わせる */
.my-carousel img {
width: 100%; /* 画面幅に合わせて拡大・縮小 */
height: auto; /* アスペクト比を維持 */
display: block; /* 下に隙間ができないように */
}
/* 前・次ボタンの基本スタイル */
.my-carousel button.prev,
.my-carousel button.next {
position: absolute; /* 親を基準に絶対位置 */
top: 50%; /* 縦中央 */
transform: translateY(-50%); /* 真ん中揃え */
background: rgba(0,0,0,0.5); /* 半透明黒背景 */
color: #fff; /* 文字色白 */
border: none; /* 枠線なし */
padding: 8px 12px; /* 内側余白 */
cursor: pointer; /* ホバーで指マーク */
z-index: 10; /* スライドの上に表示 */
}
/* 左右ボタンの位置調整 */
.my-carousel button.prev { left: 10px; } /* 左ボタン */
.my-carousel button.next { right: 10px; } /* 右ボタン */
/* スマホ向けにボタンサイズ調整 */
@media (max-width: 480px) {
.my-carousel button.prev,
.my-carousel button.next {
padding: 6px 10px; /* 内側余白を少し小さく */
font-size: 14px; /* 文字サイズを小さく */
}
}
5 完成イメージ
6 代用プラグイン
- Smart Slider 3
- MetaSlider
- Swiper（JSライブラリを直接利用）
7 まとめ
PHP＋JS＋CSSだけで、シンプル・自動・ボタン操作付きと複数のカルーセルスライダーを実装できました。
プラグイン不要なのでサイトのパフォーマンスにも優しく、自由なカスタマイズも可能です。
投稿や固定ページ内で [my_carousel] を貼るだけで表示できます。
