「新着記事」など横並び表示にSwiperページネーションを付ける方法

はじめに

「新着記事」などで「横並び表示にする」をオンにすると、スライド形式での横スクロール表示に切り替わります。

しかし、このときSwiperページネーション（ドット）が表示されず、残りのスライド枚数が分かりません。

そこで、スライドにページネーションを追加します。

この記事では、この方法について説明します。

完成イメージ

実装手順

add_filter('wp_template_enhancement_output_buffer', function ($html) {
  if (empty($html)) {
    return $html;
  }

  $rules = [
    [
      'search'  => '/(<div class="swiper-button-prev">)/',
      'replace' => '<div class="swiper-pagination"></div>' . "\n" . '$1',
    ],
    [
      'search'  => '/(navigation:)/',
      'replace' => 'pagination: { el: ".swiper-pagination", clickable: true, },' . "\n" . '$1',
    ],
  ];

  foreach ($rules as $rule) {
    $html = preg_replace($rule['search'], $rule['replace'], $html);
  }

  return $html;
});

さいごに

今回紹介した方法を使えば、スライドにページネーションを追加でき、ユーザーが残りのスライド枚数を一目で確認できるようになります。
見た目の向上だけでなく、操作性の改善にもつながりますので、ぜひ導入してみてください。