【WordPress】スライドショーをプラグインなしで実装する方法

function enqueue_swiper_scripts() {
    // SwiperのCSSファイルを読み込む
    wp_enqueue_style('swiper-css', 'https://unpkg.com/swiper/swiper-bundle.min.css');
    // SwiperのJavaScriptファイルを読み込む
    wp_enqueue_script('swiper-js', 'https://unpkg.com/swiper/swiper-bundle.min.js', array(), false, true);
}
add_action('wp_enqueue_scripts', 'enqueue_swiper_scripts');

function initialize_swiper() {
    ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var swiper = new Swiper('.swiper-container', {
                slidesPerView: 1,
                spaceBetween: 10,
                loop: true,
                autoplay: {
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        });
    </script>
    <?php
}
add_action('wp_footer', 'initialize_swiper');

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        <!-- 追加のスライド -->
    </div>
    <!-- ページネーション（省略可能） -->
    <div class="swiper-pagination"></div>
    <!-- ナビゲーションボタン（省略可能） -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="path/to/image1.jpg" alt="Image 1 Description">
        </div>
        <div class="swiper-slide">
            <img src="path/to/image2.jpg" alt="Image 2 Description">
        </div>
        <div class="swiper-slide">
            <img src="path/to/image3.jpg" alt="Image 3 Description">
        </div>
        <!-- 追加のスライド -->
    </div>
    <!-- ページネーション（省略可能） -->
    <div class="swiper-pagination"></div>
    <!-- ナビゲーションボタン（省略可能） -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<div class="swiper-slide">
    <img src="https://example.com/image1.jpg" alt="美しい風景の画像1">
</div>
<div class="swiper-slide">
    <img src="https://example.com/image2.jpg" alt="美しい風景の画像2">
</div>
<div class="swiper-slide">
    <img src="https://example.com/image3.jpg" alt="美しい風景の画像3">
</div>

/* スライダーのコンテナのオーバーフロー対策 */
.swiper-container {
    width: 100%;
    max-width: 100%; /* コンテナの最大幅を100%に設定 */
    height: 400px; /* 必要に応じて高さを調整 */
    overflow: hidden; /* オーバーフローを隠す */
    box-sizing: border-box; /* ボックスのサイズ計算方法を変更 */
}

/* スライダーのスライド */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    background: #000; /* スライドの背景色 */
    height: 100%; /* スライドの高さをコンテナに合わせる */
}

/* ページネーション */
.swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    bottom: 10px;
    left: 0;
    width: 100%;
}

/* ナビゲーションボタン */
.swiper-button-next,
.swiper-button-prev {
    color: #fff;
}

/* スライド内のテキストスタイル */
.swiper-slide h2 {
    font-size: 24px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.swiper-slide p {
    font-size: 16px;
    color: #ddd;
}

/* スライド内の画像スタイル */
.swiper-slide img {
    max-width: 100%;
    height: auto;
    border-radius: 10px; /* 画像の角を丸くする例 */
}

/* スライダーの親要素のスタイル */
.slider-wrapper {
    width: 100%; /* 親要素の幅を100%に設定 */
    padding: 0; /* 不要なパディングを除去 */
    margin: 0 auto; /* 中央揃えの場合 */
    box-sizing: border-box; /* ボックスのサイズ計算方法を変更 */
}

/* レスポンシブデザインのためのメディアクエリ */
@media (max-width: 768px) {
    .swiper-container {
        height: 300px; /* モバイル向けの高さ調整 */
    }

    .swiper-slide {
        font-size: 16px; /* モバイル向けのフォントサイズ調整 */
    }
}