コードの知識がなくても、プラグインを使えば数ステップで設置できます。この記事を読めば、自分のサイトにあわせて見た目を調整するところまで一通りできるようになります。
- Breadcrumb NavXTのインストール・有効化の手順
- ウィジェット／テーマファイルへの表示方法2パターン
- 表示形式のカスタマイズ方法とよくあるトラブルの対処法
パンくずリストとは？表示するメリット
まずは「パンくずリスト」がどんなものか、そしてなぜ設置するのかを簡単に押さえておきましょう。仕組みを理解しておくと、このあとの設定作業もスムーズに進みます。
パンくずリストとは
パンくずリストとは、いま見ているページがサイトのどの位置にあるかを示すナビゲーションです。たとえば「ホーム ＞ WordPress ＞ この記事」のように、上の階層からの経路を並べて表示します。
ページ上部やタイトルの近くに置かれることが多く、訪問者は現在地をひと目で把握できます。「パンくずナビ」「トピックパス」などと呼ばれることもあります。
パンくずリストを表示する3つのメリット
パンくずリストを設置すると、主に次の3つのメリットがあります。
| メリット | 内容 |
|---|---|
| 回遊性が上がる | 訪問者が上位カテゴリーへワンクリックで戻れるため、サイト内をめぐりやすくなります。 |
| 現在地がわかりやすい | ページの位置関係が明確になり、迷いにくいサイトになります。 |
| SEOにも役立つ | サイトの階層構造を検索エンジンに伝えやすくなり、検索結果の見え方にも影響します。 |
WordPressでパンくずリストを表示する方法はいくつかありますが、この記事ではプラグイン「Breadcrumb NavXT」を使います。コードを書かずに設置でき、初心者でも扱いやすいのが特長です。
「Breadcrumb NavXT」は有効インストール数80万以上と実績が豊富で、更新も継続的に行われています。表示したパンくずリストには、Schema.org（BreadcrumbList）に準拠した構造化データが自動で出力される点も魅力です。動作要件はWordPress 5.8以上・PHP 7.0以上とされています。
本記事はWordPress 7.0＋Breadcrumb NavXT v7.5系の環境で動作確認しています。
管理画面の「プラグイン」→「新規プラグインを追加」を開き、右上の検索窓に「Breadcrumb NavXT」と入力します。目的のプラグインが表示されたら「今すぐインストール」→「有効化」の順にクリックすれば準備は完了です。似た名前のプラグインが並ぶことがあるので、名称をよく確認してから選びましょう。
有効化しただけでは、まだサイトにパンくずリストは表示されません。次のSTEP2で、実際に表示するための設定を行います。
STEP2：パンくずリストを表示する
「Breadcrumb NavXT」でパンくずリストを表示する方法は、公式に2通り案内されています。手軽な「ウィジェット」と、表示位置を自由に決められる「テーマファイルへの記述」です。まずは簡単なウィジェットから見ていきましょう。
方法1：ウィジェットで表示する（コード不要・手軽）
ウィジェットを使う方法なら、コードを一切書かずに設置できます。管理画面の「外観」→「ウィジェット」を開き、「Breadcrumb NavXT」のウィジェットをクリックすると、追加先のエリアを選ぶ一覧が表示されます。「サイドバー」など好きなエリアを選んで「ウィジェットを追加」をクリックします。
ウィジェットを追加したら、実際のサイトを開いて表示を確認しましょう。指定したエリアにパンくずリストが表示されていれば成功です。
方法2：テーマファイルにコードを追加して表示する（表示位置を自由に指定したい場合）
「記事タイトルのすぐ上に置きたい」など、表示位置を細かく指定したい場合は、テーマファイルに専用の関数を記述する方法があります。「Breadcrumb NavXT」には、パンくずリストを出力するbcn_display()という関数が用意されています。
次のコードを、パンくずリストを表示したい場所（たとえば子テーマの page.php や single.php の記事タイトル直前）に追記します。
<?php if ( function_exists('bcn_display') ) { bcn_display(); } ?>先頭のfunction_existsは、この関数が使える状態かどうかを確認するためのものです。プラグインを停止してもエラーが出ないようにする、WordPressの標準的な安全策として入れています。
テーマファイルを直接編集するときは、必ず子テーマで作業してください。親テーマを直接編集すると、テーマの更新時に変更が上書きされて消えてしまいます。編集前にファイルのバックアップを取っておくと安心です。
STEP3：パンくずリストの表示形式をカスタマイズする
設置できたら、次は見た目を整えましょう。カスタマイズは管理画面の「設定」→「Breadcrumb NavXT」から行えます。ここでは、よく調整する3つの項目を紹介します。
「ホームページテンプレート」でホームの表示名を変更する
初期状態では、先頭の項目にサイトのタイトルがそのまま表示されます。これを「トップ」などの好きな文言に変えたい場合は、「ホームページテンプレート」欄を編集します。この欄にはHTMLタグを含むテンプレートが入っており、その中の%htitle%という部分がサイトタイトルに置き換わる仕組みです。%htitle%を「トップ」のような固定の文字に書き換えれば、先頭の表示名を変更できます。
他のタグ（<span>や%link%など）はそのまま残し、%htitle%の部分だけを書き換えるのがポイントです。誤って周囲のタグまで削除すると、構造化データが正しく出力されなくなる場合があります。
%htitle% を書き換えると、先頭の表示名を変更できます「パンくずの区切り」を変更する
各項目のあいだに入る区切り記号は、「パンくずの区切り」欄で変更できます。初期値の「>」から、「/」や「≫」など好みの記号に差し替えると、サイトのデザインに合わせやすくなります。
余白や文字サイズをCSSで調整する
文字サイズや余白といった細かい見た目は、CSSで調整します。「外観」→「カスタマイズ」の「追加CSS」に、パンくずリストを囲む要素に対するスタイルを書き加えるとよいでしょう。
実際に設定を変更したあとは、サイトを表示して仕上がりを確認します。区切り記号や文字の見え方が、指定したとおりに反映されているはずです。
構造化データ（Schema.org）が出力されているか確認する
「Breadcrumb NavXT」で表示したパンくずリストには、Schema.org（BreadcrumbList）に準拠した構造化データが自動で出力されます。構造化データとは、ページの内容を検索エンジンが理解しやすいように伝える仕組みのことです。
正しく出力されているか確認したい場合は、パンくずリストを表示しているページのソースコードを開いてみましょう。BreadcrumbListという記述が含まれているかを探します。ウィジェットで設置した場合も、追加の設定なしで出力されます。
パンくずリストの設置でサイトの構造がわかりやすくなり、SEO面でもプラスに働きます。ただし、SEO対策の効果を最大限に引き出すには、サイトの表示速度もあわせて見直すのがおすすめです。
ラッコサーバーは高速Webサーバー「LiteSpeed」やHTTP/3に対応しており、稼働率99.99%以上の安定環境でWordPressサイトを運用できます。WordPressの自動インストールにも対応しているため、申し込み後すぐに始められます。
月額330円（税込）〜利用でき、30日間の無料お試し期間中にサイトの表示速度を実際に確認することも可能です。
パンくずリストが表示されないときの対処法
設置したのに表示されない場合は、次の点を順番に確認してみてください。多くはちょっとした設定の見落としが原因です。
| 確認するポイント | 対処法 |
|---|---|
| プラグインが有効になっているか | 「プラグイン」一覧で「Breadcrumb NavXT」が有効化されているか確認します。 |
| ウィジェットが正しいエリアに入っているか | 「外観」→「ウィジェット」で、表示したいエリアにウィジェットが追加されているか見直します。 |
| テーマにコードが正しく記述されているか | 方法2で設置した場合、bcn_display()の記述位置やスペルに誤りがないか確認します。 |
| キャッシュが残っていないか | キャッシュ系プラグインを使っている場合は、キャッシュを削除してから再度表示を確認します。 |
ひと通り確認しても解決しない場合は、一度プラグインを停止して再度有効化してみると、状態がリセットされて表示されることがあります。
よくある質問
パンくずリストは必要ですか？デメリットはありますか？
必須ではありませんが、訪問者の使いやすさとサイト構造の分かりやすさの両面でメリットが大きいため、設置をおすすめします。
デメリットとしては、表示スペースを少し使うことと、デザインによっては見た目がごちゃつく点が挙げられます。区切り記号や文字サイズを調整すれば、こうした点は十分に抑えられます。
「パンくずリスト」という名前の由来は？
童話『ヘンゼルとグレーテル』で、森で迷わないように主人公がパンくずを道しるべとして落としていったエピソードに由来すると言われています。通ってきた道筋を示すという役割が、この機能とよく似ているためこう呼ばれるようになりました。
「パンくずナビ」「トピックパス」などの別名で呼ばれることもあります。
検索結果（Google）にパンくずリストが表示されるのはなぜですか？
「Breadcrumb NavXT」が出力する構造化データ（BreadcrumbList）を、Googleが読み取っているためです。検索結果のURL表示部分が、パンくずリスト形式で表示されることがあります。
これはGoogle公式のヘルプページでも紹介されている挙動で、主にパソコン版の検索結果が対象です。
WordPressでパンくずリストが表示されないのはなぜですか？
プラグインの有効化漏れ、ウィジェットの設置場所の間違い、テーマファイルのコードの記述ミスなどが主な原因です。キャッシュが残っていて古い表示のままになっているケースもあります。
詳しい確認手順はパンくずリストが表示されないときの対処法で解説しているので、あわせて参考にしてください。
パンくずリストを削除するにはどうすればいいですか？
ウィジェットで設置した場合は、「外観」→「ウィジェット」から該当のウィジェットを削除します。テーマファイルにコードを記述した場合は、追記したbcn_display()の行を削除してください。プラグイン自体が不要になったら、「プラグイン」一覧から停止・削除できます。
階層が深い（長い）場合、パンくずリストはどう表示されますか？
「ホーム ＞ 親カテゴリー ＞ 子カテゴリー ＞ 記事」のように、階層が深いほど項目が横に長く並びます。表示が長くなりすぎる場合は、区切り記号を短くしたり、CSSで折り返しや文字サイズを調整したりすると読みやすくなります。
まとめ
WordPressでパンくずリストを表示する方法を、プラグインBreadcrumb NavXTを使って解説しました。ウィジェットなら数ステップで設置でき、コードが不要なので初心者にも扱いやすい方法です。
設置後は、区切り記号や表示名をサイトのデザインに合わせて調整してみてください。構造化データも自動で出力されるため、訪問者の使いやすさとSEOの両面で効果が期待できます。
