MENU

初心者でも安心！パンくずリスト, PHPで作る実践手順完全ガイド

大規模情報サイト運営
php パンくずリスト
2025/12/07
目次

はじめに

本書の目的

本ドキュメントは、PHPを使ってパンくずリスト（Breadcrumb）を実装する方法をわかりやすく解説します。WordPressでのプラグイン利用方法、プラグインを使わない自作コード（コピペで使えるサンプル）を両方取り上げ、比較しながら説明します。SEOや構造化データ（JSON-LD）への対応ポイントも扱います。

想定読者

  • WordPressサイトを運営している方
  • 簡単なPHPコードを読み書きできる方
  • プラグイン利用のメリット・デメリットを知りたい方
    初心者の方には、まずバックアップとテスト環境で試すことをおすすめします。

この章での内容

本章では本書の全体像と進め方を説明します。第2章でパンくずリストの役割と利点を説明し、第3章で実装方法の全体像を示します。第4章・第5章で具体的な実装手順とコード例を提示し、第6章で自作の長所・短所を整理します。

注意事項

コードを本番サイトに入れる前に必ずバックアップを取り、ローカルまたはステージング環境で動作確認してください。構造化データやSEOの扱いは、検索エンジンのガイドラインに従って定期的に見直すと安心です。

パンくずリストとは？役割とメリット

概要

パンくずリストは、現在のページがサイト内のどの位置にあるかを示すリンクの並びです。例：ホーム > カテゴリ > サブカテゴリ > 記事。ユーザーが自分の位置を把握しやすくなります。

ユーザーにとっての役割

  • 迷わず戻れる導線を提供します。トップや上位カテゴリへ1クリックで移動できます。
  • サイトの構造を視覚的に伝え、迷子を減らします。特に階層が深いサイトで有効です。
  • ページ内の回遊を促し、直帰率の改善に寄与します。

SEO・技術面のメリット

  • 階層構造を検索エンジンに伝えやすくなります。構造が明確だとインデックスの助けになります。
  • schema.orgのBreadcrumbListを使うと、検索結果にパンくずが表示される場合があり、クリック率（CTR）向上につながります。

タイプの簡単な紹介と注意点

  • 位置型：現在位置を示す一般的な形式（例のようなもの）。
  • 経路型：ユーザーの辿った履歴を示す。ECサイトでは混乱を招くことがあるため注意。
  • 属性型：商品の属性を並べる場合に使います。

実装時は短く分かりやすい文言にし、リンクを明確にすることを心がけてください。

パンくずリスト実装の3つの方法（全体像）

はじめに

パンくずリストを実装する方法は大きく3つに分かれます。それぞれ特徴が異なるため、サイトの規模や運用体制に合わせて選ぶとよいです。本章では全体像をわかりやすく説明します。

1. テーマ機能での実装

テーマ側にあらかじめパンくずを表示する機能が組み込まれている方法です。導入は簡単で、テーマの設定画面やテンプレートを有効にするだけで使えます。デザインはテーマに合わせられますが、細かい挙動の変更は難しい場合があります。

2. プラグイン利用（例：Breadcrumb NavXT、Yoast SEO）

プラグインを入れると短時間で導入できます。管理画面で表示や構造を設定でき、SEOに配慮した出力をするものもあります。初心者でも扱いやすく、アップデートで機能改善される利点があります。一方で不要な機能まで読み込むことがあり、軽量さに欠けることがあります。

3. PHPで自作（functions.phpに独自関数を定義）

自分で関数を書いてテンプレート内で呼び出す方法です。表示や構造を自由に作れるため、サイトに最適化できます。コード管理や保守は必要ですが、余分な機能を省いて軽くできます。実装例は第5章で詳しく解説します。

今後は主に「プラグイン利用」と「自作コード」の具体的な手順を中心に説明します。

WordPress＋PHPでパンくずリストを実装する方法【プラグイン編】

概要

プラグインを使うと管理画面で設定でき、テーマに少しPHPを追記するだけで表示できます。ここでは代表的な2つ（Breadcrumb NavXT／Yoast SEO）を例に説明します。

Breadcrumb NavXTの使い方

  1. 管理画面→設定→Breadcrumb NavXTで表示形式を設定します。階層区切りやホームの表記を選べます。
  2. テンプレートに挿入（例：single.phpやpage.php、header.phpのタイトル付近）
if (function_exists('bcn_display')) {
  echo '<nav class="breadcrumb">';
  bcn_display();
  echo '</nav>';
}

この関数は標準でHTMLを出力します。必要あれば文字列返却のオプションも確認してください。

Yoast SEOのパンくず機能

  1. 管理画面→SEO（Yoast）→検索の外観→パンくずで有効化・表示形式を設定します。
  2. テンプレートに挿入
if (function_exists('yoast_breadcrumb')) {
  yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}

実装時の注意点

  • 編集前に必ずテーマファイルのバックアップを取るか子テーマを使ってください。
  • 出力HTMLにクラスを付け、CSSで見た目を整えます。短いCSS例を以下に示します。
.breadcrumb{font-size:14px;margin-bottom:16px}
.breadcrumb a{color:#0073aa;text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

補足

プラグインは設定で対応範囲が広く、構造化データ(JSON-LD)を自動で出すものもあります。用途に合わせてプラグインを選んでください。

プラグインなしでパンくずリストを実装する方法【PHP自作・コピペOK】

概要

functions.phpにbreadcrumb()関数を自作し、サイトの階層に応じたHTMLを出力します。テンプレートで関数を呼び出し、CSSで見た目を整えます。条件分岐でトップページ非表示や投稿・固定ページごとの表示を切り替えます。

functions.phpに追加する（コピペ可）

function breadcrumb(){
  if(is_front_page()) return; // トップは表示しない
  echo '<nav class="breadcrumb"><a href="'.esc_url(home_url('/')).'">ホーム</a>';
  if(is_single()){
    $cats = get_the_category();
    if($cats) echo ' &gt; <a href="'.esc_url(get_category_link($cats[0]->term_id)).'">'.esc_html($cats[0]->name).'</a>';
    echo ' &gt; <span>'.esc_html(get_the_title()).'</span>';
  }elseif(is_page()){
    $anc = get_post_ancestors(get_queried_object());
    if($anc){
      $anc = array_reverse($anc);
      foreach($anc as $id) echo ' &gt; <a href="'.esc_url(get_permalink($id)).'">'.esc_html(get_the_title($id)).'</a>';
    }
    echo ' &gt; <span>'.esc_html(get_the_title()).'</span>';
  }elseif(is_category()){
    echo ' &gt; <span>'.single_cat_title('', false).'</span>';
  }elseif(is_search()){
    echo ' &gt; <span>検索結果: '.esc_html(get_search_query()).'</span>';
  }
  echo '</nav>';
}

テンプレートでの呼び出し

表示したい場所（header.phpやsingle.php、page.phpなど）に

<?php breadcrumb(); ?>

を置きます。出力はすぐ反映されます。

CSSの基本例

.breadcrumb{font-size:14px;color:#666}
.breadcrumb a{color:#0073aa;text-decoration:none}

注意点

出力は必ずesc_url/esc_htmlでエスケープしてください。必要に応じて細かな条件（カスタム投稿やタクソノミー）を追加できます。以上でプラグイン不要のシンプル実装が可能です。

PHPで自作するメリット・デメリット

はじめに

パンくずリストをPHPで自作する場合の長所と短所をわかりやすく説明します。具体例を交えて、実装前に判断しやすい情報をお伝えします。

メリット

  • 表示が速くなる
  • プラグインを使わない分、不要な処理が減りページ表示が軽くなります。例：簡潔な関数で必要なクエリだけ実行します。
  • カスタマイズ性が高い
  • 表示順や区切り記号、構造化データ（schema.org）まで自由に作れます。カスタム投稿にも対応可能です。
  • 依存を減らせる
  • 外部プラグインに頼らないため、互換性や更新に伴う影響を受けにくくなります。

デメリット

  • 実装に時間がかかる
  • ページ種別やタクソノミーごとの分岐を作ると手間が増えます。
  • 保守負担が増える
  • テーマ変更や要件追加のたびに修正が必要になります。
  • テストやアクセシビリティ対応が必要
  • マークアップやaria属性、構造化データの正当性を自分で担保する必要があります。

向いているケース・向いていないケース

  • 向いている：高速化や細かい見た目・構造の制御が必要なサイト
  • 向いていない：短期間で多機能を必要とする場合や開発リソースがない場合

実装時の注意点・運用のコツ

  • 出力は必ずエスケープする（XSS対策）。
  • クエリ回数を減らす・キャッシュする（transientなど）。
  • 構造化データやaria属性を正しく入れる。 screen readerに配慮する。
  • 汎用的な関数にしてテーマ内で再利用し、コメントで仕様を残す。

必要に応じて、実際のコード例やチェックリストもご用意します。どの部分を深掘りしますか？

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
php パンくずリスト
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次