[wp]投稿のギャラリーをswiper.jsでスライド化する

いちいちカスタムフィールド入れてもだるいからね。

全体の流れ
やっていく

全体の流れ

本文にギャラリーブロックで複数の画像を配置する
ギャラリーブロック（外側）にclassを付与する
jsでswiper.jsに合った構成に加工してスライド化する

やっていく

まずはwp側の準備。

固定ページなり投稿なりカスタム投稿なり、任意のところでswiperのjsとcssを読み込ませる。

swiperを発火させるためのコードとか、今回の内容とかをまとめたjsファイルをページ最下部に読み込ませる（headだと動かない）。

新規投稿でギャラリーを作って画像を複数配置する。

ギャラリー（外枠）にclassを付与する（.post_swiperとする）。

で、swiper用のjsの中身を作っていく。

まずはギャラリーブロックの構造の理解。
実際の画像により違いはあるだろうけど大体こんな感じ。

<figure class="wp-block-gallery has-nested-images columns-default is-cropped post_swiper wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex">
    <figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="800" height="400" data-id="***" src="sample01.jpg" alt="" class="wp-image-***" srcset="sample01.jpg 800w, sample01-300x150.jpg 300w, sample01-768x384.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"></figure>
    <figure class="wp-block-image size-large"><img decoding="async" width="800" height="400" data-id="***" src="sample02.jpg" alt="" class="wp-image-***" srcset="sample02.jpg 800w, sample02-300x150.jpg 300w, sample02-768x384.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"></figure>
    <figure class="wp-block-image size-large"><img decoding="async" width="800" height="400" data-id="***" src="sample03.jpg" alt="" class="wp-image-***" srcset="sample03.jpg 800w, sample03-300x150.jpg 300w, sample03-768x384.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"></figure>
    <figure class="wp-block-image size-large"><img decoding="async" width="800" height="400" data-id="***" src="sample04.jpg" alt="" class="wp-image-***" srcset="sample04.jpg 800w, sample04-300x150.jpg 300w, sample04-768x384.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"></figure>
</figure>

これをswiperに合った形に改造して、swiperを発火させるまでもっていく。
classだけじゃなくてhtmlも追加する必要があるのがめんどい。

swiperが非jQueryなのでバニラjsで。

document.addEventListener('DOMContentLoaded', function () {
    //ターゲット宣言
    const galleries = document.querySelectorAll('.post_swiper');

    galleries.forEach((gallery) => {
        // Swiperのベースクラスを追加
        gallery.classList.add('swiper');

        // .post_swiper 内のすべての <figure> を取得
        const figures = gallery.querySelectorAll('figure');

        // .swiper-wrapper を作成
        const wrapper = document.createElement('div');
        wrapper.className = 'swiper-wrapper';

        // figure に .swiper-slide を付与し、wrapper に移動
        figures.forEach(figure => {
            figure.classList.add('swiper-slide');
            wrapper.appendChild(figure);
        });

        // .post_swiper の中身をすべて削除し、swiper構成を再構築
        gallery.innerHTML = '';
        gallery.appendChild(wrapper);
/*
        // ページネーションとナビゲーション要素を追加
        const pagination = document.createElement('div');
        pagination.className = 'swiper-pagination';
        gallery.appendChild(pagination);

        const prev = document.createElement('div');
        prev.className = 'swiper-button-prev';
        gallery.appendChild(prev);

        const next = document.createElement('div');
        next.className = 'swiper-button-next';
        gallery.appendChild(next);
*/
        // Swiper初期化
        new Swiper(gallery, {
            loop: true,
            slidesPerView: 1,
            spaceBetween: 10,
/*
            pagination: {
                el: pagination,
                clickable: true
            },
            navigation: {
                nextEl: next,
                prevEl: prev
            }
*/
        });
    });
});

以上。
もっとちゃんとしたいなら、一番外のfigureはdivに変えたほうがいいかも。

あとはデザインに合わせてcssを調整する。