目的別に選ぶWordPressカテゴリーの最適な表示方法

<ul>でリンクをリスト表示

投稿が属しているカテゴリーページへのリンクを<ul>形式で表示します。

the_category();

<ul class="post-categories">
	<li><a href="～～" rel="category tag">カテゴリーA</a></li>
	<li><a href="～～" rel="category tag">カテゴリーB</a></li>
</ul>

<a> + 区切り文字

the_category()の引数に指定した文字が区切り文字となり、その文字で<a>タグを区切った形式で書き出されます。区切り文字を省略もしくは初期値である空文字''を指定した場合、先述の<ul>形式で表示されます。

the_category( '/' );

<a href="～～" rel="category tag">カテゴリーA</a>/
<a href="～～" rel="category tag">カテゴリーB</a>

<a>タグのみ

HTMLやクラス名を自由に編集したい場合はget_the_category()を使うと実現できます。見本は<a>タグのみの出力例になります。get_the_category()を使うと、取得したカテゴリーのオブジェクトを元に必要な情報のみ利用することができます。

$category_obj = get_the_category();
foreach ( $category_obj as $obj ) {
	echo '<a href="' . esc_url( get_category_link( $obj ) ) . '">' . esc_html( $obj->name ) . "</a>\n";
}

<a href="～～">カテゴリーA</a>
<a href="～～">カテゴリーB</a>

参考リンク
WordPress.org – get_the_category()
WordPress.org – get_category_link()

カテゴリー名をリンクなしで表示

投稿が属しているカテゴリー名をリンク無しで書き出すこともできます。カテゴリーのオブジェクトが持つ情報のうち「カテゴリー名」のみ利用しています。

$category_obj = get_the_category();
foreach ( $category_obj as $obj ) {
	echo '<span>' . esc_html( $obj->name ) . "</span>\n";
}

<span>カテゴリーA</span>
<span>カテゴリーB</span>

標準的なカテゴリーリスト

投稿が属しているカテゴリーとは異なり、ウェブサイトに存在しているカテゴリーのリストを表示します。

echo "<ul>\n";
$args = array(
	'title_li' => '',
);
wp_list_categories( $args );
echo "</ul>\n";

<ul>
	<li class="cat-item cat-item-1"><a href="～～">カテゴリーA</a></li>
	<li class="cat-item cat-item-2"><a href="～～">カテゴリーB</a></li>
</ul>

現在位置（カレント）を識別可能なカテゴリーリスト

投稿一覧を表示する category.php や archive.php に、表示中のカテゴリーを識別可能なカテゴリーリストを設置します。

カテゴリーリストの項目のクラス名をcategory-list__itemとし、表示中の項目であればcategory-list__item--currentとなるようにしています。あとはCSSで見分けが付くよう装飾すればOKです。

$categories = get_categories(
	array(
		'orderby' => 'slug',
	)
);
if ( $categories ) {
	echo "<ul class=\"category-list\">\n";
	foreach ( $categories as $obj ) {
		if ( single_cat_title( '', false ) === $obj->name ) {
			echo '<li class="category-list__item--current">';
		} else {
			echo '<li class="category-list__item">';
		}
		echo '<a href="' . esc_url( get_category_link( $obj ) ) . '">' . esc_html( $obj->name ) . "</a></li>\n";
	}
	echo "</ul>\n";
}

<ul class="c-cat-list">
  <li class="c-cat-list__item--current"><a href="～～">カテゴリーA</a></li>
  <li class="c-cat-list__item"><a href="～～">カテゴリーB</a></li>
</ul>

スラッグを元に任意のカテゴリーへリンクする

任意のカテゴリーへのリンクを取得するget_category_link()を使うためにはカテゴリーID（数値）が必要になります。そこでget_category_by_slug()を使ってカテゴリースラッグを元にカテゴリーIDを取得しています。

この書き方はWordPressのパーマリンク設定に応じたURLが書き出されるため、設定を変更してもリンク切れになることがありません。

<a href="<?php echo esc_url( get_category_link( get_category_by_slug( 'example' )->cat_ID ) ); ?>">カテゴリーA</a>

<a href="～～">カテゴリーA</a>