【 更新 】おすすめ記事はこちら

WordPress

【WordPress】リンク付きカテゴリを表示する

サイドバーや投稿一覧にあるリンク付きのカテゴリ表示。便利ですよね。

ワンクリックで目的のジャンルを見に行かれるので、サイトの種類問わずよく見かけます。

以下ではリンクなしのカテゴリラベルを設置しましたが、本記事ではリンクを付けて出力！

関連記事【WordPress】色分けしたカテゴリラベルを作る

表示数に応じて、1つだけカテゴリを設置、2つ以上カテゴリを設置の内容をご覧ください。

はじめに

表示するカテゴリが1つでも、2つ以上でも共通してカテゴリ情報の取得が必要です。

カテゴリ情報を取得

最初にget_the_category()で全カテゴリ情報を取得。内容は「配列」で返ってきます。

取得した情報を、変数$catに入れて保存。

<?php
$cat = get_the_category();
?>

カテゴリを複数表示するなら、categoriesの省略形$catsにすると分かりやすいですよ！

1つだけカテゴリを設置

今回はサイドバーや投稿一覧に設置することを想定して、以下ループ内に書いていきます。

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <!-- 繰り返し処理する内容 -->
    <?php endwhile; ?>
<?php else: ?>
    <!-- 取得できない場合に処理する内容 -->
<?php endif; ?>

まずは先に完成形から。詳細はこれより後の見出しで解説するので、別途ご確認ください。

<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<span>
    <a href="<?php echo esc_url(get_category_link($cat_id)); ?>">
        <?php echo esc_html($cat_name); ?>
    </a>
</span>

カテゴリ名とIDを取得

$catで取得したカテゴリ情報から、カテゴリ名とIDを取得していきます。

それぞれ$catに配列の1番目[0]を指定し、name、cat_IDを取り出します。

<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID; // 追加
$cat_name = $cat[0] -> name; // 追加
?>

取得したものは、カテゴリ名なら$cat_nameに、IDなら$cat_idに代入すればOK。

get_category_linkで表示

リンク付きで表示するので、<a>タグのhref属性にコードを書き加えます。

先ほど取得した$cat_idを、get_category_link()に入れてカテゴリリンクを出力。

<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<a href="<?php echo esc_url(get_category_link($cat_id)); ?>"></a><!-- 追加 -->

このとき<a>タグで$cat_nameを囲むことで、リンク付きのカテゴリ名を表示します。

<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<a href="<?php echo esc_url(get_category_link($cat_id)); ?>">
    <?php echo esc_html($cat_name); ?><!-- 追加 -->
</a>

最後に任意で、CSSを適用しやすいよう<span>などで囲んでパーツ化しておきます。

<?php
$cat = get_the_category();
$cat_id = $cat[0] -> cat_ID;
$cat_name = $cat[0] -> name;
?>
<span>
    <a href="<?php echo esc_url(get_category_link($cat_id)); ?>">
        <?php echo esc_html($cat_name); ?>
    </a>
</span>

2つ以上カテゴリを設置

今回はサイドバーや投稿一覧に設置することを想定して、以下ループ内に書いていきます。

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <!-- 繰り返し処理する内容 -->
    <?php endwhile; ?>
<?php else: ?>
    <!-- 取得できない場合に処理する内容 -->
<?php endif; ?>

まずは先に完成形から。詳細はこれより後の見出しで解説するので、別途ご確認ください。

<ul>
    <?php
    $cats = get_the_category();
    $cats_id = '';
    $cats_name = '';
    foreach ($cats as $cat) :
        $cats_id = $cat -> cat_ID;
        $cats_name = $cat -> name;
    ?>
        <li>
            <span>
                <a href="<?php echo esc_url(get_category_link($cats_id)); ?>">
                    <?php echo esc_html($cats_name); ?>
                </a>
            </span>
        </li>
    <?php endforeach; ?>
</ul>

カテゴリ名とIDを取得

$catsで取得したカテゴリ情報から、カテゴリ名とIDを取得していきます。

1つだけ設置する場合と違い、カテゴリを繰り返し入れられるように空っぽの変数を用意。

<?php
$cats = get_the_category();
$cats_id = ''; // 追加
$cats_name = ''; // 追加
?>

foreachのカッコには$catsの情報を1つずつ$catで取り出す処理を、コロンの後ろには処理内容を記述します。

今回はカテゴリの数だけカテゴリ名とIDが必要なので、$catからcat_IDとnameを取得。

<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) : // 追加
    $cats_id = $cat -> cat_ID; // 追加
    $cats_name = $cat -> name; // 追加
?>
<?php endforeach; ?> // 追加

最後にendforeachを追記して、foreachの処理を終えます。終了宣言を忘れずに！

get_category_linkで表示

リンク付きで表示するので、<a>タグのhref属性にコードを入れていきます。

カテゴリリンクを取得するget_category_link()に、必須パラメータ$cats_idを記述。

<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) :
    $cats_id = $cat -> cat_ID;
    $cats_name = $cat -> name;
?>
    <a href="<?php echo esc_url(get_category_link($cats_id)); ?>"></a><!-- 追加 -->
<?php endforeach; ?>

このままではリンクが押せないので、$cats_nameをechoしてカテゴリ名を表示します。

<?php
$cats = get_the_category();
$cats_id = '';
$cats_name = '';
foreach ($cats as $cat) :
    $cats_id = $cat -> cat_ID;
    $cats_name = $cat -> name;
?>
    <a href="<?php echo esc_url(get_category_link($cats_id)); ?>">
        <?php echo esc_html($cats_name); ?><!-- 追加 -->
    </a>
<?php endforeach; ?>

最後に任意で、CSSを適用しやすいよう<span>などで囲んでパーツ化しておきます。

<ul>
    <?php
    $cats = get_the_category();
    $cats_id = '';
    $cats_name = '';
    foreach ($cats as $cat) :
        $cats_id = $cat -> cat_ID;
        $cats_name = $cat -> name;
    ?>
        <li>
            <span>
                <a href="<?php echo esc_url(get_category_link($cats_id)); ?>">
                    <?php echo esc_html($cats_name); ?>
                </a>
            </span>
        </li>
    <?php endforeach; ?>
</ul>

おわりに

紹介した方法ならHTMLの変更が簡単なので、リンクをアレンジしたいときは特におすすめ。

とにかく表示できればいい、カスタマイズの予定がないということであれば、以下方法でもリンク付きのカテゴリを表示できます。

<?php echo get_the_category_list(); ?>
<?php echo the_category(); ?>

出力されたコードを見比べて、どの関数が自分のケースに適しているか確認してみてください。