WordPress独自テーマのギャラリーブロックに、自動でSwiperスライドを設定する

<?php

/**
 * ギャラリーブロックのHTMLをSwiperの構造に書き換えるフィルター
 *
 * @param string $block_content ブロックのHTML出力内容
 * @param array $block ブロックの情報
 * @return string 変更後のHTML出力内容
 */
function customize_gallery_block_to_swiper($block_content, $block)
{
	// 対象がコアのギャラリーブロックかチェック
	if ('core/gallery' === $block['blockName']) {

		// 1. コンテナ要素 (.wp-block-gallery) に .swiper と識別クラスを追加
		$block_content = str_replace(
			'class="wp-block-gallery',
			'class="wp-block-gallery js-swiper--single-gallery swiper',
			$block_content
		);

		// 2. 各スライド項目に .swiper-slide クラスを追加
		$block_content = str_replace(
			'class="blocks-gallery-item"',
			'class="swiper-slide blocks-gallery-item"',
			$block_content
		);

		// 補足：単一画像の場合の対応
		$block_content = str_replace(
			'<figure class="wp-block-image',
			'<figure class="swiper-slide wp-block-image',
			$block_content
		);

		// 3. ラッパー要素 (ul または figure のコンテナ) に .swiper-wrapper を追加
		// ul.blocks-gallery-grid の場合
		$block_content = str_replace(
			'class="blocks-gallery-grid"',
			'class="blocks-gallery-grid swiper-wrapper"',
			$block_content
		);

		// 4. ナビゲーションボタンを追加
		// 閉じタグ（</figure> または </ul>の親要素）の直前に挿入
		$nav_buttons = '
            <div class="swiper-button-prev swiper-button-prev--single-gallery"></div>
            <div class="swiper-button-next swiper-button-next--single-gallery"></div>
        ';

		// 最後の </figure> または </div> の直前に挿入
		$block_content = preg_replace(
			'/(<\/figure>|<\/div>)(\s*)$/',
			$nav_buttons . '$1$2',
			$block_content,
			1
		);
	}

	return $block_content;
}
add_filter('render_block', 'customize_gallery_block_to_swiper', 10, 2);

// DOMの準備ができたら実行
document.addEventListener("DOMContentLoaded", () => {
  // ギャラリーブロックの設定(singleページ)
  const galleryElement = document.querySelector(".js-swiper--single-gallery");

  if (galleryElement) {
    // console.log("Gallery element found");

    // .swiper クラスを追加（なければ）
    if (!galleryElement.classList.contains("swiper")) {
      galleryElement.classList.add("swiper");
    }

    // 新しいギャラリーブロックの構造に対応
    // 直下の figure 要素を探す
    const childFigures = Array.from(galleryElement.children).filter(
      (child) =>
        child.tagName === "FIGURE" && child.classList.contains("wp-block-image")
    );

    if (childFigures.length > 0) {
      //   console.log(`Found ${childFigures.length} images in gallery`);

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

      // 各画像要素をwrapperに移動
      childFigures.forEach((figure) => {
        // すでに .swiper-slide がなければ追加
        if (!figure.classList.contains("swiper-slide")) {
          figure.classList.add("swiper-slide");
        }
        wrapper.appendChild(figure);
      });

      // wrapperをギャラリー要素に追加
      galleryElement.appendChild(wrapper);

      // ナビゲーションボタンを追加（存在しない場合）
      if (
        !galleryElement.querySelector(".swiper-button-prev--single-gallery")
      ) {
        const prevBtn = document.createElement("div");
        prevBtn.className =
          "swiper-button-prev swiper-button-prev--single-gallery";
        galleryElement.appendChild(prevBtn);

        const nextBtn = document.createElement("div");
        nextBtn.className =
          "swiper-button-next swiper-button-next--single-gallery";
        galleryElement.appendChild(nextBtn);
      }

      //   console.log("Gallery structure prepared for Swiper");


    // Swiper初期化（ここを識別クラスに統一）
    new Swiper(galleryElement, {
      slidesPerView: 1,
      centeredSlides: true,
      autoplay: {
        delay: 5500,
        disableOnInteraction: false,
        pauseOnMouseEnter: true,
      },
      navigation: {
        nextEl: galleryElement.querySelector(".swiper-button-next--single-gallery"),
        prevEl: galleryElement.querySelector(".swiper-button-prev--single-gallery"),
      },
    });

});

/* 記事本文内のスライドのみに設定 */

    /*ギャラリーのSwiperスライド*/
  .wp-block-gallery {
    position: relative;
    figure,
    figcaption,
    p {
      margin: 0;
    }

    @include s.media(mdmax) {
      //スマホの時のみ
      margin-left: math.div(-16.4383561644vw, 2);
      margin-right: math.div(-16.4383561644vw, 2);

      figcaption,
      p {
        margin-left: math.div(16.4383561644vw, 2);
        margin-right: math.div(16.4383561644vw, 2);
      }
    }

    //ナビゲーション（前・次の矢印）のCSSが必要なら設定========
    .swiper-button-prev,
    .swiper-button-next {
      text-indent: -9999px;
      width: 30px;
      height: 62px;
      background: #f7f7f7;
      box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
      overflow: hidden;
      cursor: pointer;
      @include s.media(mdmax) {
        //スマホの時のみ
        top: s.vw(s.$spDesign, 115);
      }
      @include s.media(md) {
        //タブレット・pcの時
        top: min(200px, s.vw(620, 200));
      }
      &.swiper-button-disabled {
        visibility: hidden;
      }
    }

    //ナビゲーションが右下に来るようにする
    .swiper-button-prev {
      // top: auto;
      // left: auto;
      left: 0;
      // right: 45+8px;
      // bottom: 0;
      border-radius: 0px 10px 10px 0px;

      &::before {
        content: "";
        display: block;
        margin: auto;
        width: 8px;
        height: 8px;
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        transform: translateX(25%) rotate(45deg);
      }
    }

    //ナビゲーションが右下に来るようにする
    .swiper-button-next {
      // top: auto;
      right: 0;
      // bottom: 0;
      border-radius: 10px 0px 0px 10px;

      &::before {
        content: "";
        display: block;
        margin: auto;
        width: 8px;
        height: 8px;
        border-right: 1px solid #000;
        border-top: 1px solid #000;
        transform: translateX(-25%) rotate(45deg);
      }
    }
  }