WordPressでカテゴリを基にしたパンくずリストを作成する方法

WordPressの single.php に、カテゴリを基にしたパンくずリストを自作する方法をまとめました。
今回は、以下の URL 形式に対応するパンくずリストを作成します。

http://test.local/blog/?tab_main=news

このURLでは、tab_main に最初のカテゴリ、tab_sub に2番目のカテゴリを設定します。
最初のカテゴリを押下した場合は tab_sub=all になり、2番目のカテゴリを押下した場合は tab_main が最初のカテゴリ、tab_sub が2番目のカテゴリになります。

1. パンくずリストのHTML構造

まず、single.php に以下のコードを追加します。

<div class="breadcrumb">
    <a href="<?php echo home_url(); ?>">ホーム</a> &gt;

    <?php
    $categories = get_the_category();
    
    if ($categories) {
        $tab_main = isset($categories[0]) ? $categories[0]->slug : '';
        $tab_main_name = isset($categories[0]) ? $categories[0]->name : '';

        // カテゴリのURLを作成
        $tab_main_url = home_url('/blog/') . "?tab_main={$tab_main}";

        echo '<a href="' . esc_url($tab_main_url) . '">' . esc_html($tab_main_name) . '</a>';
    }

    // 記事タイトル
    echo " &gt; <span>" . get_the_title() . "</span>";
    ?>
</div>

2. コードの説明

1. get_the_category() を使用して記事のカテゴリを取得します。

2. $categories[0] を取得し、スラッグを tab_main のパラメータに設定します。

3. home_url('/blog/') を基に tab_main を含むURLを作成します。

4. パンくずリストとして、カテゴリと記事タイトルを表示します。

3. 出力例

例 1: 記事が「ニュース」カテゴリの場合

<a href="http://test.local/blog/?tab_main=news">ニュース</a> > 記事タイトル

例 2: 記事が「イベント」カテゴリの場合

<a href="http://test.local/blog/?tab_main=event">イベント</a> > 記事タイトル

4. カスタマイズ

区切りを / に変更

echo " / ";

CSS でデザイン調整

.breadcrumb {
    font-size: 14px;
    color: #666;
}

.breadcrumb a {
    text-decoration: none;
    color: #0073aa;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

まとめ

この方法を使うことで、WordPress のカテゴリを基にした URL 形式のパンくずリストを簡単に作成できます。
備忘録として活用し、必要に応じてカスタマイズしてください！