WordPressカテゴリー取得術！1つだけ・複数を使い分ける実装コード

さて、WordPressで記事一覧や詳細ページを作っていると、「カテゴリーをどう出すか」で悩む場面がよくあります。「1つだけ目立たせたい」時もあれば、「設定されているジャンルを全部見せたい」時もありますよね。今回は、その両方を解決する実装方法を現場視点で解説します！

1. 【個別指定】カテゴリーを最初の一つだけ表示する

記事一覧のカードデザインなど、スペースが限られている場合は「最初の一つだけ」を表示するのが一般的です。

実装コード

get_the_category() は配列でデータを返してくれます。その0番目（インデックス[0]）を指定することで、一つ目を取り出せます。

$categories = get_the_category();
if ( $categories ) {
    // esc_htmlでエスケープ処理を忘れずに！
    echo '<span class="cat-label-single">' . esc_html( $categories[0]->name ) . '</span>';
}

2. 【複数取得】カテゴリーを全てループで表示する

記事詳細ページの下部や、複数のジャンルにまたがる情報をしっかり伝えたい場合は、設定されている全てをタグ形式で出力します。

実装コード（foreachループ）

配列の中身を一つずつ取り出すには foreach ループを使います。これが最も確実で、カテゴリーの数が変動しても柔軟に対応できます。

$categories = get_the_category();
if ( $categories ) {
    echo '<div class="cat-label-wrap">';
    foreach ( $categories as $category ) {
        // 各カテゴリーへのリンクも取得する場合
        $cat_link = get_category_link( $category->term_id );
        echo '<a href="' . esc_url( $cat_link ) . '" class="cat-label-tag">' . esc_html( $category->name ) . '</a>';
    }
    echo '</div>';
}

また、サブループ内で特定のカテゴリーを抽出したい場合は、ループ自体の仕組みを理解しておくとデバッグがスムーズになります。
参考：メインループとサブループの違いを徹底解説！自作テーマでハマらないための基礎知識

3. 複数表示を綺麗に整える！CSSの「gap」活用術

カテゴリーを複数並べると、タグ同士がくっつきすぎて見栄えが悪くなることがあります。そんな時は、Flexboxの gap プロパティを使うのが現場のトレンドです。

/* 親要素に指定するだけ！ */
.cat-label-wrap {
    display: flex;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 8px 12px;   /* 上下に8px、左右に12pxの隙間 */
}

特にスマホ表示でのラベルの重なりは、メディアクエリで微調整するとさらに品質が上がります。
参考：【2026年版】PCから組むメディアクエリ。実務で迷わないブレイクポイントとmax-width活用術

4. デザインで使い分け！カンマ（, ）で区切る2つの方法

「タグっぽくしたくない、テキストとしてカンマで区切りたい」というリクエストも実務では多いです。これには「PHPでやる方法」と「CSSでやる方法」の2大パターンがあります。

パターンA：PHPの implode を使う（リンクなし・シンプル）

名前だけを連結して表示したい場合は、PHPの implode() 関数が最強に楽です。配列を特定の文字で繋いでくれます。

$categories = get_the_category();
if ( $categories ) {
    $cat_names = array();
    foreach ( $categories as $category ) {
        $cat_names[] = esc_html( $category->name );
    }
    // 配列を「, 」で繋いで出力
    echo '<p class="cat-comma-text">' . implode( ', ', $cat_names ) . '</p>';
}

パターンB：CSSの疑似要素を使う（リンクありに最適）

各カテゴリーにリンクを貼りたい場合は、CSSの ::after を使うのがスマートです。HTMLを汚さずに「最後以外にカンマを付ける」という制御ができます。

/* 最後の要素以外にだけカンマを付与 */
.cat-label-tag:not(:last-child)::after {
    content: ", ";
    margin-right: 4px;
    color: #888; /* カンマの色だけ薄くするのもオシャレ */
}

もし、カテゴリーごとにカスタムフィールドで色指定などを管理している場合は、SCFと組み合わせるとさらに柔軟な実装が可能です。
参考：Smart Custom Fields（SCF）の出力方法まとめ｜コピペOKな実務用コード集

5. 現場での使い分け：どちらを選ぶべき？

どちらの実装を選ぶべきか、現場での判断基準をまとめました。迷った時の参考にしてください。

まとめ：用途に合わせた出し分けでUXを向上

カテゴリー取得は基本中の基本ですが、[0]の個別指定とforeachの複数処理を理解しておくだけで、サイトの表現力は格段に上がります。ユーザーにとって「今、何の情報を読んでいるのか」を直感的に伝える工夫を、ぜひあなたのサイトにも取り入れてみてください。

岐阜の静かな夜、シラフの頭でコードを整理していると、こうした細かい出し分けがサイトの「信頼感」に繋がるのだと再確認させられます。実装で迷ったら、いつでもこの記事を読み返しに来てくださいね！