【WordPress】カテゴリーやタグの一覧を区切り文字でつないで表示する方法｜get_the_category_list・get_the_tag_list

2024.03.23

カテゴリーやタグの一覧をそのまま出力すると、区切りがなく読みにくくなることがあります。WordPressには、区切り文字を指定して一覧を1行で出力できる専用関数が用意されているため、自前でループを書く必要はありません。

この記事でわかること

  • get_the_category_list() でカテゴリー一覧を区切り文字付きで表示
  • get_the_tag_list() でタグ一覧を区切り文字付きで表示
  • リンクごとにクラスやアイコンを付けたい場合の自前ループの書き方
スポンサーリンク

カテゴリーの一覧を区切り文字でつないで表示する

get_the_category_list( $separator ) を使うと、投稿に関連付けられたカテゴリーのリンク一覧を、指定した区切り文字でつないだ文字列として1行で取得できます。

テンプレート：カテゴリー一覧を区切り文字付きで表示
<?php
echo get_the_category_list( '、' ); // 第1引数が区切り文字
?>
get_the_category_list() が内部でやっていること
投稿のカテゴリー取得・各カテゴリーへのリンク生成（esc_url()済み）・区切り文字での連結・末尾の余分な区切り文字の除去まで、すべて関数内で処理されます。自前で rtrim() を使って末尾の区切り文字を取り除く必要はありません。

タグの一覧を区切り文字でつないで表示する

タグも同様に、get_the_tag_list( $before, $separator, $after ) を使います。第1引数は一覧の前に付ける文字列、第3引数は後ろに付ける文字列です（不要なら空文字でかまいません）。

テンプレート：タグ一覧を区切り文字付きで表示
<?php
echo get_the_tag_list( '', ' / ' ); // 区切り文字はスラッシュ
?>
投稿にタグが無い場合
get_the_tag_list() は、投稿にタグが1つも設定されていない場合は空文字または false を返します。一覧の前後に見出しなどを固定で表示している場合は、if ( get_the_tag_list() ) のように事前にチェックしてから出力してください。

リンクごとにクラスやアイコンを付けたい場合（自前ループ）

get_the_category_list() / get_the_tag_list() は手軽な反面、出力されるリンクの class 属性やアイコンなど、細かい装飾は変更できません。リンク1つ1つを自由にカスタマイズしたい場合は、get_the_category() / get_the_tags() で一覧を取得し、自前でループして組み立てます。

テンプレート：カテゴリーリンクを自前でカスタマイズ
<?php
$categories = get_the_category();
if ( ! empty( $categories ) ) {
    $separator = ', ';
    $links = array();
    foreach ( $categories as $category ) {
        $links[] = '<a class="cat-link" href="' . esc_url( get_category_link( $category->term_id ) ) . '">'
            . esc_html( $category->name ) . '</a>';
    }
    echo implode( $separator, $links ); // 配列を区切り文字でつなぐ（rtrimより安全）
}
?>
implode() を使うと末尾の区切り文字問題を避けられる
文字列に区切り文字を足し続けて最後に rtrim() で取り除く方法は、区切り文字が ", " のように複数文字の場合に末尾の一部だけ残って崩れることがあります（rtrim($str, ', ') は指定した文字のどれか1文字ずつを右から削るため、カテゴリー名の末尾がたまたま , や半角スペースだと巻き込んで削られる场合があります）。リンクを配列に貯めてから implode() でつなぐ方が安全です。

関連するカテゴリー・タグ表示のカスタマイズ

よくある質問（FAQ）

Qget_the_category_list()の引数の意味を教えてください。
A第1引数が区切り文字、第2引数は階層カテゴリーの親子をつなぐ文字列（省略可）、第3引数は対象の投稿ID（省略時は現在の投稿）です。例：get_the_category_list('、')。
Qタグも同様に区切り文字でつないで表示するには？
Aget_the_tag_list($before, $separator, $after) を使います。第1引数に開始文字列、第2引数に区切り文字、第3引数に終了文字列を指定します。タグが無い場合は空文字または false を返します。
Qカテゴリーとタグを合わせてリンク表示する汎用的な方法は？
Aget_the_terms($post_id, 'category') と get_the_terms($post_id, 'post_tag') でそれぞれ取得し、array_merge() でまとめて foreach で表示する方法があります。カスタムタクソノミーも同様に対応できます。

まとめ

  • カテゴリー：get_the_category_list($separator)
  • タグ：get_the_tag_list($before, $separator, $after)
  • 装飾したい場合：get_the_category()/get_the_tags() ＋ implode() の自前ループ

まずは専用関数の一行で済ませ、装飾が必要になった場合だけ自前ループに切り替えるのが最もシンプルな進め方です。