スニペット

【コピペだけ】PHPでパンくずリストを最短で作るシンプル実装

PHPでパンくずリストを実装してSEO強化する手順【コピペOK】

サイト制作で高確率で必要になる「パンくずリスト」。
でも、ページごとにパンくずHTMLをベタ書きしていると、階層変更や文言修正が入った瞬間に、全ページを探して直すことになりがちです。

そこでおすすめなのが、パンくずのHTMLを別ファイル（共通パーツ）に切り出して、各ページ側では“配列で中身だけ”定義する方法。

この方式にすると、次のメリットがあります。

  • パンくずのHTMLは 1ファイルで一括管理
  • 各ページは 配列でラベルとURLを設定するだけ
  • TOPは固定（毎回書かない）
  • ページごとに柔軟にパンくずを設定できる

完成イメージ（出力されるHTML）

例：TOP > 会社情報 > 会社概要 の場合

<nav aria-label="Breadcrumb" class="c-breadcrumbs">
    <ol class="c-breadcrumbs__list">
        <li class="c-breadcrumbs__item">
            <a href="/">TOP</a>
        </li>
        <li class="c-breadcrumbs__item">
            <a href="/company/">会社情報</a>
        </li>
        <li class="c-breadcrumbs__item">
            <span aria-current="page">会社概要</span>
        </li>
    </ol>
</nav>

ポイントはこの3つ。

  • 最後の要素はリンクにしない
  • TOPへのリンクは "/" 固定
  • 現在地として aria-current="page" を付ける（アクセシビリティ◎）

aria-current="page"

パンくずの最後（今見ているページ）に付けると、読み上げソフトが「ここが現在のページです」と分かるようになります。
目が見えにくい人でも迷いにくくなるための設定です。

1. 共通ファイル（breadcrumbs.php）を作る

まずは各ページで呼び出す共通ファイルであるbreadcrumbs.php を作成します。

<?php
/**
 * 超シンプル版パンくず
 * - TOP は固定で "/"
 * - 最後の要素はリンクなし（aria-current）
 * - label / url はエスケープして安全に出力
 */

function h($str) {
  return htmlspecialchars((string)$str, ENT_QUOTES, 'UTF-8');
}

// 各ページで $breadcrumbs を定義しておく想定
// 例：[['label'=>'会社情報','url'=>'/company/'], ...]
$items = [];

// TOP 固定
$items[] = [
  'label' => 'TOP',
  'url'   => '/',
];

// ページ側のパンくずを追加
if (!empty($breadcrumbs) && is_array($breadcrumbs)) {
  foreach ($breadcrumbs as $b) {
    $items[] = [
      'label' => $b['label'] ?? '',
      'url'   => $b['url'] ?? null, // 空ならリンクなし扱い
    ];
  }
}
?>

<nav aria-label="Breadcrumb" class="c-breadcrumbs">
  <ol class="c-breadcrumbs__list">
    <?php foreach ($items as $i => $item): ?>
      <?php
        $label = $item['label'] ?? '';
        $link  = $item['url'] ?? null;
        $isLast = ($i === count($items) - 1);
      ?>
      <li class="c-breadcrumbs__item">
        <?php if ($isLast || empty($link)): ?>
          <span aria-current="page"><?= h($label) ?></span>
        <?php else: ?>
          <a href="<?= h($link) ?>"><?= h($label) ?></a>
        <?php endif; ?>
      </li>
    <?php endforeach; ?>
  </ol>
</nav>

2. 各ページでパンくずを定義して読み込む

例えば company/overview.php の場合は、ページ上部にこれを書きます。

<?php

$breadcrumbs = [
  ['label' => '会社情報', 'url' => '/company/'],
  ['label' => '会社概要', 'url' => '/company/overview.php'], 
  // 最後はURLを書いても書かなくても自動でリンクなしになる
];

// パスは「breadcrumbs.php」を置く場所によって適宜変更
include __DIR__ . './breadcrumbs.php';

?>

3. パンくず使用例ページ例

サービスページ：TOP > サービス > 料金 > 詳細

$breadcrumbs = [
  ['label' => 'サービス', 'url' => '/service/'],
  ['label' => '料金',     'url' => '/service/price/'],
  ['label' => '詳細'],
];

お問い合わせ：TOP > お問い合わせ

$breadcrumbs = [
  ['label' => 'お問い合わせ'],
];

おまけ：最低限の見た目を整えるCSS

.c-breadcrumbs {
  font-size: 0.875rem;
  color: #666;
}

.c-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0.5em; /* 行間と横の余白を自然に */
  list-style: none;
  padding: 0;
  margin: 0;
}

.c-breadcrumbs__item {
  display: flex;
  align-items: center;
}

.c-breadcrumbs__item a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.c-breadcrumbs__item a:hover {
  color: #000;
}

/* 区切り（>）を自動で挿入 */
.c-breadcrumbs__item::after {
  content: ">";
  margin-left: 0.5em;
  color: #aaa;
}

/* 最後の要素だけ区切りを消す */
.c-breadcrumbs__item:last-child::after {
  content: "";
  margin: 0;
}

【完全無料】独学で挫折しかけたら、0円で“質問できる環境”を試そう。

独学だと、調べても解決できず手が止まる瞬間があります。
私も実際に登録して、カリキュラム内容と質問導線を一通り試しました。
0円で試せる学習環境を、メリット・注意点込みでレビューにまとめています。

✅ 調べても解決せず、学習が止まりがち
✅ 質問できる相手がいなくて不安
✅ 何から手を付けるべきか迷う
✅ 0円で質問できる環境を試してみたい

体験レビューを読む（無料の理由・注意点も）

まずは雰囲気を知りたい人向けに、体験レビューを用意しました。

-スニペット
-, ,