スマートにパンくずリストを実装する

PHPなどで静的サイトを構築している時に使えそうな、パンくずリストをスマートに簡易的に実装する例のサンプルです。

色々な方法があるかと思いますので必ずしもこれがスマートというわけではないかもしれませんが、割と私個人的によく利用している方法です。毎回ページ毎にマークアップする必要がなくなります。

早速ですが以下が例になります。functions.php等に設置して利用を想定しています。（※ コーディング規約はPSR2です）

/**
 * パンくずリスト生成
 * @param array $page_relation_list 兄弟関係のページが入った連想配列.
 * @return string htmlテキストを返します.
 */
function c_gen_breadcrumbs($page_relation_list)
{
    $_ = function ($s) {
        return $s;
    };

    $html_first = <<< EOM
    <span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="{$_(BREADCRUMBS_TOP)}" href="{$_(SITEURL)}" class="home"><span property="name">{$_(BREADCRUMBS_TOP)}</span></a><meta property="position" content="1"></span>
EOM;

    $i     = 2;
    $html  = "<div class='l-breadcrumbs' typeof='BreadcrumbList' vocab='https://schema.org/'>";
    $html .= "<div class='l-breadcrumbs__inner'>";
    $html .= $html_first;
    foreach ($page_relation_list as $page_name => $page_url) {
        $html .= "<span property='itemListElement' typeof='ListItem'>";
        $html .= "<a property='item' typeof='WebPage' title='{$page_name}' href='{$_(SITEURL)}{$page_url}/'>";
        $html .= "<span property='name'>{$page_name}</span>";
        $html .= '</a>';
        $html .= "<meta property='position' content='{$i}'>";
        $html .= '</span>';
        $i ++;
    }
    $html .= "</div></div>\n";

    return $html;
}

受け取った配列$page_relation_listを元にパンくずリストをHTMLで返すという簡易的な処理です。配列の数分だけ結合代入演算子.=を使ってひたすら結合していく流れになっています。

途中で出てくるSITEURLとBREADCRUMBS_TOPは定数なので、common.phpなどに最初で記述しておくと良いでしょう。上記例ではWebサイト制作を想定しているのであえて定数としておきました。

define('SITEURL', 'https://cofus.work');
define('BREADCRUMBS_TOP', 'トップページ');

あとは各ページにて配列$page_relation_listにページ名とディレクトリを文字列で指定してあげて、c_genBreadcrumbsで出力します。配列の中の数を増やしていくと多階層に対応することが出来る仕様です。

// 例）第一階層の場合.
$page_relation_list = [
    '下層ページ' => '/test',
];

// 例）第二階層の場合.
$page_relation_list = [
    '下層ページ1' => '/test1',
    '下層ページ1-1' => '/test1/test1-1',
];

echo c_genBreadcrumbs($page_relation_list);

ディレクトリ指定の部分は末尾のスラッシュ（トレイリングスラッシュ）は不要です。上記例ではありで統一しているので無しで統一させたい場合はc_gen_breadcrumbsで該当部分のスラッシュを消すと良いでしょう。

出力されるマークアップは以下になります（※ 見やすい様整形しています）

<div class='l-breadcrumbs' typeof='BreadcrumbList' vocab='https://schema.org/'>
  <div class='l-breadcrumbs__inner'>
    <span property="itemListElement" typeof="ListItem">
      <a property="item" typeof="WebPage" title="トップページ" href="https://cofus.work" class="home">
        <span property="name">トップページ</span>
      </a>
      <meta property="position" content="1">
    </span>
    <span property='itemListElement' typeof='ListItem'>
      <a property='item' typeof='WebPage' title='下層ページ' href='https://cofus.work/test/'>
        <span property='name'>下層ページ</span>
      </a>
      <meta property='position' content='2'>
    </span>
  </div>
</div>

Googleの構造化データテストツールで確認しても問題無さそうですね^^

ちなみに私はWordPress等のCMSでもパンくずは上記例を元に実装しています。パンくず程度でしたらプラグインを使う必要無いので是非参考にしてみて下さい。