2026年5月20日

WordPressにパンくずリストを実装する方法

テーマ・デザイン

はじめに

パンくずリストはユーザビリティとSEOの両面で重要です。WordPressでは手動実装のほか、Yoast SEOやRankMathのパンくず機能を活用できます。JSON-LD構造化データを追加するとGoogleの検索結果にリッチリザルトが表示されます。

症状・原因

サイトにパンくずリストがない
Yoast SEOのパンくずが表示されない
カスタム投稿タイプでパンくずが正しく表示されない
Googleの検索結果にパンくずが表示されない

解決手順

ステップ1：手動でパンくずリストを実装する

// functions.php — パンくずリスト関数
function my_breadcrumb(): void {
    if (is_front_page()) return;

    $items = [];
    $items[] = ['name' => 'ホーム', 'url' => home_url('/')];

    if (is_category() || is_single()) {
        $cats = get_the_category();
        if ($cats) {
            foreach (get_ancestors($cats[0]->term_id, 'category') as $ancestor_id) {
                $cat = get_category($ancestor_id);
                $items[] = ['name' => $cat->name, 'url' => get_category_link($ancestor_id)];
            }
            $items[] = ['name' => $cats[0]->name, 'url' => get_category_link($cats[0]->term_id)];
        }
        if (is_single()) {
            $items[] = ['name' => get_the_title(), 'url' => ''];
        }
    } elseif (is_page()) {
        foreach (array_reverse(get_post_ancestors(get_the_ID())) as $ancestor_id) {
            $items[] = ['name' => get_the_title($ancestor_id), 'url' => get_permalink($ancestor_id)];
        }
        $items[] = ['name' => get_the_title(), 'url' => ''];
    } elseif (is_search()) {
        $items[] = ['name' => '検索結果: ' . get_search_query(), 'url' => ''];
    } elseif (is_404()) {
        $items[] = ['name' => 'ページが見つかりません', 'url' => ''];
    }

    echo '<nav class="breadcrumb" aria-label="パンくずリスト"><ol itemscope itemtype="https://schema.org/BreadcrumbList">';
    foreach ($items as $i => $item) {
        $position = $i + 1;
        echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">';
        if ($item['url']) {
            echo '<a itemprop="item" href="' . esc_url($item['url']) . '">';
            echo '<span itemprop="name">' . esc_html($item['name']) . '</span></a>';
        } else {
            echo '<span itemprop="name">' . esc_html($item['name']) . '</span>';
        }
        echo '<meta itemprop="position" content="' . $position . '">';
        echo '</li>';
    }
    echo '</ol></nav>';
}

// テンプレートで呼び出す（single.php, page.php, archive.php など）
<?php my_breadcrumb(); ?>

ステップ2：Yoast SEOのパンくずを使う

// functions.php — Yoast SEOのパンくずを有効化
add_action('after_setup_theme', function(): void {
    add_theme_support('yoast-seo-breadcrumbs');
});

// テンプレートで表示
<?php
if (function_exists('yoast_breadcrumb')) {
    yoast_breadcrumb('<nav class="breadcrumb" aria-label="パンくずリスト">', '</nav>');
}
?>

Yoast SEO 管理画面設定:
SEO → 検索の外観 → パンくずナビゲーション
→「パンくずナビゲーションを有効化」をON
→ セパレーター・ホームアンカーテキストを設定

ステップ3：CSSでスタイルを設定する

/* パンくずリストのスタイル */
.breadcrumb {
    font-size: 0.875rem;
    color: var(--text-muted, #50575e);
    margin-bottom: 24px;
}

.breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.breadcrumb li + li::before {
    content: '›';
    margin-right: 4px;
    color: var(--border-color, #c3c4c7);
}

.breadcrumb a {
    color: var(--link-color, #2271b1);
    text-decoration: none;
}

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

/* 最後の要素（現在ページ）はリンクなし */
.breadcrumb li:last-child {
    color: var(--text-muted, #50575e);
    pointer-events: none;
}

ステップ4：JSON-LD 構造化データを追加する

// functions.php — パンくずの JSON-LD を wp_head に出力
add_action('wp_head', function(): void {
    if (is_front_page()) return;

    $items = [];
    $items[] = ['name' => 'ホーム', 'url' => home_url('/')];

    if (is_single() || is_page()) {
        if (is_single()) {
            $cats = get_the_category();
            if ($cats) {
                $items[] = ['name' => $cats[0]->name, 'url' => get_category_link($cats[0]->term_id)];
            }
        }
        $items[] = ['name' => get_the_title(), 'url' => get_permalink()];
    }

    $list_items = [];
    foreach ($items as $i => $item) {
        $list_items[] = [
            '@type'    => 'ListItem',
            'position' => $i + 1,
            'name'     => $item['name'],
            'item'     => $item['url'],
        ];
    }

    $json = json_encode([
        '@context'        => 'https://schema.org',
        '@type'           => 'BreadcrumbList',
        'itemListElement' => $list_items,
    ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

    echo '<script type="application/ld+json">' . $json . '</script>' . PHP_EOL;
});

注意事項

Yoast SEOやRankMathを使用している場合、これらのプラグインがJSON-LD構造化データを自動出力します。手動実装と重複しないよう注意してください
get_the_category() は標準投稿にのみ使用できます。カスタム投稿タイプでは get_the_terms() を使ってください
パンくずリストの表示にはCSS display: flex が推奨ですが、Internet Explorer 11対応が必要な場合は inline-block に変更してください

まとめ

パンくずリストは schema.org/BreadcrumbList マークアップを含む

yoast_breadcrumb()

Post Views: 15