パンくずリストの最適な作り方｜SEOに強い構造化データ対応

この記事では、WordPressで投稿ページ・固定ページ・カテゴリーページごとに自動でパンくずリストを生成し、SEOに強いサイト構造を作る方法を解説します。テーマごとのデザイン調整や簡易プラグインでの代用方法も紹介します。

1 実装のポイント

• WordPress の関数 get_the_category() や get_post_ancestors() を利用
• 構造化データ（Schema.org）を意識して検索エンジンに正しく認識させる
• テーマによって CSS を調整して、見た目を統一する

2 functions.php にコードを追加

このコードは、投稿ページ・固定ページでパンくずリストを構造化データ（JSON-LD）として出力するPHPコードを紹介します。

//-------------------------------------------
// パンくずリストを生成する関数
//-------------------------------------------
function my_breadcrumb() {
    echo '<nav class="breadcrumb">';
    echo '<a href="' . home_url() . '">ホーム</a> > ';

    if (is_category() || is_single()) {
        $categories = get_the_category();
        if ($categories) {
            $category = $categories[0];
            $parents = get_category_parents($category, true, ' > ');
            echo $parents;
        }
        if (is_single()) {
            echo get_the_title();
        }
    } elseif (is_page()) {
        $parents = get_post_ancestors(get_the_ID());
        if ($parents) {
            $parents = array_reverse($parents);
            foreach ($parents as $parent_id) {
                echo '<a href="' . get_permalink($parent_id) . '">' . get_the_title($parent_id) . '</a> > ';
            }
        }
        echo get_the_title();
    } elseif (is_tag()) {
        echo 'タグ: ' . single_tag_title('', false);
    } elseif (is_search()) {
        echo '検索結果';
    } elseif (is_404()) {
        echo '404ページ';
    }

    echo '</nav>';
}

//-------------------------------------------
// パンくず JSON-LD を出力（トップ・カテゴリ・記事対応）
//-------------------------------------------
function add_breadcrumb_jsonld() {
    if ( is_home() || is_front_page() ) {
        // トップページの場合
        $json_ld = array(
            '@context' => 'https://schema.org',
            '@type' => 'BreadcrumbList',
            'itemListElement' => array(
                array(
                    '@type' => 'ListItem',
                    'position' => 1,
                    'name' => 'ホーム',
                    'item' => esc_url( home_url( '/' ) ),
                ),
            ),
        );

    } elseif ( is_single() ) {
        // 投稿ページの場合
        $categories = get_the_category();
        $cat = $categories ? $categories[0] : false;

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

        if ( $cat ) {
            $items[] = array(
                '@type' => 'ListItem',
                'position' => 2,
                'name' => esc_html( $cat->name ),
                'item' => esc_url( get_category_link( $cat->term_id ) ),
            );
            $pos = 3;
        } else {
            $pos = 2;
        }

        $items[] = array(
            '@type' => 'ListItem',
            'position' => $pos,
            'name' => esc_html( get_the_title() ),
            'item' => esc_url( get_permalink() ),
        );

        $json_ld = array(
            '@context' => 'https://schema.org',
            '@type' => 'BreadcrumbList',
            'itemListElement' => $items,
        );

    } elseif ( is_category() ) {
        // カテゴリーページの場合
        $category = get_queried_object();

        $json_ld = array(
            '@context' => 'https://schema.org',
            '@type' => 'BreadcrumbList',
            'itemListElement' => array(
                array(
                    '@type' => 'ListItem',
                    'position' => 1,
                    'name' => 'ホーム',
                    'item' => esc_url( home_url( '/' ) ),
                ),
                array(
                    '@type' => 'ListItem',
                    'position' => 2,
                    'name' => esc_html( $category->name ),
                    'item' => esc_url( get_category_link( $category->term_id ) ),
                ),
            ),
        );

    } else {
        return;
    }

    // JSON-LD を出力
    echo '';
}
add_action( 'wp_head', 'add_breadcrumb_jsonld' );
    

3 汎用CSS

/* -------------------------
 * パンくずリスト（Breadcrumb）
 * ------------------------- */

.breadcrumb {
    font-size: 0.9em;       /* 文字サイズを少し小さめに */
    margin-bottom: 1em;     /* 下に余白を追加 */
}

.breadcrumb a {
    text-decoration: none;  /* リンクの下線を消す */
    color: #007acc;         /* リンクの文字色を青に */
}

.breadcrumb a:hover {
    text-decoration: underline; /* ホバー時に下線を表示 */
}
    

4 完成イメージ

5 代用プラグイン

自動生成や構造化データ付きで簡単に導入したい場合は以下のプラグインがおすすめです。

• ▶ Breadcrumb NavXT
• ▶ Yoast SEO（パンくず機能あり）

6 まとめ

パンくずリストを自動生成することで、SEOに有利な内部リンク構造を作れます。テーマや表示方法に合わせて CSS を調整したり、必要に応じてプラグインを活用するとさらに便利です。PHP で生成すれば、軽量で管理も簡単です。