はじめに
固定ページに記事一覧をSwiperで表示し、タグごとに絞り込んで切り替えられる機能を実装した際、切り替え後に記事が表示されず、Swiperとの連携に苦戦したため、実装にかなり時間がかかってしまいました。
この記事では、特定のサブカテゴリに属する記事をSwiperで表示し、タグのメニューからそれぞれの記事に切り替える方法を紹介します。
やりたいこと
ニュースのサブカテゴリ「ForecastFlow」に属する記事を、Swiperで表示し、タグで絞り込みしたい。
また、選択中のボタンにはclass="is-current"
を付けて、ボタンの色を変更できるようにします。
イメージ

構造は以下の通りです。
- カテゴリ:
news
- サブカテゴリ:
- ForecastFlow(スラッグ:
forecastflow
) - LLoco(スラッグ:
lloco
) - Tableau(スラッグ:
tableau
)
- ForecastFlow(スラッグ:
- タブ
- リリース情報(スラッグ:
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つずつ絞り込むという限定的な用途となりますが、参考になれば嬉しいです!