2026年5月20日

WordPressのパンくずリストをテーマに追加する方法

テーマ・デザイン

はじめに

パンくずリストはユーザーが現在地を把握できるナビゲーションで、SEOにも有効です。Google検索結果にパンくずが表示されるにはschema.org構造化データが必要です。プラグインを使う方法と自作する方法を解説します。

症状・原因

テーマにパンくずリストがない
Google検索でパンくずが表示されない
カスタム投稿タイプのパンくずが正しくない

解決手順

ステップ1：プラグインを使う（最速）

Yoast SEOを使っている場合はテンプレートに1行追加するだけです。

// single.php・page.php・archive.phpなどに追加
<?php
if (function_exists('yoast_breadcrumb')) {
    yoast_breadcrumb('<nav class="breadcrumb" aria-label="パンくずリスト">', '</nav>');
}
?>

Yoast SEOの設定 → 検索の見え方 → パンくず → 「パンくずを有効化する」をオンにします。

RankMathの場合：

<?php rank_math_the_breadcrumbs(); ?>

ステップ2：自作パンくずリスト（プラグインなし）

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

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

    if (is_category() || is_single()) {
        $cats = get_the_category();
        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="' . get_category_link($ancestor_id) . '">'
                    . esc_html($ancestor->name) . '</a>';
            }
            $items[] = '<a href="' . get_category_link($cat->term_id) . '">'
                . esc_html($cat->name) . '</a>';
        }
        if (is_single()) {
            $items[] = '<span aria-current="page">' . esc_html(get_the_title()) . '</span>';
        }
    } elseif (is_page()) {
        $ancestors = array_reverse(get_post_ancestors(get_the_ID()));
        foreach ($ancestors as $ancestor_id) {
            $items[] = '<a href="' . get_permalink($ancestor_id) . '">'
                . esc_html(get_the_title($ancestor_id)) . '</a>';
        }
        $items[] = '<span aria-current="page">' . esc_html(get_the_title()) . '</span>';
    } elseif (is_post_type_archive()) {
        $items[] = '<span aria-current="page">'
            . esc_html(post_type_archive_title('', false)) . '</span>';
    } elseif (is_search()) {
        $items[] = '<span aria-current="page">「'
            . esc_html(get_search_query()) . '」の検索結果</span>';
    }

    echo '<nav class="breadcrumb" aria-label="パンくずリスト">'
        . implode(' &rsaquo; ', $items)
        . '</nav>';
}

ステップ3：schema.org構造化データを付与する

// functions.php
function my_breadcrumb_with_schema(): void {
    if (is_front_page()) return;

    $items   = [];
    $schema  = [];
    $pos     = 1;

    $schema[] = [
        '@type'    => 'ListItem',
        'position' => $pos++,
        'name'     => 'ホーム',
        'item'     => home_url(),
    ];
    $items[] = '<a href="' . home_url() . '">ホーム</a>';

    if (is_single() || is_page()) {
        $schema[] = [
            '@type'    => 'ListItem',
            'position' => $pos,
            'name'     => get_the_title(),
            'item'     => get_permalink(),
        ];
        $items[] = '<span aria-current="page">' . esc_html(get_the_title()) . '</span>';
    }

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

    echo '<script type="application/ld+json">'
        . wp_json_encode($json_ld, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
        . '</script>';

    echo '<nav class="breadcrumb" aria-label="パンくずリスト">'
        . implode(' &rsaquo; ', $items)
        . '</nav>';
}
add_action('wp_head', function() {
    // schema.org JSON-LDをheadに出力する場合はこちら
});

ステップ4：CSSでスタイリング

.breadcrumb {
    font-size: 0.85rem;
    color: #50575e;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}

.breadcrumb a {
    color: #2271b1;
    text-decoration: none;
}

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

.breadcrumb [aria-current="page"] {
    color: #1d2327;
    font-weight: 500;
}

注意事項

Yoast SEO・RankMathを使っている場合は自作とschema.orgが重複しないよう注意
カスタム投稿タイプのパンくずは is_singular('cpt_name') で分岐が必要
schema.orgのBreadcrumbList は Googleが認識するまで数日かかる場合があります

まとめ

プラグインあり：yoast_breadcrumb() または rank_math_the_breadcrumbs() を1行追加。自作の場合は get_ancestors() で親を遡り、schema.orgのBreadcrumbList JSON-LDをセットで出力するとSEO効果が高まります。

Post Views: 15