WordPress│ギャラリーブロックをカルーセル付スライダー表示にする方法│Swiper

add_action('wp_enqueue_scripts', function () {
    if (!is_singular()) return;
    wp_enqueue_style('waza-swiper', 'https://cdn.jsdelivr.net/npm/swiper@11.2.10/swiper-bundle.min.css', array(), '11.2.10');
    wp_enqueue_script('waza-swiper', 'https://cdn.jsdelivr.net/npm/swiper@11.2.10/swiper-bundle.min.js', array(), '11.2.10', true);
    wp_enqueue_style('waza-gallery', get_stylesheet_directory_uri() . '/waza-gallery.css', array('waza-swiper'), '1.0');
    wp_enqueue_script('waza-gallery', get_stylesheet_directory_uri() . '/waza-gallery.js', array('waza-swiper'), '1.0', true);
});

(() => {
  function start() {
    if (typeof window.Swiper !== 'function') return;
    document.querySelectorAll('.wp-block-gallery.waza-gallery-slider').forEach((gallery, galleryIndex) => {
      if (gallery.dataset.wazaReady) return;
      const sources = [...gallery.querySelectorAll('figure.wp-block-image img')];
      if (sources.length < 2) return;
      const root = document.createElement('section');
      root.className = 'waza-gallery-view u-lb-off';
      root.setAttribute('aria-label', `${galleryIndex + 1}番目の画像ギャラリー`);
      const stage = document.createElement('div');
      stage.className = 'swiper';
      const wrapper = document.createElement('div');
      wrapper.className = 'swiper-wrapper';
      const thumbs = document.createElement('div');
      thumbs.className = 'waza-gallery-thumbs';
      const buttons = [];
      const makeButton = label => {
        const b = document.createElement('button'); b.type = 'button'; b.textContent = label; return b;
      };
      sources.forEach((source, index) => {
        const img = new Image();
        img.src = source.getAttribute('data-lazy-src') || source.currentSrc || source.src;
        img.alt = source.alt; img.loading = 'eager'; img.setAttribute('data-luminous', 'off');
        const slide = document.createElement('div'); slide.className = 'swiper-slide'; slide.append(img);
        wrapper.append(slide);
        const b = makeButton(String(index + 1));
        b.setAttribute('aria-label', `${index + 1}枚目を表示`);
        const thumb = img.cloneNode(); thumb.alt = ''; b.replaceChildren(thumb);
        thumbs.append(b); buttons.push(b);
      });
      stage.append(wrapper);
      const controls = document.createElement('div'); controls.className = 'waza-gallery-controls';
      const prev = makeButton('前の画像'), next = makeButton('次の画像');
      const status = document.createElement('span'); status.setAttribute('aria-live', 'polite');
      controls.append(prev, status, next); root.append(stage, controls, thumbs); gallery.before(root);
      let slider;
      try {
        slider = new Swiper(stage, { slidesPerView: 1, spaceBetween: 16, loop: false,
          speed: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300,
          a11y: { enabled: true, slideLabelMessage: '{{index}} / {{slidesLength}}' } });
        const sync = () => {
          const i = slider.activeIndex;
          status.textContent = `${i + 1} / ${sources.length}`;
          prev.disabled = i === 0; next.disabled = i === sources.length - 1;
          buttons.forEach((b, j) => b.setAttribute('aria-pressed', String(i === j)));
        };
        prev.addEventListener('click', () => slider.slidePrev());
        next.addEventListener('click', () => slider.slideNext());
        buttons.forEach((b, i) => b.addEventListener('click', () => slider.slideTo(i)));
        slider.on('slideChange', sync); sync();
        gallery.dataset.wazaReady = '1'; gallery.hidden = true;
      } catch (error) {
        if (slider) slider.destroy(true, true);
        root.remove(); console.warn('ギャラリーを通常表示に戻しました。', error);
      }
    });
  }
  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once: true });
  else start();
  window.addEventListener('load', start, { once: true });
})();

.wp-block-gallery.waza-gallery-slider[hidden] { display: none !important; }
.waza-gallery-view { max-width: 100%; margin-block: 1.5em; }
.waza-gallery-view .swiper { width: 100%; overflow: hidden; }
.waza-gallery-view .swiper-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.waza-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 12px; }
.waza-gallery-view button { min-height: 44px; padding: 8px; border: 1px solid currentColor; background: #fff; color: #222; cursor: pointer; }
.waza-gallery-view button:disabled { opacity: .45; cursor: default; }
.waza-gallery-view button:focus-visible { outline: 3px solid #865d00; outline-offset: 2px; }
.waza-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 5px; }
.waza-gallery-thumbs button { flex: 0 0 72px; }
.waza-gallery-thumbs img { display: block; width: 100%; height: 40px; object-fit: cover; }
.waza-gallery-thumbs [aria-pressed="true"] { border: 3px solid #865d00; }