category.phpで表示されるページなどで、スラッグが一致したカテゴリーを反転表示させるためには以下の２つのコードが必要になります。
ポイント
スラッグが一致したカテゴリーに対して、特定のクラスを付与するコード
スラッグが一致しているか判別するために、現在のページで表示中のカテゴリー情報を取得する必要があります。
カテゴリーの取得と、現在表示中のカテゴリー情報は以下のコードで取得することができます。
<ul class="category__items">
<?php
$categories = get_categories();
$current_category = get_queried_object(); // 現在表示中のカテゴリー情報を取得
$current_slug = $current_category->slug;
if ($categories) :
foreach ($categories as $category) :
// スラッグが一致した場合、『.is-active』を付けて反転表示
if ($current_slug === $category->slug) : ?>
<li class="category__item is-active">
<a class="category__link" href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a>
</li>
<?php else : ?>
<li class="category__item">
<a class="category__link" href="<?php echo esc_url(get_category_link($category->term_id)); ?>"><?php echo $category->name; ?></a>
</li>
<?php endif; ?>
<?php endforeach; ?>
<?php endif; ?>
</ul>【コードの説明】
- get_queried_object();
WordPressの関数であり、カテゴリーページや投稿ページなどの特定のページで使用されます。
この関数は、現在表示中のページの情報を取得するために使用されます。
$current_category = get_queried_object();
$current_slug = $current_category->slug;上記のコードでは、get_queried_object() を使用して現在表示中のカテゴリーページの情報を取得して、それを変数 $current_category に代入しています。
そして、変数 $current_category から slugプロパティを使用して現在のカテゴリースラッグを取得しています。
if ($current_slug === $category->slug) {
echo '<li class="category__item is-active">';
} else {
echo '<li class="category__item">';
}こちらのコードは現在のスラッグ「$current_slug」と、
foreachで出力されたカテゴリースラッグ「$category->slug」が一致すれば【is-active】クラスを付与する条件分岐のコードになります。
付与されたクラスに対して、スタイルを追加するコード
.is-active {
background-color: #000;
color: #fff;
}このコードでは、【is-active】クラスに対して背景色が黒くなり、テキストの色が白くなるように設定しています。
必要に応じて、他のスタイルプロパティを追加または調整することもできます。
まとめ
以上の２つのコードを使用することで、スラッグが一致したカテゴリーをCSSで反転表示させることができます。
また、このコードを応用することによってタブ切り替えの実装なども可能になりますね。
カテゴリー情報を取得する方法については、以下の記事で紹介しています。
