WordPressサイトの記事一覧ページで、記事をカテゴリー別に検索可能にして、カテゴリーページで選択されているカテゴリーに色がつくように実装します。よくある実装ですが、文章だけだとよく分からないと思うので、以下の動画をご覧ください。
今回、私の方で眼科のサンプルサイトを作成し、記事を「まめ知識」「目の健康」「目の病気」というカテゴリーに分類しました。実装したい内容については動画で理解できたと思いますので、コードの解説をしていきます。
今回はblogというスラッグのカスタム投稿タイプを作成し、blog_categoryというタクソノミーを用意している前提で解説します。大まかな方針としては、現在表示しているカテゴリー一覧ぺージと一致するカテゴリーにactiveクラスを付与し、背景色をつければ実装できます。
まず、以下のコードをarchive-blog.phpに記述します。こちらは「すべて」の記事一覧ページに使用されるテンプレートファイルです。今回は、記事の内容と関連が薄いコードについては割愛していきます。
<body <?php body_class(); ?>>
<div class="p-category-list">
<div class="p-category-list__inner">
<div class="p-category-list__lead">カテゴリで探す</div>
<ul class="p-category-list__list">
<li class="p-category-list__item">
<a class="p-category-list__item-link p-category-list__item-link--all" href="<?php echo esc_url(home_url()); ?>/blog">すべて</a>
</li>
<?php
$args = [
'taxonomy' => 'blog_category'
];
$terms = get_terms($args);
?>
<?php foreach ($terms as $term) : ?>
<li class="p-category-list__item">
<a class="p-category-list__item-link" href="<?php echo get_term_link($term); ?>"><?php echo $term->name; ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="p-blog__body">
<div class="p-blog__title">すべての記事</div>
<?php if (have_posts()) : ?>
<ul class="p-blog__list">
//以下の記述は記事との関連は薄いため割愛。bodyタグにbody_class()を記述していますが、これはページごとに固有のクラスをbodyタグに追加してくれる関数で、archive-blog.phpに対しては、.post-type-archive-blogというクラスが出力されます。また、7行目で、「すべて」のボタンにはp-category-list__item-link–allという固有のクラスを付与しています。
それでは、CSSを記述していきます。
/* ボタンの背景色を灰色に設定 */
.p-category-list__item-link {
display: inline-block;
background-color: #f2f2f2;
color: #000;
transition: all 0.3s;
}
/* すべての記事一覧ページのときだけ、「すべて」のボタンの背景色を黒色にする */
.post-type-archive-blog .p-category-list__item-link-all {
background-color: #000;
color: #fff;
}
/* ホバーアクション */
.p-category-list__item-link:hover {
background-color: #000;
color: #fff;
}ボタンに付与している.p-category-list__item-linkに対して背景色が灰色（#f2f2f2）となるようにしています。そして、.post-type-archive-blog .p-category-list__item-link-all、つまり「すべて」の記事一覧ページのときだけ、「すべて」のボタンに背景色が黒色（#000)となるようにしています。
続いて、taxonomy.phpに以下のコードを記述します。こちらは「まめ知識」「目の健康」「目の病気」の記事一覧ページに使用されるテンプレートファイルです。
<body <?php body_class(); ?>>
<div class="p-category-list">
<div class="p-category-list__inner">
<div class="p-category-list__lead">カテゴリで探す</div>
<ul class="p-category-list__list">
<li class="p-category-list__item">
<a class="p-category-list__item-link p-category-list__item-link--all" href="<?php echo esc_url(home_url()); ?>/blog">すべて</a>
</li>
<?php
$args = [
'taxonomy' => 'blog_category'
];
$terms = get_terms($args);
?>
<?php foreach ($terms as $term) : ?>
<li class="p-category-list__item">
//is_tax()関数を使って、現在表示している一覧ぺージと一致するカテゴリーにactiveクラスを出力
<a class="p-category-list__item-link <?php if (is_tax('blog_category', $term->term_id)) echo 'active'; ?>" href="<?php echo get_term_link($term); ?>"><?php echo $term->name; ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<div class="p-blog__body">
<div class="p-blog__title c-heading"><?php single_term_title(); ?>の記事</div>
<?php if (have_posts()) : ?>
<ul class="p-blog__list">
//以下の記述は記事との関連は薄いため割愛。arhive-blog.phpと殆どコードは同じですが、17行目で<?php if (is_tax(‘blog_category’, $term->term_id)) echo ‘active’; ?>というコードをaタグのclass属性内に書くことで、現在表示しているカテゴリー一覧ぺージと一致するカテゴリーにactiveクラスが出力されるようになっています。そのため、以下のようなCSSを追加すれば、今回の実装が完成します。
.p-category-list__item-link.active {
background-color: #000;
color: #fff;
}以上が記事をカテゴリー別に検索可能にして、カテゴリーページで選択されているカテゴリーに色がつくように実装する方法となります。コードが長くなって申し訳ないですが、関係ない実装についてはなるべく省略しました。よく見る実装ですので、ぜひ今回の記事が皆さんのお役に立てれば幸いです。