はじめに
「パンくずリスト」という言葉を聞いたことがありますか？パンくずリストは、サイト訪問者が今どのページにいるかを分かりやすく示す案内表示です。本ガイドは、WordPressサイトでパンくずリストを導入・設定する方法を、初心者にも分かりやすく解説します。
ここで扱うこと
- パンくずリストの役割とユーザーへのメリット
- WordPressでの具体的な追加方法（テーマ機能、プラグイン、カスタムコード）
- 見た目の調整や注意点、不要な場合の非表示方法
なぜ重要か
パンくずリストは訪問者の迷子を防ぎ、サイト内の回遊性を高めます。また、検索エンジンにも構造を伝えやすくなり、SEO対策にも役立ちます。例えば、記事→カテゴリ→トップページという流れが一目で分かると、訪問者は他の関連記事へ移動しやすくなります。
この記事は実践にすぐ使える手順を重視します。まずは基本の考え方を押さえてから、実際の設定に進んでいきましょう。
パンくずリストとは？その役割とメリット
パンくずリストとは
パンくずリストは、ページ上部などに表示される階層リンクです。よくある表記は「ホーム > カテゴリ > 記事名」のような形です。訪問者が現在どの位置にいるかを一目で把握できます。
主な役割
- サイトの構造を可視化し、迷子を防ぎます。
- 上位ページへ簡単に戻れるので操作が分かりやすくなります。
ユーザーに対するメリット
- 回遊性が高まり、別ページへの移動を促します。例：ECサイトなら「ホーム > メンズ > 靴 > スニーカー」と表示されると、他のカテゴリに移りやすくなります。
- ページの文脈が分かり、直帰率の低減につながります。
SEOに対するメリット
- 検索エンジンがサイト構造を理解しやすくなり、インデックスが改善します。
- 構造化データを併用すると検索結果にパンくずが表示される場合があり、クリック率の向上が期待できます。
注意点（簡単に）
- 正確な階層を示すことが重要です。誤った表示は逆効果になります。
WordPressでパンくずリストを追加・設定する4つの方法
WordPressでパンくずリストを導入する方法は主に4つあります。用途やスキルに合わせて選べます。
1) パンくず対応テーマを使う
AFFINGERやSWELLなど、最初からパンくず機能を持つテーマがあります。手順は「外観→カスタマイズ」やテーマのオプション画面で「パンくずを有効化」を選ぶだけです。コード編集不要で手早く導入できますが、細かな表示はテーマに依存します。
2) プラグインを使う
代表例はYoast SEO（Search Appearance→Breadcrumbsで有効化）やBreadcrumb NavXTです。手順は「プラグイン→新規追加」で検索・インストール→有効化→設定画面で表示方法を調整します。テンプレートに挿入する場合は、テーマの表示箇所に指定のPHPタグを置くか、ショートコードやウィジェットで表示します。テーマを替えても設定を維持しやすい利点があります。
3) カスタムコードで追加する
独自の見た目や構造を重視する場合に向きます。子テーマを作成し、functions.phpにパンくず関数を追加して、header.phpやsingle.phpなどに呼び出しコードを置きます。子テーマを使うと、テーマ更新で上書きされる心配が減ります。
4) 非対応テーマの対応法
テーマに機能がない場合は、プラグイン導入かカスタムコード追加が基本です。まず公式ドキュメントや「外観→カスタマイズ」を確認し、表示位置やスタイルが崩れるならCSSで調整します。どの方法でも、構造化データ（検索結果表示に関わるタグ）の対応を確認すると効果的です。
パンくずリストのカスタマイズと注意点
デザイン（CSS）で見た目を整える
パンくずリストの見た目はCSSで自由に変えられます。よく使うのはフォントサイズ、色、区切り（「>」「/」など）の調整、リンクのホバー効果です。プラグインやテーマでクラス名が異なるため、ブラウザの検証ツール（開発者ツール）で実際のクラスを確認してからスタイルを当ててください。例：「.breadcrumb」「.yoast-breadcrumb」など。
表示位置の変更
表示位置はテンプレートファイル内のパンくずを出力するコードを移動するだけで変更できます。たとえばheader.php、single.php、page.phpの中で出力部分を移し替えると、見出しの上や下、サイドバー付近など希望の場所に表示できます。子テーマを使って直接編集することをおすすめします。
SEOのための構造化データ
検索結果でリッチに表示させたいなら、Schema.orgのBreadcrumbListに対応する出力を選びます。多くのプラグインは自動でJSON‑LDやマイクロデータを出力しますが、手動で追加する場合は正しい階層とURLを記述してください。変更後はGoogleのリッチリザルトテストで確認します。
アクセシビリティと実用上の注意点
nav要素にaria-labelを付け、現在のページはaria-current=”page”で示してください。パンくずが重複したりリンクが正しくないとユーザーも検索エンジンも混乱します。モバイルでは表示を短くするか省略表示にして、見やすさを優先してください。
パンくずリストを非表示・削除する方法
はじめに
パンくずリストを一時的に見えなくしたい場合や、完全に取り除きたい場合があります。ここでは、簡単な方法から確実に消す方法まで順に説明します。初心者でもできる手順を中心に紹介します。
1. 管理画面の設定でオフにする
多くのテーマやプラグインは設定で表示・非表示を切り替えられます。例：
– テーマの「外観」→「カスタマイズ」→「レイアウト」などでオフ
– Yoast SEOなら「SEO」→「検索での見え方（Search Appearance）」→「パンくずリスト」をオフ
まずはここを確認してください。
2. プラグインのオプションで非表示
Breadcrumb NavXTなどの専用プラグインは、プラグイン設定で無効にできます。無効にすると、テーマに埋め込まれていなければ完全に消えます。
3. CSSで見た目だけ非表示にする
テーマ編集が不安な場合はCSSで隠します。外観→カスタマイズ→追加CSSに次を追加します：
.breadcrumb, .breadcrumbs {display: none;}
この方法は見た目だけ隠すので、HTMLや構造化データは残る点に注意してください。
4. テンプレートから該当コードを削除（完全に消す）
根本的に消すにはテーマファイル（breadcrumb.php、single.php、header.phpなど）からパンくずを出力する関数（例：yoast_breadcrumb()、bcn_display()）を削除します。手順：
1) 子テーマを作成して編集する
2) 該当ファイルをコピーして編集
3) 関数呼び出しを削除またはコメントアウト
4) 動作確認
更新で上書きされないよう、必ず子テーマで編集してください。
5. 構造化データ（JSON-LD）の削除
テーマやプラグインがJSON-LDでパンくずを出力している場合、見た目を消しても検索結果に表示される可能性があります。テンプレートやプラグイン設定で構造化データの出力を無効にするか、該当コードを削除してください。
注意点
- 変更前に必ずバックアップを取り、テスト環境で確認してください。
- CSSで隠すだけだとSEOや内部リンク構造に影響が残る場合があります。完全に消すならテンプレートや構造化データも確認してください。
- 子テーマでの編集を推奨します。
まとめ：パンくずリスト設定でサイトの使いやすさとSEOを強化
パンくずリストは訪問者が現在位置を把握しやすくし、サイト内の回遊を促します。検索エンジンにもページ構造を伝えられるため、導線とSEOの両方に役立ちます。
- 優先すべきポイント
- まず現在のテーマにパンくず機能があるか確認します。テーマにあれば最も簡単で安全です。
- 無ければプラグイン（例：Yoast、Breadcrumb NavXT）で手早く導入できます。設定はシンプルで、表示場所や区切り文字を選べます。
-
さらに細かく制御したければ、子テーマに小さなカスタムコードを追加して表示を整えます。シンプルなPHPとschema.orgの記述で十分なことが多いです。
-
運用のコツ
- パンくずはすべての主要なページで一貫して表示してください。特にカテゴリ―ページや固定ページで効果が出ます。
- モバイル表示で崩れないか確認し、長い階層は省略表示を検討します。
- 導入後は解析ツールで回遊率や直帰率の変化を確認し、必要に応じて調整します。
これらの手順で、ユーザーの利便性を高めつつSEOの土台を強化できます。まずはテーマの確認から始めてみてください。
