BLOG

WordPressの記事一覧ページにリンク付きカテゴリー一覧を表示してハイライトさせる方法

2021.07.23

下記のような感じで、リンク付きの全てのカテゴリーが一覧で表示されて、尚且つハイライトさせたい。

個人的にはこの手のカテゴリー一覧ボタンは使用する事がとても多い気がします。
ソートのような感じで記事が絞り込めて、ユーザーが見やすいかな？と思うのでよく使っています。

カテゴリー一覧だけではなく、「全て」のボタン表示まで入れている情報がなかなか見当たらなかったので、忘れないようにメモに残しておきます。

少し強引な手段で対応している部分もあるかもしれませんが、誰かのお役に立てれれば嬉しいです。

今回は通常記事投稿の場合と、カスタム投稿の場合をそれぞれ紹介したいと思います。


通常記事投稿の場合

まず、home.phpやarchive.phpなどの一覧表示ページの表示したい部分に下記を貼り付けます。

<ul class="categoryList">
<li class="current-cat"><a href="/記事全表示パス/">全て</a></li>
<?php
	if  (!is_page() && !is_home() && !is_single()){
	$catsy = get_the_category();
	$myCat = $catsy->cat_ID;
	$currentcategory = '&current_category='.$myCat;
}

	elseif (is_single()){
	$catsy = get_the_category();
	$myCat = $catsy[0]->cat_ID;
	$currentcategory = '&current_category='.$myCat;
}

	wp_list_categories('depth=1&title_li='.$currentcategory);
	?>
 </ul>


そして下記CSSを追加。（CSSは必要最低限の部分だけに省略します。）

.categoryList li.current-cat a{
	background:#2e4452;
	color:#FFF;
}

ここまでで、「全て」ボタンがハイライトされ、カテゴリー一覧ボタンが表示されていると思います。

続いてcategory.phpを用意して、表示したい箇所に下記を貼り付けます。

<ul class="categoryList">
<li><a href="/記事全表示パス/">全て</a></li><!--ここのclassを外すだけ -->
<?php
	if  (!is_page() && !is_home() && !is_single()){
	$catsy = get_the_category();
	$myCat = $catsy->cat_ID;
	$currentcategory = '&current_category='.$myCat;
}

	elseif (is_single()){
	$catsy = get_the_category();
	$myCat = $catsy[0]->cat_ID;
	$currentcategory = '&current_category='.$myCat;
}

	wp_list_categories('depth=1&title_li='.$currentcategory);
	?>
 </ul>

先ほどとほぼ同じコードですが、このようにcategory.phpの方では「current-cat」のclassを外すだけで、
「全て」ボタンについていたアクティブ表示が消えて、対象のカテゴリーのみアクティブになるのでとても簡単な方法ですね。

ぜひ試して見てください。



カスタム投稿の場合

下記のような商品一覧ページという場合を例とします。
カスタム投稿の場合でもやり方は一緒です。

まず、archive-投稿タイプ名.phpのように、phpファイルを作りFTPでアップします。

タクソノミー一覧を表示させたい箇所に下記を貼り付けます。

<ul class="categoryList">
<li class="current-cat"><a href="/記事全表示パス/">全て</a></li>
<?php
  $terms = get_terms('タクソノミースラッグ名');
  foreach ( $terms as $term ) {
    echo '<li><a href="'.get_term_link($term).'">'.$term->name.'</a></li>';
  }
?>
</ul>


※CSSは省略

続いて、taxonomy-投稿タイプ名.phpを作成しFTPでアップします。

<?php 
      $taxonomy_terms = get_terms('タクソノミースラッグ名'); 
      if(!empty($taxonomy_terms)&&!is_wp_error($taxonomy_terms)){
        echo '<ul class="categoryList"><li><a href="/記事全表示パス/">全て</a></li>';		  
        foreach($taxonomy_terms as $taxonomy_term): 
    ?>
    <li class="<?php if(is_object_in_term( get_the_ID(), 'タクソノミースラッグ名', $taxonomy_term->slug )){ echo 'current-cat'; } ?>"><a href="<?php echo get_term_link($taxonomy_term); ?>"><?php echo $taxonomy_term->name; ?></a></li>
    <?php
        endforeach; 
        echo '</ul>';
      }
    ?>



「全て」ボタンの挿入方法が少し強引な気がして個人的にはあまりスッキリできませんが、色々な記事を参考にさせていただきなんとか無事に表示する事ができました。

通常記事投稿の場合とカスタム投稿の場合で少し記述が違いますが、それぞれ同じような表現ができます。

同じような事でお困りの方がおりましたら、是非試してみてください。