WordPress専門の改善サービス|お見積もり対応 / 月額契約なし|全国対応

WordPressにパンくずリストを設置する方法(プラグイン・自作)

WordPressにパンくずリストを設置する方法(プラグイン・自作)のイメージ

パンくずリストは、サイト内の現在位置を階層的に示すナビゲーションで、ユーザーの利便性と検索エンジン側の理解度の双方を向上させる重要な要素です。本記事では、WordPressにパンくずリストを設置する3つの方法を、メリット・デメリットも含めて整理いたします。

この記事でわかること

  • パンくずリストを設置するメリット(SEO・UX両面)
  • プラグインで導入する場合の推奨選択肢
  • テーマに自作で実装する場合の基本コード
  • 構造化データ(JSON-LD)の実装と検索結果への影響
  • 設置後に確認すべきポイント

目次

  1. パンくずリストとは何か
  2. 設置するメリット
  3. 方法1:プラグインで導入する
  4. 方法2:テーマに自作で実装する
  5. 方法3:テーマ機能・既存ヘルパーを使う
  6. 構造化データ(JSON-LD)の実装
  7. 設置後の確認ポイント
  8. 関連事例としての学び
  9. まとめ

パンくずリストとは何か

パンくずリストは、現在閲覧しているページがサイト構造のどこに位置するかを、階層順にリンクで表示するナビゲーションです。たとえば次のように表示されます。

ホーム > お役立ち情報 > WordPress セキュリティ > XML-RPCを安全に無効化する方法

名前の由来は、童話「ヘンゼルとグレーテル」で森に道しるべとして落とされたパンくずに似ていることからきています。閲覧者が現在地を把握し、ひとつ上の階層に戻りやすくする役割を持っています。

設置するメリット

ユーザビリティ向上

記事を検索結果からピンポイントに訪れた閲覧者にとって、現在位置を把握する手段は限られています。パンくずリストがあれば、「このサイトの中で、自分はどこにいるか」が一目で分かるため、関連するカテゴリページや上位階層への遷移がしやすくなります。

SEO上の効果

検索エンジン(特にGoogle)は、サイト構造の理解にパンくずリストを参考にしています。構造化データ付きのパンくずリストを設置すると、検索結果の表示にもパンくずが反映される場合があり、クリック率の改善が期待できます。また、内部リンクとしても機能するため、サイト内の重要ページへのリンクパワーが流れやすくなります。

サイト全体の整理にもつながる

パンくずリストを正しく設置するには、サイトのカテゴリ構造を整理する必要があります。結果的に、サイト全体の情報設計を見直すきっかけになることもメリットです。

方法1:プラグインで導入する

最も手軽で導入しやすいのが、プラグインを使う方法です。コードに触れることなく、構造化データまで含めた正しい実装が可能でございます。

推奨プラグイン

  • Breadcrumb NavXT:歴史が長く、設定項目が豊富。日本語のカテゴリ・タグにも安定して対応
  • Yoast SEO:SEOプラグインの一部としてパンくず機能を内蔵。Yoastを既に導入されている場合は追加プラグイン不要
  • Rank Math SEO:Yoastと同様、SEOプラグインの一部としてパンくず機能を提供

Breadcrumb NavXTの設置例

プラグインをインストール・有効化したのち、テーマのheader.phpまたは個別テンプレートに次のショートコードを追加することで表示されます。

<?php if (function_exists('bcn_display')) {
    bcn_display();
} ?>

表示位置やセパレーター文字(「>」「/」など)は、管理画面の「Settings → Breadcrumb NavXT」から細かく設定できます。日本語サイトの場合、「>」よりも「>」(全角)のほうが視認性が良いことが多くございます。

方法2:テーマに自作で実装する

プラグインに依存したくない場合や、テーマのデザインに合わせた細かな調整が必要な場合は、自作で実装する方法もございます。

基本コード

テーマのfunctions.phpに次のような関数を追加し、表示したいテンプレートで呼び出します。

function my_breadcrumb() {
    echo '<nav class="breadcrumb" aria-label="パンくずリスト">';
    echo '<ol>';
    echo '<li><a href="' . esc_url(home_url('/')) . '">ホーム</a></li>';

    if (is_single()) {
        $cats = get_the_category();
        if ($cats) {
            echo '<li><a href="' . esc_url(get_category_link($cats[0]->term_id)) . '">' . esc_html($cats[0]->name) . '</a></li>';
        }
        echo '<li>' . esc_html(get_the_title()) . '</li>';
    } elseif (is_category()) {
        echo '<li>' . single_cat_title('', false) . '</li>';
    } elseif (is_page()) {
        echo '<li>' . esc_html(get_the_title()) . '</li>';
    }

    echo '</ol>';
    echo '</nav>';
}

テンプレート(single.php等)の表示したい位置で次のように呼び出します。

<?php if (function_exists('my_breadcrumb')) my_breadcrumb(); ?>

自作のメリットと注意点

自作の最大のメリットは、テーマと一体化したデザインに統合できることです。CSSも自由に書けるため、装飾の自由度も高くなります。一方、カスタム投稿タイプやカスタムタクソノミーへの対応、サブカテゴリの階層表示など、要件が複雑になるとコードも長くなりがちです。

初期実装はシンプルでも、サイトが成長するに伴って分岐条件が増えていく傾向があるため、長期的にはプラグインに委ねた方が保守性が高いケースもございます。

方法3:テーマ機能・既存ヘルパーを使う

多くの日本製テーマには、パンくずリスト表示用のヘルパー関数があらかじめ用意されています。たとえば、Lightning、Snow Monkey、SWELL、Cocoon等の主要テーマでは、テーマ設定の有効化のみでパンくずリストが表示できる場合がございます。

ご利用中のテーマに既にヘルパー機能がある場合、それを利用するのが最も保守性が高い選択肢でございます。テーマのドキュメントで「breadcrumb」「パンくず」のキーワードで確認してみてください。

構造化データ(JSON-LD)の実装

パンくずリストの表示と同時に、検索エンジン向けの構造化データ(JSON-LD)を実装することで、Googleの検索結果ページにパンくずが表示される確率が高まります。

JSON-LDの基本形

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "ホーム",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "お役立ち情報",
      "item": "https://example.com/blog/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "現在のページ"
    }
  ]
}
</script>

最後の項目(現在ページ)にはitemプロパティを含めないのが原則です。Google検索セントラルの公式ドキュメントでも、この形式が推奨されています。

プラグインを利用する場合、Breadcrumb NavXTやYoast SEOは構造化データの出力にも対応しているため、特別な実装は不要でございます。自作する場合は、上記コードをwp_headフックで動的に出力する形になります。

設置後の確認ポイント

① 表示崩れがないか

主要ページ(トップ・記事詳細・カテゴリページ・固定ページ)で、それぞれパンくずが意図通りに表示されているかを確認します。カスタム投稿タイプやカスタムタクソノミーで分岐が漏れているケースが頻発するため、すべてのページタイプで確認することが大切です。

② 構造化データの妥当性

Google提供の「リッチリザルトテスト」(https://search.google.com/test/rich-results)に対象ページのURLを入力し、エラーが出ないかを確認します。「BreadcrumbList」が認識されていれば成功です。

③ Search Console での反映

構造化データを設置してから数日〜数週間後、Search Consoleの「拡張 → パンくずリスト」レポートに対象ページがカウントされるようになります。エラーや警告が出ていないかを確認してください。

関連事例としての学び

弊社が支援しているクライアントサイトで、パンくずリストを設置したものの、検索結果に反映されないというご相談を受けたことがございました。調査の結果、JSON-LDのitemプロパティに記載されたURLが、絶対URLではなく相対URL(/blog/)になっていたことが原因でした。

Googleの仕様では、構造化データ内のURLは必ず絶対URL(https://から始まる完全な形)で記述する必要があります。テーマ内でJSON-LDを動的生成していたコードにhome_url()を呼ぶ修正を加えることで、その後数週間で検索結果にパンくずが表示されるようになりました。

このようなSEO関連の実装は、表示は正しく見えても検索エンジン側で正しく認識されていないというパターンが少なくありません。リッチリザルトテストとSearch Consoleの両方で確認する習慣をつけることが、確実な実装につながります。

まとめ

WordPressにパンくずリストを設置する方法は、プラグイン・自作・テーマ内蔵機能の3パターンに整理できます。それぞれの特徴を簡単にまとめますと次の通りでございます。

  • プラグイン:手軽、構造化データも対応、テーマに依存しない(推奨)
  • 自作:自由度が最も高い、テーマと一体化、ただし保守性に注意
  • テーマ内蔵機能:最も簡単、テーマに依存するが保守は不要

導入後は、構造化データの妥当性チェックと、Search Consoleでの認識状況の確認をお忘れなく実施ください。設置自体は数分から数時間で完了する施策ですが、SEOとUXの双方に効果のある重要な実装でございます。

このようなお困りごとはありませんか?

WordPressのトラブル・改善・保守は、専門エンジニアが対応します。
調査(一律20,000円・税込)から承ります。費用感だけのご相談も歓迎です。

無料相談はこちら

この記事をシェアする

Contact Us お問い合わせ 無理な営業はいたしません。
まずは現状診断のみでも、お気軽にご相談ください。
WordPressの悩みを無料相談
お問い合わせ対応チームのイラスト
PAGE TOP