WordPressサイトで画像スライドをプラグインを使わずにブロックエディタで作る方法をご紹介します。

スライドのサンプル

次のようなスライドをプラグインを使わずにブロックエディタで作ります。

ベースデザインは、記事制作時点でWordPressにプリインストールされているテーマ「Twenty Twenty-Five」です。

スライドの作り方

WordPressのブロックエディタと追加CSS、PHP、Javascript（Swiper）で作ります。

ブロックエディタでフォーマットを作る

固定ページにカバーブロックを挿入します。

カバーブロックを選択して、右側の設定メニュー → 設定タブ → 高度な設定 → 追加CSSクラスにswiperとmy-slide-blockを半角スペース区切りで入力します。

続けて、スタイルタブ → 最小の高さに「0」と入力します。（「0」と入力すると、自動で最小値に変換されます。）

カバーブロックの下にあるカラーアイコンから、ベースカラーを選択します。

ベースカラーを選択するとカバーブロックのタイトル入力欄が表示されます。そのまま改行して、カバーブロック内に画像ブロックを挿入します。

画像ブロックに、スライドにしたい画像を設定します。

必要な分、画像ブロックを追加します。

ガバーブロックのタイトル入力欄を削除します。

ここまでで固定ページをプレビューすると次のようになります。

追加PHPを設定する

スライドのフォーマットができたらSwiperを設定します。

次のPHPを子テーマのfunctions.phpに記載します。

// HTMLでSwiperを読み込む
function install_my_swiper_slider() {
?>
    <!-- Swiperを読み込む -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<?php
}
add_action('wp_head', 'install_my_swiper_slider');

// JavaScriptでSwiperを設定する
function initialize_my_swiper_slider() {
?>
    <script>
        // カバーブロック
        const mySliderBlock = document.querySelector(".swiper");

        if (mySliderBlock !== null) {
            // カバーブロックのカラムにCSSクラスを追加
            const slidesWrap = mySliderBlock.querySelector(".wp-block-cover__inner-container");
            slidesWrap.classList.add("swiper-wrapper");

            // 画像ブロックにCSSクラスを追加
            const slides = slidesWrap.querySelectorAll(".wp-block-image")
            for (const slide of slides) {
                slide.classList.add("swiper-slide");
            }

            // スライダーにページネーションなどを追加
            const swiperNavigationClasses = [
                "swiper-button-next",
                "swiper-button-prev",
                "swiper-pagination"
            ];
            for (const className of swiperNavigationClasses) {
                swiperNavigation = document.createElement('div');
                swiperNavigation.classList.add(className);
                mySliderBlock.appendChild(swiperNavigation);
            }

            // スライダーを定義
            const swiperSlider = new Swiper(".swiper", {
                loop: true, // スライドを繰り返す
                effect: "fade", // スライドをフェードで切り替える
                autoplay: {
                    delay: 3000, // スライドを3秒ごとに自動で切り替える
                },
                navigation: {
                    nextEl: ".swiper-button-next", // 次のスライドへ切り替えるボタン
                    prevEl: ".swiper-button-prev", // 前のスライドへ切り替えるボタン
                },
                pagination: {
                    el: ".swiper-pagination", // ページネーション
                },
            });
        }
    </script>
<?php
}
add_action('wp_footer', 'initialize_my_swiper_slider');

• WordPress子テーマの作り方はこちら

追加CSSを設定する

スライド画像の微調整のため、次のCSSを子テーマのstyle.cssに記載します。

/* スライド画像 */
.swiper-slide {
    margin: 0; /* 余白 */
}

• WordPress子テーマの作り方はこちら

以上の設定を行い、固定ページをプレビューするとはじめにご紹介したようなスライドが表示されます。

他の作り方

JavaScriptには他にもスライダーライブラリがあります。

• Slick.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Splide.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Keen-Slider.jsで自動で切り替わるサムネイル付きスライドを実装する方法
• Tiny Slider2で自動で切り替わるサムネイル付きスライドを実装する方法

WordPressサイトの場合はプラグインでサムネイル付きスライドを表示することができます。

• Smart Slider3で自動で切り替わるサムネイル付きスライドを実装する方法
• Master Sliderで自動で切り替わるサムネイル付きスライドを実装する方法
• UltimateSliderで自動で切り替わるサムネイル付きスライドを実装する方法

まとめ

WordPressサイトで画像スライドをプラグインを使わずにブロックエディタで作る方法をご紹介しました。

カナメグローバルホールディングスではWebサイトの制作や保守を行っています。

WordPressサイトも対応していますので、ぜひお気軽にご相談ください。