2026年5月20日

WordPressのパンくずリストを設定する方法（コード・プラグイン両対応）

エラー・白い画面

はじめに

パンくずリストはユーザーがサイト内の現在位置を把握するためのナビゲーションで、SEO的にも重要です。GoogleはBreadcrumbListの構造化データを認識し、検索結果にパンくずを表示します。WordPressへの実装方法を複数の方法で解説します。

実装方法の選択肢

| 方法 | 難易度 | 構造化データ | 特徴 |

|------|--------|------------|------|

| Yoast SEO | 簡単 | 自動 | 設定のみ |

| Rank Math | 簡単 | 自動 | 設定のみ |

| breadcrumb-navxt | 普通 | 対応 | 細かくカスタマイズ可 |

| 手動実装 | 難しい | 手動 | 完全制御 |

解決手順

方法1：Yoast SEOで有効化する（最も簡単）

Yoast SEO → 外観 → パンくずリスト → 「パンくずナビを有効にする」をONにします。

テーマのテンプレートに以下を追加：

// single.php や page.php に追加
if (function_exists('yoast_breadcrumb')) {
    yoast_breadcrumb('<nav class="breadcrumb">', '</nav>');
}

方法2：手動でパンくずリストを実装する

// functions.php
function my_breadcrumb() {
    if (is_front_page()) return;

    $items = [];
    $items[] = '<a href="' . esc_url(home_url('/')) . '">ホーム</a>';

    if (is_category() || is_single()) {
        $cats = is_single()
            ? get_the_category()
            : [get_queried_object()];

        if ($cats) {
            $cat = $cats[0];
            // 親カテゴリを遡る
            $ancestors = array_reverse(
                get_ancestors($cat->term_id, 'category')
            );
            foreach ($ancestors as $ancestor_id) {
                $ancestor = get_category($ancestor_id);
                $items[] = '<a href="' . esc_url(get_category_link($ancestor_id))
                         . '">' . esc_html($ancestor->name) . '</a>';
            }
            $items[] = '<a href="' . esc_url(get_category_link($cat->term_id))
                     . '">' . esc_html($cat->name) . '</a>';
        }
    }

    if (is_single() || is_page()) {
        $items[] = '<span>' . esc_html(get_the_title()) . '</span>';
    }

    echo '<nav class="breadcrumb">'
         . implode(' &rsaquo; ', $items)
         . '</nav>';
}

方法3：JSON-LD構造化データも合わせて出力

function my_breadcrumb_schema() {
    if (is_front_page() || !is_singular()) return;

    $items = [
        ['@type' => 'ListItem', 'position' => 1,
         'name'  => 'ホーム', 'item' => home_url('/')]
    ];

    $cats = get_the_category();
    if ($cats) {
        $items[] = [
            '@type'    => 'ListItem',
            'position' => 2,
            'name'     => $cats[0]->name,
            'item'     => get_category_link($cats[0]->term_id),
        ];
    }

    $items[] = [
        '@type'    => 'ListItem',
        'position' => count($items) + 1,
        'name'     => get_the_title(),
        'item'     => get_permalink(),
    ];

    $schema = [
        '@context'        => 'https://schema.org',
        '@type'           => 'BreadcrumbList',
        'itemListElement' => $items,
    ];

    echo '<script type="application/ld+json">'
         . wp_json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
         . '</script>' . "\n";
}
add_action('wp_head', 'my_breadcrumb_schema');

CSSでパンくずをスタイリング

.breadcrumb {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 1rem;
}
.breadcrumb a {
    color: #0073aa;
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}

注意事項

カスタム投稿タイプやカスタムタクソノミーには対応を追加で実装する必要があります
Yoast SEOを使用中に手動実装も行うと構造化データが重複します（どちらか一方に統一）
パンくずはテーマのloop内ではなく、ヘッダー直下や記事タイトルの上に配置するのが一般的です

まとめ

最も手軽なのはYoast SEOのパンくず機能を有効化する方法です。カスタマイズが必要な場合は手動実装で my_breadcrumb() 関数を作り、JSON-LD構造化データを合わせて出力することでGoogleのリッチリザルトにも対応できます。

Post Views: 17