「ギャラリー」ブロックをサムネイル付きスライド表示する方法

以下の手順で設定します。

1. 「ギャラリー」ブロックを選択します。
2. 高度な設定→追加CSSクラスにmy-swiperと入力します。

以下のコードをfunctions.jsに追加します。

add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('swiper-style', 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css');
  wp_enqueue_script('swiper-script', 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js', ['jquery'], null, true);

  ob_start();
  ?>
  .body .my-swiper.wp-block-gallery {
    gap: 0;
  }

  .my-slider {
    overflow: hidden;
  }

  .my-slider figure {
    width: 100% !important;
  }

  .my-thumbnail figure {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    opacity: 0.5;
  }

  .my-thumbnail figure.swiper-slide-thumb-active {
    opacity: 1;
  }
  <?php

  $handle = 'swiper-custom';

  wp_register_style($handle, false);
  wp_enqueue_style($handle);
  wp_add_inline_style($handle, ob_get_clean());

  ob_start();
  ?>
  jQuery(function ($) {
    const swiper = $('.my-swiper');

    // スライド用クラスを追加
    swiper.find('figure').addClass('swiper-slide');

    // swiper-wrapperを追加
    if (!swiper.find('.swiper-wrapper').length) {
      swiper.find('figure').wrapAll('<div class="swiper-wrapper">');
    }

    // サムネイルを複製
    const clone = swiper.clone().addClass('my-thumbnail');
    swiper.after(clone);

    // スライダー用クラスを追加
    swiper.addClass('my-slider');

    // スライド数を取得
    const slideCount = swiper.find('figure').length;

    // サムネイルを設定
    const sliderThumbnail = new Swiper(".my-thumbnail", {
      slidesPerView: slideCount,
    });

    // スライダーを設定
    const slider = new Swiper(".my-slider", {
      loop: true,
      thumbs: {
        swiper: sliderThumbnail,
      },
    });
  });
  <?php
  wp_add_inline_script('swiper-script',  ob_get_clean(), 'after');
});