SWELL│Swiperで記事をスライダー表示するカスタマイズ

// SWELL用。20244はこのコードを使う投稿・固定ページのIDへ変更します。
add_action('wp_enqueue_scripts', function () {
    if (!is_singular() || !in_array(get_queried_object_id(), array(20244), true)) return;
    wp_enqueue_script('swell_swiper');
    wp_enqueue_style('swell_swiper');
});

add_shortcode('waza_selected_slider', function ($atts) {
    $atts = shortcode_atts(array('ids' => ''), $atts);
    $ids = array_slice(array_values(array_unique(array_filter(array_map('absint', explode(',', $atts['ids']))))), 0, 12);
    // post__in が空だと全投稿の検索になるため、ここで終了します。
    if (!$ids) return '<p>表示する記事IDを指定してください。</p>';
    $query = new WP_Query(array('post_type' => 'post', 'post_status' => 'publish', 'has_password' => false,
        'post__in' => $ids, 'orderby' => 'post__in', 'posts_per_page' => count($ids), 'ignore_sticky_posts' => true, 'no_found_rows' => true));
    if (!$query->have_posts()) return '<p>表示できる公開記事がありません。</p>';
    ob_start(); ?>
<section class="waza-selected-slider" aria-label="おすすめ記事">
  <div class="swiper"><ul class="swiper-wrapper">
    <?php while ($query->have_posts()): $query->the_post(); ?>
    <li class="swiper-slide"><a href="<?php echo esc_url(get_permalink()); ?>">
      <?php if (has_post_thumbnail()) echo get_the_post_thumbnail(get_the_ID(), 'medium', array('loading' => 'lazy', 'alt' => '')); ?>
      <span><?php echo esc_html(get_the_title()); ?></span>
    </a></li>
    <?php endwhile; wp_reset_postdata(); ?>
  </ul></div>
  <div class="wss-controls" hidden><button type="button" class="wss-prev" aria-label="前の記事へ">前へ</button><button type="button" class="wss-next" aria-label="次の記事へ">次へ</button></div>
</section>
<?php return ob_get_clean();
});

.waza-selected-slider { margin-block:2em; min-width:0; }
.waza-selected-slider .swiper { overflow:hidden; }
.waza-selected-slider .swiper-wrapper { display:flex; padding:0; margin:0; list-style:none; }
.waza-selected-slider .swiper-slide { flex-shrink:0; height:auto; width:85%; box-shadow:none; }
.waza-selected-slider .swiper-slide a { display:block; border:1px solid #ddd; border-radius:4px; overflow:hidden; height:100%; color:inherit; text-decoration:none; }
.waza-selected-slider .swiper-slide img { display:block; width:100%; aspect-ratio:16 / 9; object-fit:cover; }
.waza-selected-slider .swiper-slide span { display:block; padding:1em; }
.waza-selected-slider .wss-controls { text-align:right; margin-top:.75em; }
.waza-selected-slider button { min-width:60px; min-height:44px; border:1px solid #555; border-radius:4px; margin-left:.5em; padding:.5em; background:#fff; color:#222; }
.waza-selected-slider button:disabled { opacity:.4; }
.waza-selected-slider :is(a,button):focus-visible { outline:3px solid #0969da; outline-offset:-3px; }
.waza-selected-slider .swiper:not(.swiper-initialized) .swiper-wrapper { overflow-x:auto; gap:16px; }

document.addEventListener('DOMContentLoaded', () => {
  if (typeof Swiper === 'undefined') return;
  document.querySelectorAll('.waza-selected-slider').forEach(root => {
    const track = root.querySelector('.swiper');
    if (track.swiper) return;
    const controls = root.querySelector('.wss-controls');
    const slider = new Swiper(track, {
      slidesPerView: 1.15,
      spaceBetween: 16,
      loop: false,
      autoplay: false,
      watchOverflow: true,
      speed: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : 300,
      breakpoints: {600: {slidesPerView: 2}, 960: {slidesPerView: 3}},
      navigation: {prevEl: root.querySelector('.wss-prev'), nextEl: root.querySelector('.wss-next')},
      a11y: {prevSlideMessage: '前の記事へ', nextSlideMessage: '次の記事へ', slideLabelMessage: '{{index}} / {{slidesLength}}'}
    });
    controls.hidden = false;
    // SWELL同梱版で画面幅変更後に残る aria-disabled を実際の状態と揃えます。
    const syncButtons = () => requestAnimationFrame(() => {
      controls.querySelectorAll('button').forEach(button => button.setAttribute('aria-disabled', String(button.disabled)));
    });
    slider.on('resize breakpoint slideChange lock unlock', syncButtons);
    syncButtons();
    // キーボードでフォーカスしたリンクが画面外へ隠れないようにします。
    root.querySelectorAll('.swiper-slide a').forEach((link, index) => {
      link.addEventListener('focus', () => slider.slideTo(index));
    });
  });
});