カテゴリー一覧で現在のカテゴリーをカレント表示する方法~ WordPress関数編~

カテゴリー一覧で現在のカテゴリーをカレント表示する方法~ WordPress関数編~

WordPress等のカテゴリーページで、そのページのカテゴリーをカレント表示する(目立たせる)方法をご紹介します。WordPressの関数を使用したカスタマイズとなります。

目次

カテゴリーページで現在のカテゴリーをカレント表示した例

イメージとしてはこんな感じです。

全体の投稿一覧ページでは「すべて」に下線が引かれ、カテゴリーページではそのページのカテゴリーのテキストに下線が引かれています。

一目で今どこのカテゴリーの投稿一覧を見ているかがわかり、ユーザーに優しい設計となります。

コードの完成形

「すべて」「ニュース」「日記」のカテゴリーリストの部分のみを抜粋しています。

archive.php等

<?php
	$ob = get_queried_object();
	$ob_name = $ob->name;
?>
<!-- カテゴリーページ以外の場合 -->
<?php if(!is_category()): ?>
	<ul class="category-list">
		<li class="category-list__item"><a class="is-active" href="/news/">すべて</a></li>
		<?php
		$categories = get_categories();
		foreach ($categories as $category) :
		?>
		<li class="category-list__item">
			<a class="js-category-link" href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a>
		</li>
		<?php endforeach; ?>
	</ul>
<!-- カテゴリーページの場合 -->
<?php else : ?>
	<ul class="category-list">
		<li class="category-list__item"><a href="/news/">すべて</a></li>
		<?php
		$categories = get_categories();
		foreach ($categories as $category) :
		?>
		<li class="category-list__item">
			<a class="<?php if ($ob_name == esc_html($category->name)) { echo "is-active"; } ?>" href="<?php echo get_category_link($category->term_id); ?>"><?php echo $category->name; ?></a>
		</li>
		<?php endforeach; ?>
	</ul>
<?php endif; ?>

カテゴリーページ以外カテゴリーページでHTMLを分岐させています。

カテゴリーページ以外(=全体の投稿一覧)では「すべて」にis-activeのクラスがつくようにしています。

また、カテゴリーページでは繰り返すリストアイテムのaタグのクラス名が動的に処理されるように記述しています。

CSS

.category-list {
  display: flex;
  justify-content: center;
  gap: 1em;
}

.category-list__item a {
  color: inherit;
  padding: 0.5em;
}

.category-list__item a.is-active {
  border-bottom: 2px solid #333;
}

12行目~14行目で、category-list__itemの中のaタグにis-activeのクラス名があると、下線が表示されるようにしています。

WordPress関数の解説

<?php
	$ob = get_queried_object();
	$ob_name = $ob->name;
?>

get_queried_object()関数を使用して、現在表示しているページの情報を取得しています。

そしてその中から現在表示しているページのカテゴリー名を$ob_name変数に代入しています。

<?php
	$categories = get_categories();
	foreach ($categories as $category) :
?>

get_categories()関数を使用して、登録されているすべてのカテゴリー情報を取得しています。

そしてforeachのループで、配列内の各要素を取り出して、変数$categoryに代入しています。

<?php if ($ob_name == esc_html($category->name)) { echo "is-active"; } ?>

archive.phpの27行目のコードです。

変数$ob_name(現在表示しているページのカテゴリー名)と 変数$category->name(foreachループで取得された各カテゴリー名)を比較し、同じであればaタグにis-activeのクラスを付与しています。

今回はWordPressの関数を使用したカテゴリーのカレント表示をご紹介しました。同じような処理をJavaScriptを使うことでも実現可能です。詳しくは下記リンクをご覧ください。

目次