パンくずリスト

"ページ階層をたどれるパンくずリストを表示し、配置方法、表示項目、見た目をまとめて調整できます。"

概要

パンくずリスト は、訪問者に今見ているページの位置を伝え、上位階層へ戻りやすくするためのモジュールです。

管理画面の場所: Airygen SEO -> 設定 -> パンくずリスト

特に、親ページを持つ固定ページ、カテゴリやタクソノミーのアーカイブ、検索結果、深い階層の記事を扱うサイトで役立ちます。

出力方法

パンくずリスト は、手動配置と自動挿入の両方に対応しています。

手動出力

パンくずリストの手動出力を有効にする をオンにすると、パンくずリストを自分で配置できます。

  • テンプレート関数 は、テーマテンプレート内の決まった位置に表示したい場合に向いています。
  • ショートコード は、本文中、ショートコード対応ブロック、またはショートコードを受け付けるエリアに表示したい場合に向いています。
  • ブロック は、ブロックエディター上で視覚的に配置したい場合に向いています。

テンプレート関数 の例:

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

ショートコード の例:

[airygen_breadcrumbs]

ブロック の例:

<!-- wp:airygen/breadcrumb /-->

自動挿入

パンくずリストの自動挿入を有効にする をオンにすると、Airygen SEO が本文エリアへパンくずリストを自動で挿入します。

  • 挿入位置 では、コンテンツの前 または コンテンツの後 を選べます。
  • 多くの投稿で同じ位置に表示したい場合は、自動挿入のほうが管理しやすくなります。
  • テーマやページレイアウトの中で正確な表示位置を指定したい場合は、手動出力のほうが向いています。

手動出力と自動挿入を同時に有効にした場合は、実際のページでパンくずリストが二重表示になっていないか確認してください。

設定

このページは 設定、レイアウト、プレビュー に分かれています。

設定 タブ

このタブでは、出力方法、表示する階層、ラベルを設定します。

出力コントロール

  • パンくずリストの手動出力を有効にする をオンにすると、テンプレート関数、ショートコード、ブロック のコード例が表示され、各出力方法を使えるようになります。
  • パンくずリストの自動挿入を有効にする をオンにすると、選んだ位置に応じて本文へ自動挿入されます。
  • 挿入位置 では、自動挿入の場所を コンテンツの前 または コンテンツの後 から選べます。
  • 現在のページを表示 をオンにすると、現在のページを最後のパンくず項目として表示します。これは JSON-LD のパンくずリストにも影響します。
  • ページネーションを表示 をオンにすると、ページ分割されたアーカイブで現在のページ番号を末尾に追加します。
  • 区切り文字 では、各パンくず項目の間に表示する区切り記号を設定できます。
  • プレフィックス では、パンくずリストの前に表示する短い案内文を設定できます。

階層

  • ホームリンクを表示 をオンにすると、先頭にホームへのリンクを表示します。
  • アーカイブにブログリンクを表示 をオンにすると、固定の投稿ページを使っているサイトで、アーカイブ項目の前にブログページを入れます。
  • 祖先ページを表示 をオンにすると、固定ページや階層型カスタム投稿タイプで親ページを含めます。
  • タクソノミーの親を非表示 をオンにすると、カテゴリやタクソノミー階層で親タームを省略し、短い経路にできます。

ラベル

  • ホームラベル では、ホームリンクに使う表示名を変更できます。
  • アーカイブラベル では、カテゴリ、タグ、タクソノミー、投稿タイプアーカイブに使うラベルを変更できます。
  • 検索結果ラベル では、検索結果ページで表示するラベルを変更できます。
  • 404 ラベル では、not found ページで表示するラベルを変更できます。

レイアウト タブ

このタブでは、コンテナとテキストの見た目を調整します。

コンテナ

  • 枠線の幅 では、パンくずリスト全体を囲む枠線の太さを調整できます。
  • ボーダーの色 では、枠線の色を変更できます。
  • パディング では、コンテナ内側の余白を調整できます。
  • コンテナの背景色 では、背景色を変更できます。

トレイル表示

  • フォントサイズ では、パンくずテキストの大きさを調整できます。
  • テキスト色 では、リンクではないテキストの色を変更できます。
  • リンクの色 では、リンク部分の色を変更できます。
  • リンクに下線 をオンにすると、パンくずリンクに下線を表示します。

プレビュー タブ

  • プレビュー では、現在のスタイル設定でパンくずリストがどのように見えるかを簡易表示で確認できます。
  • ラップトップ、タブレット、携帯電話 の切り替えで、デバイス幅ごとの見え方を確認できます。
  • 画面下のサンプルでは、生成される HTML と CSS も確認できます。

使い方

  1. Airygen SEO -> 設定 -> パンくずリスト を開きます。
  2. 設定 で、まず パンくずリストの手動出力を有効にする と パンくずリストの自動挿入を有効にする のどちらを主な出力方法にするか決めます。
  3. テーマ内の決まった場所に表示したい場合は パンくずリストの手動出力を有効にする をオンにし、表示された テンプレート関数 を使う場所へ配置します。
  4. 記事本文やブロックエディター内に表示したい場合は、同じく手動出力を有効にしたうえで、ショートコード または ブロック を配置します。
  5. 多くの投稿で共通の位置に自動表示したい場合は パンくずリストの自動挿入を有効にする をオンにし、挿入位置 で コンテンツの前 または コンテンツの後 を選びます。
  6. 階層 で、ホームリンクを表示、アーカイブにブログリンクを表示、祖先ページを表示、タクソノミーの親を非表示 を必要に応じて切り替えます。
  7. 同じタブで 現在のページを表示、ページネーションを表示、区切り文字、プレフィックス を調整し、見せたい経路と文言に整えます。
  8. ラベル で ホームラベル、アーカイブラベル、検索結果ラベル、404 ラベル をサイトのトーンに合わせて変更します。
  9. レイアウト を開き、枠線の幅、ボーダーの色、パディング、コンテナの背景色、フォントサイズ、テキスト色、リンクの色、リンクに下線 を順に調整します。
  10. プレビュー を開き、ラップトップ、タブレット、携帯電話 を切り替えながら表示例を確認し、必要なら HTML と CSS のサンプルも確認します。
  11. 設定を保存したあと、実際の投稿ページ、アーカイブページ、検索結果ページ、404 ページを開いて表示内容を確認します。

保存後は次の点を確認してください。

  • パンくずリストが同じページで 2 回表示されていないこと。
  • 表示される階層が、実際にユーザーへ案内したい経路と一致していること。
  • 現在のページを表示 をオフにした場合に、末尾の現在ページが不要に表示されていないこと。
  • テーマや追加 CSS が読み込まれたあとでも、色、余白、枠線が崩れていないこと。

プレビューと実際の出力

プレビュー タブは、現在のスタイル設定を確認するための簡易プレビューです。

  • プレビューでは、境界線、余白、文字サイズ、色、リンク装飾の変化をすばやく確認できます。
  • プレビューには ラップトップ、タブレット、携帯電話 の切り替えがあり、管理画面内で見比べられます。
  • 画面に表示される HTML と CSS のサンプルは、出力の構造を把握する参考になります。

ただし、実際のフロントエンド出力はプレビューと完全には一致しません。

  • 実際のパンくずリストは、ページ種別、親ページ構造、タクソノミー階層、検索結果、404 状態などの条件で内容が変わります。
  • 最終的な見た目は、使用中のテーマ、独自 CSS、周囲のレイアウトにも影響されます。
  • 手動出力と自動挿入を同時に有効にしている場合は、プレビューでは問題なく見えても実ページでは重複表示になることがあります。

保存後は、実際の投稿、アーカイブ、検索結果、404 ページを開き、見えている経路と最終表示を必ず確認してください。

SEO のメリット

パンくずリストがあると、検索エンジンがページ階層を理解しやすくなり、訪問者も深いページから上位カテゴリや親ページへ戻りやすくなります。

また、検索から直接流入したユーザーに対して、そのページがサイト全体のどこに属しているかをすぐに伝えやすくなります。

活用例

階層の深いオウンドメディア

Before: カテゴリ、サブカテゴリ、連載記事が増え、読者が上位テーマへ戻る経路を見失いやすい状態でした。

After: パンくずリスト を使うことで、今いる位置と上位階層をすぐに示せるため、関連記事や上位カテゴリへ移動しやすくなります。

商品カテゴリが多い EC サイト

Before: 検索から深い商品ページへ着地したユーザーが、その商品がどのカテゴリに属しているかを把握しにくい状態でした。

After: パンくずリストでカテゴリ経路を見せることで、より広い商品一覧や上位カテゴリへ戻りやすくなります。

複数サイトを管理する制作会社や運用チーム

Before: サイトごとにパンくずの配置方法や文言がばらばらで、運用ルールを統一しにくい状態でした。

After: パンくずリスト で出力方法、ラベル、見た目を一か所で管理できるため、案件ごとに手動配置と自動挿入を使い分けながら整えやすくなります。

よくある質問

手動出力と自動挿入はどちらを使うべきですか。

テーマやテンプレート内の正確な位置に出したいなら手動出力が向いています。多くの投稿で同じ場所へまとめて表示したいなら自動挿入が向いています。

パンくずリストが二重に表示されるのはなぜですか。

パンくずリストの自動挿入を有効にする をオンにしたまま、同じページで テンプレート関数、ショートコード、ブロック のいずれかも使っている可能性があります。実際に使う出力方法だけを残してください。

プレビューと実際のページ表示が違うのはなぜですか。

プレビューはスタイル確認用の簡易表示です。実際の出力は、ページ階層、現在のクエリ、テーマ CSS、周囲のレイアウトの影響を受けます。

現在のページを表示 はオフにしたほうがよいですか。

現在ページをパンくずの末尾に明示したいならオンがわかりやすいです。より短い経路にしたい場合はオフにして、実際の見た目と案内しやすさを比較してください。