WordPressのパンくずリストの作り方｜テーマ・プラグイン・自作を徹底比較

WordPressのパンくずリストは、ユーザーが迷わないように導いてくれて、SEOの観点でもおいしいナビゲーションです。

とはいえ、テーマ機能だけで済ませるのか、プラグインを入れるのか、それとも自作するのか、いざ手を動かそうとすると迷ってしまいますよね。

ここでは最適なパンくずリストの作り方を解説します。

読み終えたころには「うちのサイトはこのやり方で行こう」と決めて、そのままパンくずリストの設置作業に進める状態になっているはずです。

WordPressのパンくずリストとは？メリットを整理

パンくずリストの基本と役割

パンくずリストは「ホーム > カテゴリ > 記事タイトル」のように、ユーザーが今サイトのどこにいるかを示すナビゲーションです。

童話に出てくる「パンくずを道しるべとして落としていく」イメージから来ていて、「今いるページから一つ上の階層に戻りやすくするための案内板」と考えると分かりやすいと思います。

パンくずリストにはいくつかのパターンがあります。

種類	表示例	特徴
階層型パンくず	ホーム > カテゴリ > 記事	サイトの階層構造に合わせて、親ページから子ページへ順番に並ぶ一般的なタイプです。
履歴型パンくず	ホーム > 一覧ページ > 今のページ	ユーザーがたどってきた遷移の履歴をベースに表示するタイプで、商品検索の結果ページなどで使われることがあります。
属性型パンくず	ホーム > ジャンルA > 特集B	タグや属性情報に基づいて表示するタイプで、商品が複数カテゴリに属するようなケースで使われます。

WordPressサイトで一般的なのは、一番上の「階層型」です。

カテゴリや固定ページの親子関係と相性が良く、ブログやオウンドメディア、コーポレートサイトなど、いろいろなサイト構造にフィットしやすいからです。

SEOとユーザビリティの観点から見たパンくず

WordPressのパンくずリストが、運営者からも検索エンジンからも好かれている理由は、ユーザーとSEOの両方でメリットが大きいからです。

特に、記事数や固定ページが増えてきたWordPressサイトでは、パンくずリストの有無で、ユーザーのストレスや離脱率がかなり変わると感じています。

「トップに戻る」ボタンだけだと、どのカテゴリの記事なのかが伝わりにくいので、その手前をパンくずでそっとサポートしてあげるイメージです。

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

テーマ機能で表示する方法

一番手軽なのが「テーマに最初から搭載されているパンくず機能を使う」方法です。

国産の人気テーマには、パンくずリストを出すための機能があらかじめ用意されていることが多いです。

テーマ例	パンくずリスト機能	向いている人
Cocoon系テーマ	設定画面でチェックを入れるだけで、パンくずリストを表示できます。	できるだけプラグインを増やさずに、WordPressにパンくずリストを入れたい人。
Lightning系テーマ	デザイン済みのパンくずが標準で付いていることが多いです。	コーポレートサイト寄りのデザインで、細かい設定項目が欲しい人。
ブロックテーマ全般	専用ブロックがないことも多く、テンプレートにコードを埋め込むパターンがよくあります。	ブロックエディタ前提で、レイアウトを自分で調整するのが好きな人。

テーマ機能を使う最大のメリットは、実装が速くて、テーマのアップデートでも大きく崩れにくいことです。

一方で、テーマを変更したときにパンくずの見た目や仕様がガラッと変わるので、「テーマ依存が強くなる」という面もあります。

プラグインで追加する方法

二つ目は「パンくず専用プラグイン」や「SEOプラグインの機能」を使って、WordPressにパンくずリストを追加する方法です。

プラグインをインストールして有効化し、テーマ側に1行コードを挿入するだけで表示できるものが多いので、コードが苦手な人にも現実的な選択肢です。

プラグイン	特徴	構造化データへの対応イメージ
Breadcrumb NavXT	パンくずリスト専用の定番プラグインで、表示ルールを細かく調整できます。	パンくず用の構造化データを自動で出力してくれる設定が用意されています。
Yoast SEO	SEOプラグインの機能のひとつとして、パンくずリストを表示できます。	他のSEO情報とあわせてパンくずの構造化データもまとめて生成します。
All in One SEO	総合SEOプラグインで、専用ブロックやショートコードからパンくずを出せます。	ブロックやショートコードで表示するときに、構造化データも同時に出してくれる仕組みがあります。
Rank Math	高機能なSEOプラグインで、デザインも含めてパンくずを細かくカスタマイズできます。	パンくずのschemaを自動生成するため、リッチリザルトに対応させやすいです。

すでにこれらのSEOプラグインを入れている場合は、まず「そのプラグインのパンくず機能」で実現できないかを確認するのがおすすめです。

同じページで複数のパンくず機能を動かすと、構造化データも二重に出力されてしまい、検索エンジン側がどれを採用するか迷う原因になります。基本的には「パンくずの出し方は一つに決める」と覚えておくと安全です。

プラグインなしで自作する場合の考え方

三つ目は、プラグインを使わずにパンくずリストを自作する方法です。

functions.phpや専用のテンプレートファイルに関数を書いて、テーマ内から呼び出すスタイルがよく使われます。

実装パターン	メリット	デメリット
functions.phpに直接関数を書く	追加ファイルが増えず、シンプルに実装できます。	親テーマを更新すると上書きされるおそれがあり、子テーマを使わない場合は注意が必要です。
breadcrumb.phpなどの部分テンプレートを作る	パンくずのロジックとデザインを一箇所にまとめられます。	テンプレート読み込みの仕組みを理解していないと、最初はとっつきにくく感じるかもしれません。
子テーマにパンくずの処理をまとめる	テーマのアップデートで上書きされず、安全にカスタマイズできます。	子テーマの作成や運用の基本をおさえておく必要があります。

自作の一番の魅力は「サイトの構造やデザインに、パンくずをぴったり合わせられる自由度」です。

カスタム投稿タイプやカスタムタクソノミー、LP用の独自テンプレートなどを多く使うWordPressサイトでは、自作のパンくずリストの方がきれいにハマるケースもよくあります。

実例で学ぶWordPressパンくずリストの作り方

共通の準備と表示位置の決め方

まずは「どこにパンくずリストを出すか」を決めるところからスタートです。

表示位置によって、ユーザーの見え方も、テーマ側の実装方法も少しずつ変わってくるからです。

表示位置	メリット	デメリット
ヘッダー直下	サイト全体で位置をそろえやすく、どのページでも視線に入りやすいです。	ヘッダーまわりの要素が多いと、スマホで窮屈に感じられることがあります。
記事タイトルの直上	記事を読み始める直前に自然と目に入り、カテゴリもすぐに把握できます。	アイキャッチ画像やタイトルとのバランスによっては、微調整が必要な場合があります。
記事タイトルの直下	タイトルを読んだあとに、どのカテゴリの記事なのか確認しやすいです。	ファーストビューが情報過多になると、本文にたどり着くまで遠く感じられることがあります。
フッター手前	最後まで読んだ人向けに、カテゴリや上位ページへ戻る動線を用意できます。	ページ上部で迷っているユーザーへのサポートにはあまりならない位置です。

私の経験では、ブログやメディア型のサイトなら「記事タイトルの直上」にパンくずリストを置くと、ユーザーにも運営側にもバランスが良いことが多いです。

タイトルを読んだ瞬間に「このカテゴリの記事なんだな」と分かるので、回遊先も自然とイメージしやすくなります。

プラグインパターンの手順イメージ

次に、プラグインでパンくずリストを入れる場合の流れを、ざっくりイメージしておきます。

具体的な画面は使うプラグインによって違いますが、ステップの考え方はほとんど共通です。

私も最初はBreadcrumb NavXTを使って、テーマファイルに少しコードを書き足しながらパンくずリストを設置しました。

「書くコードは最小限にして、あとは管理画面で調整する」という構成にしておくと、テーマを変えたときのメンテナンスもそこまで大変になりません。

自作パターンのステップと考え方

自作でパンくずリストを作る場合も、いきなり難しいコードを覚える必要はありません。

全体の流れをざっくり分解すると、次の三段階になります。

• パンくずリストを生成する関数を用意する。
• その関数をテンプレートの好きな位置で呼び出す。
• CSSで見た目を整え、スマホでも読みやすくする。

投稿ページであれば「ホーム > カテゴリ > 記事タイトル」、固定ページであれば「ホーム > 親ページ > 子ページ」のように、よく使うパターンはそこまで多くありません。

最初は「投稿」「固定ページ」「カテゴリ一覧」「検索結果」「404ページ」くらいをカバーするところから始めて、慣れてきたらカスタム投稿タイプも足していくと、挫折しにくいです。

大事なのは「サイト全体で同じルールを貫くこと」です。

あるページだけパンくずが出なかったり、途中で別カテゴリに飛んでしまったりすると、ユーザーも検索エンジンも混乱してしまいます。

構造化データとWordPressパンくずリストの関係

BreadcrumbListのイメージと注意点

パンくずリストの構造化データには、schema.orgの「BreadcrumbList」というタイプが使われるのが一般的です。

これは「パンくずを構成する要素を、順番付きのリストとして検索エンジンに伝えるためのフォーマット」と考えるとイメージしやすいです。

要素名	役割	例
itemListElement	パンくずの各ステップの配列を入れる入れ物です。	1階層目、2階層目、3階層目の情報が、順番に並びます。
name	各ステップに表示されるテキストです。	「ホーム」「ブログ」「記事タイトル」などの文字列が入ります。
item	各ステップのURLです。	ホームやカテゴリページ、実際の記事ページのURLが入ります。
position	パンくずの順番を示す番号です。	ホームが1、カテゴリが2、記事が3といった番号になります。

テーマやプラグインが自動でBreadcrumbListを出力してくれる場合は、このあたりの要素がよしなに埋められています。

自作する場合も、「画面に出ているパンくずリストと、構造化データの内容がちゃんと一致しているか」を意識しておくと、大きなトラブルを避けやすくなります。

よくあるエラーとチェックポイント

構造化データまわりでは、次のようなトラブルが起きがちです。

こういった問題は、Search Consoleのレポートやリッチリザルトテストツールで見つけることができます。

WordPressのパンくずリストを設置したあとは、一度これらのツールでチェックして、エラーや警告が出ていないか確認しておくと安心です。

WordPressパンくずリストの設計・デザイン・運用のコツ

サイト構造から考えるパンくずの設計

まず大事なのが、「サイトのタイプごとに、パンくずのゴールをどう置くか」を決めることです。

同じWordPressでも、ブログとECサイトでは、ユーザーがパンくずに期待している動きが少し違います。

サイトタイプ	例	パンくず設計のポイント
ブログ・メディア型	コラムやニュース、読み物が中心のサイト。	カテゴリ階層をシンプルにして、「ホーム > カテゴリ > 記事」の形を崩さないことが大切です。
コーポレートサイト型	会社概要やサービス紹介が中心のサイト。	固定ページの親子関係を丁寧に作り、「ホーム > 事業内容 > 各サービス」のような直感的な階層にします。
ECサイト型	商品一覧や検索結果が中心のサイト。	商品が複数カテゴリに属する場合、どのカテゴリをパンくずに採用するかのルールを先に決めておきます。

特にブログ型サイトでは、「カテゴリを細かく作りすぎて、毎回どこに入れるか迷う」という状態になりがちです。

パンくずリストの設計をきっかけにカテゴリ構造を見直すと、サイト全体の整理にもつながります。

デザインとモバイル表示のポイント

次に、見た目とスマホ表示のコツです。

パンくずリストは地味なパーツですが、ちょっとした工夫で読みやすさとクリックしやすさが変わります。

• 区切り記号は「>」や「›」など、シンプルで細めのものを選ぶ。
• リンクの色やホバー時の下線など、他のリンクと同じルールにそろえる。
• スマホでは横幅が足りなくなるので、長いタイトルにはCSSで省略表示を設定する。
• パンくず全体をnavタグで囲み、aria-label="breadcrumb"のようなラベルを付けると、スクリーンリーダー利用者にも親切。

装飾を盛りすぎると、パンくずリストが主役のように見えてしまいます。

WordPressのパンくずリストは、あくまで「さりげない案内役」として、本文の手前で静かに存在しているくらいがちょうどいいです。

運用とトラブルシューティング

最後に、運用しながらチェックしておきたいポイントをまとめます。パンくずリストは作って終わりではなく、サイトの変化に合わせて少しずつ調整していくパーツです。

私もサイトリニューアルのたびに「パンくずのことを後回しにして、最後に慌てて調整する」という失敗を何度もしてきました。

最初から「WordPressのパンくずリストもサイト設計の一部」と意識しておくと、やり直しが少なくて済みます。

よくある質問（WordPressのパンくずリスト編）

Q1. パンくずリストは絶対に必要ですか？

A1. 1ページだけのランディングページや、ページ数がとても少ないサイトなら、必須とは言い切れません。

ただ、記事数や固定ページが増えていくWordPressサイトでは、パンくずリストがある方が運営も閲覧も楽になります。

ユーザーは「今どこにいるのか」が分からないと不安になり、戻るボタンを連打して離脱しやすくなります。

パンくずが一つあるだけで、「このカテゴリの記事なんだな」「一つ上の階層はここなんだな」とすぐ理解できるので、運営側にとっても閲覧者にとってもメリットが大きいです。

Q2. WordPressのパンくずリストはプラグインと自作のどちらがいいですか？

A2. 管理画面だけで完結させたい、PHPのコードはあまり触りたくないという場合は、プラグインでパンくずリストを出す方法が向いています。

一方で、カスタム投稿タイプや複雑な階層構造を使うサイトでは、自作した方が細かいところまできれいに制御できるケースも多いです。

迷ったときは「まずプラグインで試してみて、どうしても足りないところが出てきたら自作を検討する」という順番がおすすめです。

Q3. 構造化データを設定しないパンくずリストでも問題ありませんか？

A3. 表示だけであれば、構造化データがなくてもパンくずリストは普通に動きます。

ただ、検索結果での見え方や検索エンジンへの情報伝達を考えると、WordPressのパンくずリストには構造化データもセットで用意しておくのが理想です。

パンくず機能に対応しているテーマやプラグインなら、BreadcrumbListも合わせて出してくれることが多いので、まずは自分の環境で対応状況を確認してみるとよいと思います。

まとめ：WordPressのパンくずリストをうまく活用しよう

この記事の内容を整理します。

今日からできる最初の一歩として、「自分のテーマがパンくずリストに対応しているか」「今入れているSEOプラグインにパンくず機能があるか」を一度チェックしてみてください。

どの機能を使うかさえ決まってしまえば、あとはこの記事を道しるべにしながら、実際のWordPressサイトでパンくずリストの設置・調整を進めていくだけです。