カテゴリーページへのリンクを表示する場合、テンプレートタグthe_categoryを使いますが、親子カテゴリーが存在する場合、いくつかの課題が生じることもあります。ここでは、親カテゴリー・子カテゴリーの両方を別々のリンクで表示したり、親カテゴリーのリンクを消す方法などを紹介します。

親カテゴリー・子カテゴリーを別々のリンクで表示したい

親カテゴリー・子カテゴリーを別々のリンクで表示した場合

スポンサーリンク

the_categoryによるカテゴリーリンクの表示

まずは、the_categoryの簡単な使用例を紹介します。single.phpやarchive.phpなどのテンプレートに次のようなコードを入力して、カテゴリーリンクを表示するのが一般的な使い方です。

<?php the_category(); ?>

表示結果の例は次のようになります。

投稿のカテゴリーを表示する

投稿のカテゴリーを表示する

箇条書きで表示したくなければ、the_categoryの第一パラメータでカテゴリーの区切り文字を指定します。以下の例では半角スペースで区切っています。

<?php the_category(' '); ?>

表示結果は次のようになります。

カテゴリーを半角スペースで区切る

カテゴリーを半角スペースで区切る

カテゴリーリンクの規則性を利用してCSSを記述すれば、次のように色分けすることもできます。

カテゴリーリンクを色分けする

カテゴリーリンクを色分けする

カテゴリーリンクを色分けする方法について詳しくは以下のページも参考にしてください。

WordPressでカテゴリーを色分けする

ここからは親子カテゴリーに対処するパターンを紹介していきます。

親カテゴリー・子カテゴリーを別のリンクで表示する

イベント情報カテゴリーの子カテゴリーであるスポーツイベントに属する投稿について考えてみましょう。

イベント情報の子カテゴリー(スポーツイベント)に属する投稿

イベント情報の子カテゴリー(スポーツイベント)に属する投稿

投稿が実際に属する子カテゴリーのリンクだけでなく、親カテゴリーのリンクも別に表示したい場合は、the_categoryの第二パラメータで「multiple」を指定します。

<?php the_category(' ', 'multiple'); ?>

表示結果は次のようになります。

親カテゴリー・子カテゴリー共にリンクで表示する

親カテゴリー・子カテゴリーを別々のリンクで表示する

親カテゴリー・子カテゴリーを1つのリンクで表示する

親カテゴリーと子カテゴリーを1つのリンクで表示する場合はthe_categoryの第二パラメータに「single」を指定します。リンクテキストに親カテゴリーと子カテゴリーがまとめられるので第一パラメータを「/」などにしておくと良いかもしれません。

<?php the_category('/', 'single'); ?>

表示結果は次のようになります。

親カテゴリー・子カテゴリーを1つのリンクで表示

親カテゴリー・子カテゴリーを1つのリンクで表示

リンク先は、投稿が実際に属する子カテゴリーです。

親カテゴリー情報を表示しない

親カテゴリーの情報を表示しない場合は、この第二パラメータを指定しなければ大丈夫です。

<?php the_category(' '); ?>

表示結果は次のようになります。

子カテゴリーの情報のみを表示する

子カテゴリーの情報のみを表示する

親カテゴリーのリンクを消したい(get_the_category)

親カテゴリー・子カテゴリーが共にチェックされている場合、the_categoryでは親カテゴリー・子カテゴリーのリンクが共に表示されます。

チェックに応じて親カテゴリー・子カテゴリーのリンクが表示される

チェックに応じて親カテゴリー・子カテゴリーのリンクが表示される

子カテゴリーのリンクのみを表示したい場合は、get_the_categoryという命令を使います。the_categoryがカテゴリー情報をそのまま表示するのに対してget_the_categoryでは、いったん取り出したカテゴリー情報を加工して表示できます。

これを利用して、「親カテゴリーを持つカテゴリーのみ」という条件を設定すれば、子カテゴリーのみを表示することができます。以下のコード例の7行目あたりがポイントです。「親カテゴリーのIDが入っている場合は」で絞り込んでいます。

<?php
/* 子カテゴリーのみを表示する */
$categories = get_the_category();
foreach ($categories as $category) {
    $cat_name = $category->name;
    $cat_link = esc_url(get_category_link($category->term_id));
    if ($category->parent) {
        echo sprintf("<a href='%s'>%s</a>", $cat_link, $cat_name);
    }
}
?>

表示結果は次のようになります。親カテゴリー・子カテゴリーがチェックされている投稿でも、子カテゴリーのリンクのみが表示されます。

子カテゴリーのみが表示される

子カテゴリーのみが表示される

簡単そうですが、子カテゴリーを持たない親カテゴリーについても表示されなくなるので、このコードを使うときはどのような処理をしたいのか要件を明確にしましょう。

あとは、いろいろと試行錯誤してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
お急ぎの方はWordPressメールサポートもご利用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク