MENU

phpでパンくずリストの作り方をわかりやすく解説

大規模情報サイト運営
php パンくずリスト 作り方
2025/11/29
目次

はじめに

本書の目的

この文書は、PHPを使ってWebサイトにパンくずリスト（Breadcrumb）を実装する方法をやさしく解説します。初心者にもわかりやすく、基本の考え方から具体的な実装手順まで順を追って説明します。

想定読者

  • HTMLとPHPの基礎が分かる方
  • WordPressのテーマ編集ができる方
  • 自作でパンくずを作りたい、または既存プラグインを理解したい方

本書の構成と進め方

第2章でパンくずリストの役割と構成要素を説明します。第3章と第4章で、プラグインを使わない方法とプラグインを使う方法をそれぞれ具体的に示します。第5章では投稿・固定ページ・カスタム投稿など複数タイプへの対応、第6章でJSON-LDによる構造化データの追加方法を扱います。最終の第7章で実装時の注意点をまとめます。

本文を読む前に

実装例はシンプルなコード中心です。実際のテーマやサイト構成に合わせて調整してください。動作確認はローカル環境やステージングで行うことをおすすめします。

パンくずリストとは何か

定義と役割

パンくずリストは、今いるページの位置を示すナビゲーションです。サイトの階層（例：ホーム > カテゴリ > 記事）を順に表示し、ユーザーがどこにいるか一目で分かります。リンクとして機能するため、上位ページへ戻る操作も簡単です。

ユーザーにとっての利点

  • 迷わず移動できる：階層が分かれば目的の情報へ早く到達できます。
  • 文脈が分かる：現在のページがどのカテゴリーに属するか理解しやすくなります。
  • 使い勝手の向上：特に深い構造のサイトで有効です。

SEOへの影響

パンくずは検索エンジンにも有益です。クローラーがサイト構造を把握しやすくなり、検索結果でリッチ表示される可能性があります。あくまで補助的な要素ですが、内部リンクの整理にも役立ちます。

表示例と種類

  • 階層型：ホーム > カテゴリ > ページ（典型的）
  • 属性型：ホーム > メンズ > ジャケット（商品サイト向け）
  • パス型：URLパスそのまま表示する方法

いつ使うべきか

多階層のサイトや商品が多いサイト、カテゴリー分けが明確なブログでは特に有効です。単一ページや極めてシンプルな構成では不要な場合もあります。

WordPressでプラグインを使わない実装方法

概要

functions.phpにカスタム関数を作り、ページの種類（トップ、投稿、固定ページ、カテゴリ、タグ、アーカイブなど）を判定して

    形式で出力します。テンプレート側で関数を呼び出し、CSSで見栄えを整えます。

    functions.php に追加する関数（例）

    function my_breadcrumbs(){
  echo '<ul class="breadcrumb">';
  echo '<li><a href="'.home_url().'">ホーム</a></li>';
  if(is_single()){
    $cats = get_the_category();
    if($cats){
      $cat = $cats[0];
      echo '<li><a href="'.get_category_link($cat->term_id).'">'.esc_html($cat->name).'</a></li>';
    }
    echo '<li>'.get_the_title().'</li>';
  }elseif(is_page()){
    if($post->post_parent){
      $parent = get_post($post->post_parent);
      echo '<li><a href="'.get_permalink($parent->ID).'">'.get_the_title($parent->ID).'</a></li>';
    }
    echo '<li>'.get_the_title().'</li>';
  }elseif(is_category()){
    echo '<li>'.single_cat_title("",false).'</li>';
  }elseif(is_tag()){
    echo '<li>'.single_tag_title("",false).'</li>';
  }elseif(is_home() || is_front_page()){
    // トップはすでに表示済み
  }
  echo '</ul>';
}

    テンプレートで呼び出す

    単純に表示したい場所に以下を置きます。

    <?php if(function_exists('my_breadcrumbs')) my_breadcrumbs(); ?>

    CSSで見栄えを整える（例）

    .breadcrumb{list-style:none;padding:0;margin:0}
.breadcrumb li{display:inline;margin-right:8px}
.breadcrumb li+li:before{content:'›';margin-right:8px;color:#666}

    補足

    • カテゴリ階層やカスタム投稿タイプは必要に応じてget_post_typeやget_ancestorsで拡張してください。
    • 出力はHTMLでシンプルに保ち、構造化データは別途JSON-LDで追加することを推奨します。

    プラグインを使用した実装方法

    概要

    Breadcrumb NavXTプラグインを使うと、手軽にパンくずリストを表示できます。設定画面で区切り記号や表示形式を調整し、テンプレートに専用関数を置くだけで自動生成されます。

    インストールと有効化

    1. WordPress管理画面で「プラグイン」→「新規追加」を開きます。
    2. 検索欄に「Breadcrumb NavXT」と入力し、該当プラグインを見つけます。
    3. 「今すぐインストール」をクリックし、その後「有効化」します。

    設定のカスタマイズ

    1. 管理画面の「設定」→「Breadcrumb NavXT」を開きます。
    2. 「区切り文字（Separator）」で任意の文字（例：›、/、→）を指定します。
    3. 表示形式や表示する階層（ホームを表示するか、投稿タイプごとの扱いなど）もここで調整できます。
    4. 設定を保存して、サイトで見た目を確認してください。

    テンプレートへの設置方法

    テーマの表示箇所（例：header.phpやsingle.phpのタイトル上）に次のコードを追加します。表示できるか確認するために関数存在チェックを入れます。

    if ( function_exists( 'bcn_display' ) ) {
  bcn_display();
}

    これでページごとに適切なパンくずが自動で出力されます。固定ページや投稿、アーカイブでも動作します。

    見た目の調整（簡単なCSS例）

    次のようにCSSでスペースや区切り文字の色を調整できます。

    .breadcrumb { list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: inline; margin-right: 0.5em; }
.breadcrumb li + li:before { content: ">"; margin-right: 0.5em; color: #666; }

    テーマによってクラス名が異なる場合があります。ブラウザの検査ツールで実際のHTML構造を確認して適用してください。

    補足

    プラグインは手軽ですが、細かなマークアップや構造化データの出力を自分で制御したい場合は、カスタム実装を検討してください。

    複数ページタイプへの対応

    概要

    投稿（single）、カテゴリ、タグ、カスタムタクソノミーなど、ページタイプごとに適切なパンくずを出力する方法を解説します。目的は訪問者に現在地を分かりやすく示すことです。

    投稿ページ（記事）

    構造例：ホーム > カテゴリ > 記事タイトル
    – get_the_category()でカテゴリ配列を取得し、代表カテゴリを選びます（例：最初の要素、またはプラグインの「主要カテゴリ」を使用）。
    – カテゴリの親がある場合は親も遡って表示します。

    簡単なコード例：

    $cats = get_the_category();
if($cats){ $cat = $cats[0]; echo get_category_parents($cat->term_id, true, ' > '); }
echo get_the_title();

    カテゴリページ

    親カテゴリを含めた階層表示が重要です。get_queried_object()で現在のカテゴリを取得し、get_category_parents()で親をまとめて表示します。

    タグページ

    タグは階層を持たないので、ホーム > タグ名 の形式が基本です。get_queried_object()でタグ情報を読み取り、名称とリンクを表示します。

    カスタムタクソノミー

    • hierarchical（階層）なタクソノミーはカテゴリと同様に親を遡って表示します。
    • 非階層（例：ブランドタグ）はタグと同様に単一表示にします。

    取得方法の例：

    $term = get_queried_object();
echo '<a href="'.home_url().'">ホーム</a> > ';
echo get_term_parents_list($term->term_id, $term->taxonomy, array('separator' => ' > '));

    実装時の注意点

    • 代表カテゴリが不明な場合は第一要素を使うか、サイト方針を決めておきます。
    • リダイレクトや404ではパンくずを出さない方が親切です。
    • マークアップはリンクとテキストで分け、スクリーンリーダーに配慮してください。

    JSON-LDでのパンくずリスト実装

    概要

    パンくずリストをJSON-LDで出力すると、検索エンジンが構造化データとして認識します。これにより検索結果でパンくずが表示される可能性が高まり、ユーザーにとっても分かりやすくなります。

    JSON-LDの基本構造

    最低限必要な項目は@context、@type、itemListElement（配列）です。各要素はposition、name、item（URL）を持ちます。

    シンプルな静的例

    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {"@type": "ListItem","position": 1,"name": "ホーム","item": "https://example.com/"},
    {"@type": "ListItem","position": 2,"name": "ブログ","item": "https://example.com/blog/"}
  ]
}
</script>

    WordPressで動的に出力する例（簡易）

    headerに出すと良いので、functions.phpに以下を追加します。

    function my_breadcrumb_jsonld(){
  $items = array();
  $items[] = array('@type'=>'ListItem','position'=>1,'name'=>'ホーム','item'=>home_url('/'));
  // 現在ページに応じて追加
  if(is_single()){
    $items[] = array('@type'=>'ListItem','position'=>2,'name'=>get_the_title(),'item'=>get_permalink());
  }
  echo '<script type="application/ld+json">'.wp_json_encode(array('@context'=>'https://schema.org','@type'=>'BreadcrumbList','itemListElement'=>$items), JSON_UNESCAPED_UNICODE).'</script>';
}
add_action('wp_head','my_breadcrumb_jsonld');

    出力場所と検証

    head内に出すと確実に認識されます。出力後はGoogleのRich Results Testで検証してください。構造が正しければエラーや推奨が表示されます。

    注意点

    名称やURLは確実に一意にし、重複や循環がないようにしてください。動的生成する場合は文字列のエスケープや配列の順序に注意し、正しいpositionを付けてください。

    実装時の注意点

    概要

    パンくずはサイト構造を示すため、設計段階で方針を決めます。ページ種別ごとの表示ルールや表示順を先に整理してください。

    カスタマイズの観点

    自サイトの階層や用途に合わせて文言や区切り文字を変えます。たとえばECならカテゴリ→サブカテゴリ→商品、ブログならカテゴリ→投稿といった流れを明確にします。

    プラグインか自作か

    管理のしやすさや拡張性で選びます。プラグインは手軽で機能が豊富です。自作は軽量で細かい挙動を制御できます。運用負荷や将来の変更を考慮して決めてください。

    HTMLとCSS

    多くの場合、PHPで出力されるのは最小限のHTMLです。見た目は必ずCSSで整えます。スマホ表示や長いパンくずの折返し、区切りの視認性に留意してください。

    アクセシビリティと構造化データ

    aria属性で現在位置を示すと分かりやすくなります。JSON-LDやMicrodataで構造化データも併用して検索エンジンに正しく伝えます。

    テストと運用

    リンク切れや重複表示、ページネーション対応をチェックしてください。キャッシュ環境では表示が古くならないよう注意します。

    注意点

    同一ページに複数のパンくずを出さない、重複した構造化データを避ける、表示と内部データが一致することを常に確認してください。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

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

この記事を書いた人

userのアバター user

関連記事

目次