デザインやタグが変わらなくても、各ページによって記入されている名称などが変わってしまうようなパンくずリスト、インクルードしたくてもできないという方も多いと思いますので、名称やパスを自分で記入する形でもインクルードできるような形のPHPを作成してみました。
目次
コピペで使用可能！インクルード用パンクズはコチラ
各ページに記載する配列
<?php
$BreadcrumbList = [
'/' => 'TOPページ',
'./' => '一階層したページ',
'' => '二階層したページ'
];
?>左側のシングルクォートの中に相対パスを記述して、右側にページ名を記載します。
インクルード用のPHP
<ul>
<?php
$contentNo = 1;
foreach ($BreadcrumbList as $breadPath => $breadName) {
if(empty($breadPath)){
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">'."\n";
echo '<span itemprop="name">'.$breadName.'</span>'."\n";
echo '<meta itemprop="position" content="'.$contentNo.'"></li>'."\n";
} else {
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">'."\n";
echo '<a itemprop="item" href="'.$breadPath.'">'."\n";
echo $breadName;
echo '</a>'."\n";
echo '<meta itemprop="position" content="'.$contentNo.'"></li>'."\n";
}
$contentNo++;
}
?>
</ul>こちらはSEOにも良いとされている、パンくずにマークアップを追加してある形になっています。
もっとシンプルな一般的なコードは記事の最下部に記載しておきます。
マークアップについては下記リンクよりご確認ください。
Google検索セントラル：パンくずリスト
https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?hl=ja#microdata_1
<?php include(__DIR__.'/inc/breadcrumb.php'); ?>上記のようにインクルードさせることで整理された状態で使用できます。
インクルードさせずに表示させたいところに直接記述しても大丈夫です。
簡単な解説
階層が違う時の書き方
$BreadcrumbList = [
'/' => 'TOPページ',
'./' => '一階層したページ',
'' => '二階層したページ'
];上から順に若い階層を記述します。
2階層目だった場合は下記のように記述をしたら自動で表示される個数が減る仕組みになっています。
※最後の行の最後にはカンマは入れません。
$BreadcrumbList = [
'/' => 'TOPページ',
'' => '一階層したページ'
];現在のページを記載している行の左側のシングルクォートの中は空にします。
条件分岐の部分
if(empty($breadPath)){
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">'."\n";
echo '<span itemprop="name">'.$breadName.'</span>'."\n";
echo '<meta itemprop="position" content="'.$contentNo.'"></li>'."\n";
} 配列の左側が空だった場合に表示するコードです。
この部分にliタグなどに任意のclassをいれるか、divなどのタグを入れたりしてデザインのカスタマイズが可能です。
} else {
echo '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">'."\n";
echo '<a itemprop="item" href="'.$breadPath.'">'."\n";
echo $breadName;
echo '</a>'."\n";
echo '<meta itemprop="position" content="'.$contentNo.'"></li>'."\n";
}配列の左側にパスが入力されていた時に表示するコードです。
aタグなどが追加されているのがわかると思います。
もうちょっとシンプルにしたPHP
<ul>
<?php
foreach ($BreadcrumbList as $breadPath => $breadName) {
if(empty($breadPath)){
echo '<li>'.$breadName.'</li>'."\n";
} else {
echo '<li><a href="'.$breadPath.'">'.$breadName.'</a></li>'."\n";
}
}
?>
</ul>配列の方のルールは変わりませんがとてもシンプルにまとめたコードです。
マークアップなどに慣れていない方などはコチラを使用された方がわかりやすいかもしれません。
まとめ
日本語に対応させている為、どうしても自動ではなくなってしまいますが、フォルダ名を取得する、URLを取得するなどの方法で全自動にするやり方もありますので、気になる方は検索してみてください。
WEBデザイナーを目指されている方やなりたての方はPHPが触れないという方も多くいらっしゃるとおもいますが、少し使用するだけでパンくずリストだけでなくサイトの管理が容易になったりSEOもやりやすくなったりしますので、是非記事に載っているコードをいじったりしていただいて苦手意識をなくすきっかけになったりしたらとおもいます。
