WordPressパンくずリスト設置方法|プラグインとコピペの方法を紹介

WordPressパンくずリスト設置方法【プラグインとコピペの方法を紹介】

記事やページが増えてくると、「読者が今サイトのどこにいるのか分かりにくいかも」と感じることはないでしょうか。階層が深くなるほど、訪問者は道に迷いやすくなります。この道案内の役割を果たすのが、WordPressのパンくずリストです。

本記事では、WordPressのパンくずリストを設置する方法を、テーマの標準機能・プラグイン・コピペの3つに分けて解説します。あわせて、SEOに効く構造化データ対応や、見た目を整えるデザイン調整まで一通りカバーしました。制作現場で実際に使っている「どの方法を選ぶか」の判断の順番もお伝えします。初めての方でも、自分のサイトに合う設置方法がはっきり分かるはずです。

WordPressのパンくずリストとは?SEOと使いやすさのメリット

最初に、パンくずリストがどんなもので、なぜ設置するとよいのかを整理します。仕組みとメリットを理解しておくと、後の設置作業で迷わなくなります。

パンくずリストとは

パンくずリストとは、かんたんに言うと、訪問者が今どのページにいるかを示す道しるべのことです。多くは「ホーム > ブログ > WordPress > この記事」のように、ページ上部に階層をたどる形で表示されます。童話の主人公がパンのくずを落として帰り道の目印にした逸話が、名前の由来になっています。

表示される文字は、サイトの階層構造に沿って自動的に決まります。具体的には、記事が属するカテゴリーや、親ページの並びがそのまま反映されるのです。訪問者はこのリンクをたどることで、1つ上のカテゴリーやトップページへすぐ戻れます。

検索結果から記事に直接訪れた人にとっても、パンくずリストは大切な入り口になります。「このサイトはどんな構成なのか」が一目で伝わり、ほかのページも見てみようという気持ちにつながるからです。小さな要素ですが、サイト全体の使いやすさを支える土台と言えます。

パンくずリストを設置する2つのメリット

パンくずリストの主なメリットは、訪問者の使いやすさ向上と、検索エンジン最適化(SEO)への好影響の2つです。ナビゲーションが分かりやすくなるだけでなく、Googleがサイトの構造を理解しやすくなります。

1つ目は、訪問者の回遊性が高まる点です。1つ上のカテゴリーに戻る導線ができるため、関連する別のページも見てもらいやすくなります。結果として、すぐにサイトを離れてしまう直帰を減らし、滞在時間を伸ばす助けになるでしょう。

2つ目は、SEO面のメリットです。Googleは内部リンクの構造から、ページ同士の関係を読み取っています。パンくずリストは「この記事はどのカテゴリーに属するか」をはっきり伝えるため、サイト全体のテーマ性を示す手がかりになります。さらに、構造化データ(検索エンジンにページ情報を正確に伝える仕組み)に対応すると、検索結果にパンくずの形で階層が表示されることもあるのです。クリック率の改善にもつながるこの仕組みは、後半で詳しく解説します。

パンくずリストの主な3つの種類

パンくずリストには、表示の基準によって主に3つの種類があります。位置型・属性型・パス型の3つで、サイトの作りに合わせて使い分けます。WordPressのブログやコーポレートサイトで一般的なのは、位置型です。

位置型は、サイトの階層構造に沿って表示する形式です。「ホーム > カテゴリー > 記事」のように、固定された階層をたどります。多くのサイトはこの形が合っており、迷ったら位置型を選べば問題ありません。

属性型は、商品の属性などで絞り込んだ経路を示す形式です。通販サイトで「メンズ > シューズ > スニーカー」のように、ユーザーが選んだ条件を反映します。商品数の多いECサイトに向いています。

パス型は、訪問者が実際にたどってきた閲覧の道順を表示する形式です。ただし、人によって表示が変わるため分かりにくく、現在ではあまり使われていません。特別な理由がなければ、選ばなくてよいでしょう。

WordPressでパンくずリストを設置する3つの方法と選び方

ここからは、実際の設置方法を見ていきます。方法は3つありますが、選ぶ順番を知っておくと失敗しにくくなります。

3つの方法の選び方(テーマ・プラグイン・コピペ)

WordPressでパンくずリストを設置する方法は、テーマの標準機能・プラグイン・コピペの3つです。迷ったら、まず今使っているテーマに標準機能がないかを最初に確認するのがおすすめです。制作現場でも、この順番で検討します。

選ぶときの判断軸は、次の3つで考えると整理できます。1つ目は手軽さ、2つ目は構造化データへの自動対応、3つ目は保守のしやすさです。

手軽さで見ると、テーマの標準機能がもっとも簡単です。設定をオンにするだけで済みます。プラグインも管理画面から数クリックで導入できます。コピペはコードを編集するため、3つの中ではもっとも手間がかかります。

構造化データへの対応も重要な軸です。テーマやプラグインの中には、SEOに効く構造化データを自動で出力するものがあります。一方、コピペで自作する場合は、見た目だけ作られて構造化データが付かないことがあるため、別の手当てが必要になります。

保守のしやすさでは、テーマやプラグインに任せる方法が有利です。WordPress本体の更新に合わせて自動で調整されるためです。コピペしたコードは、自分で管理し続ける必要があります。この3軸をふまえ、テーマ標準を最優先に検討してみてください。

方法1:テーマの標準機能で設置する

最初に確認したいのが、テーマの標準機能です。多くの国産テーマや有料テーマには、パンくずリストの表示機能が最初から備わっています。この場合、設定画面でオンにするだけで表示できるので、もっとも簡単です。

確認する場所は、テーマによって少し異なります。「外観」→「カスタマイズ」の中や、テーマ専用の設定メニューに「パンくずリスト」の項目があることが多いです。項目が見つかれば、表示のオン・オフや表示位置を選ぶだけで設置が完了します。

標準機能の利点は、テーマの更新に追従してくれる点です。手作業で書いたコードと違い、WordPress本体がアップデートされても表示が崩れにくくなります。さらに、テーマによっては構造化データも自動で出力します。まずは自分のテーマに機能がないかを調べることから始めてみましょう。

方法2:プラグインで設置する(Breadcrumb NavXT)

テーマに標準機能がない場合は、専用プラグインが手軽です。代表的なのが「Breadcrumb NavXT」で、パンくずリストに特化した定番プラグインです。本記事執筆時点でも更新が続いており、ブロックエディター用のブロックにも対応しています。 WordPress

導入手順はシンプルです。管理画面の「プラグイン」→「新規追加」で「Breadcrumb NavXT」を検索し、インストールして有効化します。そのあと、「設定」→「Breadcrumb NavXT」の画面で、区切り文字や表示する内容を細かく調整できます。

表示の出し方は2通りあります。ブロックエディターやウィジェットで「Breadcrumb Trail」ブロックを置く方法と、テーマのテンプレートファイルに呼び出しコードを1行加える方法です。記事の上部に固定で出したい場合は、投稿ページのテンプレート(single.phpなど)に呼び出しを記述すると安定します。

プラグインを使うときの注意点として、テーマのデザインに合わせたCSS調整が必要になることがあります。標準のままだと、サイトの雰囲気から少し浮いて見える場合があるためです。とはいえ、設定の自由度が高く、初心者でも扱いやすい点が大きな魅力と言えます。

方法3:プラグインなしでコピペ設置する

プラグインを増やしたくない場合は、コピペでの自作という選択肢があります。テーマの「functions.php」(かんたんに言うと、サイトに機能を追加するための設定ファイルのこと)にパンくずを生成する関数を追加し、テンプレートファイルから呼び出す方法です。

この方法のメリットは2つあります。プラグインに頼らないぶん動作が軽くなる点と、表示を細かく自分好みに作り込める点です。実際の制作現場でも、テーマを一から構築する案件では、コピペ方式を選ぶことがあります。

一方で、見落としやすい注意点もあります。自作のコードは見た目のパンくずは作れても、構造化データが自動で付かないことが多いのです。SEO効果を十分に得たい場合は、表示用のHTMLとは別に、構造化データのコードも自分で用意する必要があります。また、functions.phpの編集は、書き間違えるとサイトが真っ白になるリスクをともないます。編集の前には必ずバックアップを取り、できれば子テーマ(かんたんに言うと、元のテーマを安全に編集するためのコピーのこと)で作業してください。コードの知識がある中級者以上には向いていますが、初めての方はテーマ標準機能かプラグインから始めるのが安全です。

パンくずリストの構造化データ(リッチリザルト)対応

パンくずリストのSEO効果を最大限に引き出すには、構造化データへの対応が欠かせません。Googleはこの「BreadcrumbList」という構造化データを読み取り、検索結果にパンくずの形でサイト階層を表示します。本記事執筆時点でも、パンくずの構造化データは検索結果に表示される現役の仕様です。

構造化データに対応すると、検索結果の見た目が変わります。通常のURLの代わりに「サイト名 > ブログ > WordPress」のような階層が表示され、訪問者が内容を把握しやすくなるのです。この違いはクリック率にも影響します。あるサイトでテンプレート変更時に誤って構造化データを失ったところ、検索結果のクリック率が6.6%から4.1%へ約4割も低下し、復旧後3週間で7%まで回復した事例が報告されています。小さな設定の差が、流入数を大きく左右することが分かります。

実装の形式は、Googleが推奨する「JSON-LD」という書き方が基本です。WordPressでは、構造化データを自動で出力するテーマや、SEO系プラグインを使うのが現実的でしょう。テーマの標準機能や専用プラグインの多くは、この構造化データに自動で対応しています。コピペで自作した場合は対応が抜けやすいので、特に注意してください。

正しく対応できているかは、Googleの「リッチリザルトテスト」で確認できます。ページのURLを入力するだけで、パンくずの構造化データが有効か、エラーがないかを判定してくれます。よくあるエラーは、順番(position)が1から始まっていない、表示中のパンくずと構造化データの中身が一致していない、相対URLを使っている、の3点です。これらを避ければ、検索結果への表示資格を満たせます。

構造化データはパンくずリスト以外にも、記事や商品など多くの種類があり、サイト全体のSEOを底上げします。どの構造化データを優先すべきか、仕組みからもう少し知りたい方も多いはずです。構造化データとSEOの関係については「構造化データとSEO」で詳しく解説しています。

パンくずリストのデザイン調整(CSSで見た目を整える)

設置したパンくずリストは、CSS(かんたんに言うと、見た目を整えるための言語のこと)で自由にデザインを調整できます。標準のままだと文字が小さかったり、サイトの色味と合わなかったりするため、軽く整えるだけで印象が大きく変わります。

よく調整するのは、文字の大きさ・色・区切り記号・余白の4点です。区切りの記号は「>」が一般的ですが、「/」やアイコンに変えることもできます。スマートフォンで見たときに文字が画面からはみ出さないよう、長いカテゴリー名は折り返す設定にしておくと安心でしょう。

CSSを追加する場所は、「外観」→「カスタマイズ」内の「追加CSS」が手軽です。ここに書いた内容はテーマ更新の影響を受けにくく、初心者でも安全に試せます。書いたコードはその場のプレビューで確認できるため、少しずつ調整しながら好みの見た目に近づけられます。

パンくずの見た目をサイト全体のデザインと統一したい場合は、テーマ側のカスタマイズと合わせて考えると仕上がりがきれいになります。色やフォントをサイト全体でそろえる視点を持つと、パンくずだけが浮くことを防げます。テーマ全体のカスタマイズ方法は「テーマカスタマイズ」でまとめて解説しています。

パンくずリスト設置でよくある失敗と注意点

パンくずリストの設置でつまずきやすいのは、表示されない・二重に出る・構造化データのエラーの3つです。制作現場でも相談が多いポイントなので、先に知っておくとスムーズに対処できます。

もっとも多いのが、設定したのにパンくずが表示されないケースです。原因の多くは、テンプレートファイルの呼び出し位置が違うか、テーマ側に表示する場所が用意されていないことにあります。プラグインの設定だけでは出ない場合、テンプレートへの記述が必要かどうかを確認してください。

次に多いのが、パンくずが2つ重なって表示される失敗です。これは、テーマの標準機能とプラグインの両方が同時に動いているときに起こりがちです。どちらか一方だけを有効にすることで解決します。テーマ標準を使うなら、プラグイン側の自動表示はオフにしましょう。

構造化データのエラーも見落としやすい部分です。表示されているパンくずと構造化データの中身がずれていると、Googleに正しく認識されません。プラグインやテーマのバージョンによって挙動が変わることもあるため、設定を変更したあとはリッチリザルトテストで確認する習慣をつけると安心です。

WordPressのパンくずリストに関するよくある質問

WordPressのパンくずリストはプラグインなしでも設置できますか?

設置できます。テーマの「functions.php」にコードを追加し、テンプレートから呼び出すことで、プラグインを使わずに表示できます。ただし、構造化データが自動で付かないことが多いため、SEOを重視する場合は別途の対応が必要になります。

パンくずリストはSEOに本当に効果がありますか?

効果が期待できます。パンくずリストはサイトの階層構造をGoogleに伝え、ページ同士の関係を理解しやすくします。直接的な順位上昇を保証するものではありませんが、構造化データに対応すれば検索結果の見た目が改善し、クリック率の向上が見込めます。

パンくずリストの構造化データは必須ですか?

必須ではありませんが、対応を強くおすすめします。本記事執筆時点で、パンくずの構造化データは検索結果に反映される現役の仕様です。多くのテーマや専用プラグインが自動で対応しているため、まずは自分の環境が対応済みかを確認してみてください。

Breadcrumb NavXTは今でも使えますか?

使えます。本記事執筆時点でも更新が続いており、ブロックエディター用のブロックにも対応しています。設定の自由度が高く、初心者から制作者まで幅広く利用されている定番プラグインです。導入後はテーマに合わせてCSSを調整すると、きれいに収まります。

パンくずリストが表示されないときはどうすればいいですか?

最初に、テンプレートへの呼び出しコードが正しい位置にあるかを確認してください。プラグインの設定だけでは表示されない場合があります。続いて、テーマの標準機能とプラグインが競合していないかを見直します。それでも出ない場合は、テーマがパンくずの表示位置に対応しているかを確認しましょう。

まとめ

WordPressのパンくずリストは、訪問者の使いやすさとSEOの両方を底上げする大切なナビゲーションです。設置方法には、テーマの標準機能・プラグイン・コピペの3つがあります。迷ったときは、まずテーマに標準機能がないかを確認し、なければプラグイン、それでも合わなければコピペという順で選ぶと失敗しにくくなります。

SEO効果を最大限に引き出すには、構造化データへの対応が欠かせません。多くのテーマや専用プラグインは自動で対応していますが、コピペで自作した場合は対応が抜けやすいため注意が必要です。設置後はリッチリザルトテストで確認し、表示されない・二重表示といったトラブルがないかも見ておきましょう。

自分のサイトに合った方法を選べば、初めての方でも無理なくパンくずリストを設置できます。まずは今使っているテーマの設定画面を開き、機能の有無を確認するところから始めてみてください。

この記事を書いた人

Hara Daizo

Hara Daizo

Web制作会社、Web担当者を経て独立。17年以上の実務経験で培った制作スキルとSEOノウハウを活かし、現在はSTARRY代表としてWordPressサイト制作・集客サポートを提供。大手クラウドソーシングのWebデザイナーランキング上位受賞多数。