WEB

【WordPress】固定ページに記事一覧をSwiperで表示し、タグで切り替える方法

はじめに

固定ページに記事一覧をSwiperで表示し、タグごとに絞り込んで切り替えられる機能を実装した際、切り替え後に記事が表示されず、Swiperとの連携に苦戦したため、実装にかなり時間がかかってしまいました。
この記事では、特定のサブカテゴリに属する記事をSwiperで表示し、タグのメニューからそれぞれの記事に切り替える方法を紹介します。

やりたいこと

ニュースのサブカテゴリ「ForecastFlow」に属する記事を、Swiperで表示し、タグで絞り込みしたい。
また、選択中のボタンにはclass="is-current"を付けて、ボタンの色を変更できるようにします。

イメージ

構造は以下の通りです。

  • カテゴリ:news
  • サブカテゴリ:
    • ForecastFlow(スラッグ:forecastflow
    • LLoco(スラッグ:lloco
    • Tableau(スラッグ:tableau
  • タブ
    • リリース情報(スラッグ:press
    • お知らせ(スラッグ:announcements
    • セミナー・イベント(スラッグ:event

 

実装方法

準備

jQueryとSwiperをCDNで読み込みます。

<link rel='stylesheet' id='swiper_style-css' href='https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css?ver=6.7.1' type='text/css' media='all' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

 

 

HTML

<section class="section-news">
  <div class="section-news__inner inner">
    <div class="section-news__header">
      <div class="section-wrap">
        <h2 class="section__title-jp">ニュース</h2>
      </div>
      <!-- メニュー -->
      <div class="section-news__wrap">
        <ul class="category-filter__list">
          <li class="category-filter__item">
            <a href="#" data-category="all" class="category-filter__link is-current">ALL</a>
          </li>
          <li class="category-filter__item">
            <a href="#" data-category="press" class="category-filter__link">リリース情報</a>
          </li>
          <li class="category-filter__item">
            <a href="#" data-category="announcements" class="category-filter__link">お知らせ</a>
          </li>
          <li class="category-filter__item">
            <a href="#" data-category="event" class="category-filter__link">セミナー・イベント</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- ニュース一覧(Swiper) -->
    <div class="section-news__content">
      <div class="swiper section-news__slider">
        <div class="swiper-wrapper">
          <div class="swiper-slide swiper-slide-category section-news__slide-item" data-category="announcements">
            <a href="#" class="section-news__link hover_img">
              <figure class="section-news__figure">
                <img src="thumbnail.png" alt=""
                  class="section-news__image">
              </figure>
              <p class="section-news__description">「ForecastFlow」がテレビ放映されました</p>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

 ・Swiperの基本のコードに画像、タイトル等の必要な要素を足していきます。
data属性指定する
タグごとにニュースを絞り込むため、メニュー、ニュース一覧にdata属性を指定します。data-(任意の名前)

 

CSS(選択中のメニューのスタイル)
※装飾のCSSは省略しています

.category-filter__link {
    padding: 12px 35px;
    border: #0E2649;
    color: #0E2649;
    font-size: 16px;
}
.category-filter__link.is-current {
    background-color: #0E2649;
    color: #fff;
    pointer-events: none;
}

 選択された時(.is-current)は、pointer-events: none;を付与し、クリック等のマウスイベントを無効化します。

 

JavaScript

STEP1:Swiperの初期化とカスタマイズ
デザインによって数値の変更や、パラメータを変更してください

  // Swiper 
  const serviceSwiper = new Swiper(".section-news__slider", {
    slidesPerView: 2,
    spaceBetween: 30,
    loop: false,
    breakpoints: {
      768: { //画面幅768px以上で適用
        slidesPerView: 4,
        spaceBetween: 25,
      },
    },
  });

 

STEP2:メニューの切替え処理

①メニュー選択時のクラス(is-current)の切替え
クリックしたときに、aタグがページの先頭に戻らないようにpreventDefault();を指定

  $(".category-filter__link").on("click", function (e) {
    e.preventDefault();
    $(".category-filter__link").removeClass("is-current");
    $(this).addClass("is-current");
  });

 

②タグのフィルタリング

    // data属性の値を取得
    const category = $(this).data("category");

    // すべてのスライドを非表示にし、該当スライドのみ表示
    $(".swiper-slide").hide(); // すべてのスライドを非表示
    if (category === "all") {
      $(".swiper-slide").show(); // 全スライドを表示
    } else {
      $(`.swiper-slide[data-category="${category}"]`).show(); // 特定のスライドのみ表示
    }

 

このままだと、タブを切替えても何も表示されないので、Swiper API Methodsの「swiper.update()」を追加し、Swiperを更新する必要があります。

    // Swiper の更新
    serviceSwiper.update();

 

まとめると

  $(".category-filter__link").on("click", function (e) {
    e.preventDefault();

    $(".category-filter__link").removeClass("is-current");
    $(this).addClass("is-current");

    const category = $(this).data("category");

    $(".swiper-slide").hide();
    if (category === "all") {
      $(".swiper-slide").show();
    } else {
      $(`.swiper-slide[data-category="${category}"]`).show();
    }
 
    serviceSwiper.update();
  });

 

PHP(page.phpに記述)
作成したHTMLにWordPressに必要なタグを入れていきます。

①特定のサブカテゴリに属する投稿を取得

$args_all = array(
  'post_type' => 'post',
  'posts_per_page' => -1,
  'tax_query' => array(
    array(
      'taxonomy' => 'category',
      'field' => 'slug',
      'terms' => 'forecastflow',
    ),
  ),
);
$query_all = new WP_Query($args_all);

 

②タグごとの投稿を取得

$tags = array('press', 'announcements', 'event');
$queries = array();
foreach ($tags as $tag) {
  $queries[$tag] = new WP_Query(array_merge($args_all, array(
    'tag' => $tag,
  )));
}

 

③タグ別にループで出力

<?php foreach ($queries as $tag => $query) : ?>
  <?php if ($query->have_posts()) : ?>
    <?php while ($query->have_posts()) : $query->the_post(); ?>
      <div class="swiper-slide swiper-slide-category section-news__slide-item" data-category="<?php echo esc_attr($tag); ?>">
    (省略)
      </div>
    <?php endwhile; ?>
  <?php endif; ?>
<?php endforeach; ?>

 

esc_attr($tag)を使用し、タグを出力します。JavaScriptと連携します。

まとめ

固定ページに記事を出力し、タグで1つずつ絞り込むという限定的な用途となりますが、参考になれば嬉しいです!

 

N.T
平日はコーディング、週末は子供と公園を走り回っています。