【WordPress】タグをURLパラメータで絞り込み表示する方法

はじめに

WordPressの「投稿」で、タグ付けした記事を、URLのクエリパラメータを使って絞り込み表示する方法を紹介します。JavaScriptを使用せずシンプルに実装できます。

やりたいこと

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

イメージ

構造は以下の通りです。

• カテゴリ：news
• タグ：
  • ForecastFlow（スラッグ：forecastflow）
  • LLoco（スラッグ：lloco）
  • Tableau（スラッグ：tableau）

実装方法

HTML（PHPに実装する前の状態）

フィルターボタンの部分

<h2 class="title">DS事業部のニュース</h2>
<div class="category-filter__wrap">
	<ul class="category-filter__list">
		<!-- ALL フィルタ -->
		<li class="category-filter__item">
			<a href="/news/" class="category-filter__link is-current">ALL</a>
		</li>
		<!-- ForecastFlow フィルタ -->
		<li class="category-filter__item">
			<a href="/news/?tag=forecastflow" class="category-filter__link">ForecastFlow</a>
		</li>
		<!-- LLoco フィルタ -->
		<li class="category-filter__item">
			<a href="/news/?tag=lloco" class="category-filter__link">LLoco</a>
		</li>
		<!-- Tableau フィルタ -->
		<li class="category-filter__item">
			<a href="/news/?tag=tableau" class="category-filter__link">Tableau</a>
		</li>
	</ul>
</div>

 

ニュース表示部分

<ul class="news__list">
  <li class="news__item">
    <a href="/news/0001/" class="news__link hover">
      <div class="news__text">
        <p class="news__title">2024.10.07 「ForecastFlow」がテレビ放映されました</p>
      </div>
    </a>
  </li>
  <li class="news__item">
    <a href="/news/0002/" class="news__link hover">
      <div class="news__text">
        <p class="news__title">2024.07.02 【リリース情報】Pythonパッケージをアップデートしました（v.5.3.0）</p>
      </div>
    </a>
  </li>
</ul>

 

CSS（選択中のフィルターのスタイル）

※装飾のCSSは省略しています

.category-filter__link {
    border: 1px solid #343535;
    color: #343535;
    background-color: #fff;
}

.category-filter__link.is-current {
    background-color: #343535;
    color: #fff;
    pointer-events: none;
}

 

PHP（category.phpに記述）

最初に、テンプレートの上部で「現在のカテゴリ」と「URLのタグ」を取得します。

<?php
  $current_category = get_queried_object();
  $current_tag = isset($_GET['tag']) ? sanitize_text_field($_GET['tag']) : '';
?>

 

フィルターボタンの部分

<ul class="category-filter__list">
  <!-- ALL フィルタ -->
  <li class="category-filter__item">
    <a href="<?php echo esc_url(home_url('/news/')); ?>"
       class="category-filter__link <?php echo empty($current_tag) ? 'is-current' : ''; ?>">
      ALL
    </a>
  </li>

  <!-- ForecastFlow フィルタ -->
  <li class="category-filter__item">
    <a href="<?php echo esc_url(add_query_arg(
                    'tag',
                    'forecastflow',
                    get_category_link($current_category->term_id)
                  )); ?>"
       class="category-filter__link <?php echo $current_tag === 'forecastflow' ? 'is-current' : ''; ?>">
      ForecastFlow
    </a>
  </li>
（省略）
</ul>

 

ニュース表示部分

<ul class="section-news__list">
  <?php
  if (have_posts()) :
    while (have_posts()): the_post();
  ?>
      <li class="section-news__item">
        <a href="<?php the_permalink() ?>" class="section-news__link hover">
          <div class="section-news__text">
            <p class="section-news__title">
              <?php the_title(); ?>
            </p>
          </div>
        </a>
      </li>
  <?php endwhile;
  endif; ?>
</ul>

 

実装のポイント

リンクの出力処理

<?php echo esc_url(
  add_query_arg(
    'tag',
    'forecastflow',
    get_category_link(
      $current_category->term_id
    )
  )
); ?>

1.add_query_arg()関数を使用しURLにクエリパラメータを付与します。
（例）
クエリ変数キー：tag
クエリー変数値：forecastflow
指定したURLに ?tag=forecastflow を追加

カテゴリ「news」に属するタグ「forecastflow」のURLを生成：

/news/?tag=forecastflow

 

2.get_category_link関数を使用し、特定のカテゴリのURLを取得します。

現在地の取得

<?php echo empty($current_tag) ? 'is-current' : ''; ?>

empty関数を使用し、$current_tagが空の場合（URLに?tag=〇〇が無い場合）、ALLにclass="is-current"を付与します。

echo $current_tag === 'lloco' ? 'is-current' : '';

逆に$current_tagが?tag=〇〇と一致する時、class="is-current"を付与します。

まとめ

タグパラメータを使った絞り込み表示を実現する方法を紹介しました。
URLパラメータを活用することで、JavaScriptを使わずにシンプルなフィルターUIが作れます。

• Tips
• 技術情報
• やってみた