はじめに
WordPressでパン屑リストをプラグインなしで作る方法には、functions.phpで関数化して一括管理する方法と、各テンプレートファイルに個別にパン屑リスト用のコードを書く方法の２種類があります。
この記事では、後者の「各テンプレートファイルに個別にパン屑リスト用のコードを書く方法」について紹介します。この方は前者と比べて、高度な専門知識が無くても理解・作成・メンテナンスが簡単にできるメリットがあります。
なお、パン屑リストを作る方法の比較（メリット・デメリット）については下の記事をご参照下さい。
注意事項ですが、この記事で紹介するパン屑リストは一般的なコーポレートサイトや個人事業主の事業サイトを想定しています。既存テーマのような個人ブログを対象としたサイト構造には向いていません。たとえば、投稿タイプのカテゴリーがグローバルメニューに並んでいるようなサイト向けには作っていないので、ご注意下さい。
トップページ
トップページにはパン屑リストを表示しないのが通例となっています。トップページに「ホーム」「TOP」などの表示があっても意味がないので当然ですね。
固定ページ
固定ページは、page-$slug.phpをテンプレートフィアルとするページが該当します。サービス説明ページ、お問い合わせ、サイトマップ、プライバシーボリシーなどが含まれます。
パン屑リストの表示例
固定ページのパン屑リストは以下の階層構造で表示するケースが多いです。また、現在表示中の固定ページへのリンクを付けないのが通例です。
ホーム（リンク有り） > 固定ページ名（リンク無し）
PHP記述例
以下に紹介するパン屑リストのコードを、固定ページのテンプレートファイル上のお好みの位置にコピペして使って下さい。なお、最初の固定ページ名を手入力する方法の場合は、その部分の記入を忘れないで下さい。
固定ページ名を手入力する方法
固定ページ毎に固定ページ名を個別に手入力するタイプのコードは下記のとおりです。この方法は手間はかかりますが、パン屑リストに表示する固定ページ名を自由にアレンジできるメリットがあります。
この方法のPHP記述例を下に載せておきます。なお、パン屑リストのホーム表示は、「TOP」や「HOME」などにお好みで変更して下さい。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">ホーム</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
ここに固定ページ名を手入力する
</li>
</ul>
</nav>固定ページ名を自動入力する方法
この方法はパン屑リストに固定ページのページタイトル（H1タグ）が自動で表示されます。そのお陰で、固定ページ間でパン屑リストのコードを共通化できて、パーツファイルとしてget_template_part()関数で読み出すことも可能になるメリットがあります。
この方法の記述例を下記に載せておきます。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">ホーム</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
<?php the_title(); ?>
</li>
</ul>
</nav>CSS記述例
ここで紹介するCSSの記述例はこの記事のすべてのパターンに対応しています。
CSSはclass属性に対してお好みで書い頂いて構わないのですが、一例として下記のような一般的なパン屑リストを表示させたい時のCSSの記述例を下に載せておきます。リンクが貼られている箇所はマウスオーバーするとアンダーラインがアニメーションで現れます。
// -----------------------------------------------------
// パンくずリスト
// -----------------------------------------------------
.p-breadcrumbs_nav {
padding: 10px 40px;
font-size: 1.2rem;
font-weight: 400;
@include fw.mq("tab") {
padding: 10px 32px;
}
@include fw.mq("sp") {
padding: 10px 20px;
}
}
// パンくずリストの横並び
.p-breadcrumbs_ul {
display: flex;
}
.p-breadcrumbs_li {
position: relative; //疑似要素用のポジション
}
.p-breadcrumbs_li-a {
display: block;
width: 100%;
height: 100%;
position: relative; //疑似要素用のポジション
padding-bottom: 0.2em;
}
// マウスホバー効果
.p-breadcrumbs_li-a::before {
background-color: fw.$text;
content: "";
width: 100%;
height: 1px;
position: absolute;
left: 0;
bottom: 0;
margin: auto;
transform-origin: center top;
transform: scale(0, 1);
transition: transform 0.3s;
}
@media (hover: hover) {
.p-breadcrumbs_li-a:hover::before {
transform: scale(1, 1);
}
}
// リストの間隔
.p-breadcrumbs_li + .p-breadcrumbs_li {
margin-left: 1.6em;
}
// 文字列と文字列の間の記号（今回は小さい円形）
.p-breadcrumbs_li::after {
content: "";
position: absolute;
display: inline-block;
height: 6px;
width: 6px;
border-top: 1px solid fw.$text-dark-gray;
border-right: 1px solid fw.$text-dark-gray;
top: 35%;
right: -0.95em;
transform: rotate(45deg);
}
// カレントページ（最右）の文字列の後ろの記号を非表示
.p-breadcrumbs_li.--last-breadcrumb::after {
display: none;
}
// 投稿ページは別表示
.p-breadcrumbs_li.--last-breadcrumb.--single::after {
display: block;
}
// カレントページ（最右）の文字列の色を変更
.p-breadcrumbs_li.--last-breadcrumb {
color: fw.$text-dark-gray;
}
// 投稿ページは別表示
.p-breadcrumbs_li.--last-breadcrumb.--single {
color: fw.$text;
}投稿タイプ
テンプレートファイルが、投稿ページ（single.php）、記事一覧ページ（archive.php）、カテゴリー別記事一覧ページ（category.php）用のパン屑リストのコードです。階層が浅い方から一つずつ紹介していきます。
アーカイブページ（記事一覧）
パン屑リストの表示例は下記のとおりです。
ホーム （リンクあり）> アーカイブページ名（リンクなし）
例）
アーカイブページ名を手入力する方法
パン屑リストのアーカイブページ名を手入力するため一手間かかりますが、単純な方法なので誰にでも再現できるのがメリットです。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">ホーム</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
ここにアーカイブページ名を手入力する
</li>
</ul>
</nav>アーカイブページ名を自動入力する方法
下記記述例のように、アーカイブページ名のタイトルを自動で表示するWordPress関数「the_archive_title()」を利用すれば、自動でアーカイブページのタイトルをパン屑リストに表示させることができます。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">ホーム</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
<?php the_archive_title(); ?>
</li>
</ul>
</nav>上のコードのままでは、アーカイブページ名の前に「アーカイブ：」という余計な文字列が表示されるため、functions.phpに下記の記述を加えて下さい。下記コードをfuctions.phpにコピペすることにより、ページ名の前に「アーカイブ：」「カテゴリ：」「タグ：」「月別：」といった余計な文字列が表示されなくなります。
// -----------------------------------------------------------------
// パンくずリストの「アーカイブ：」などの余計な記述を非表示にする
// -----------------------------------------------------------------
add_filter( 'get_the_archive_title', function ($title) {
if ( is_category() ) {
$title = single_cat_title( '', false );
} elseif ( is_tag() ) {
$title = single_tag_title( '', false );
} elseif ( is_month() ) {
$title = single_month_title( '', false );
} elseif (is_post_type_archive() ){
$title = post_type_archive_title('', false);
}
return $title;
});カテゴリーアーカイブ（カテゴリー別記事一覧）
カテゴリーアーカイブページのパン屑リスト表示例は下記のとおりです。
ホーム（リンク有り） > アーカイブページ名（リンク有り） > カテゴリー名（リンクなし）
例）
カテゴリー別記事一覧ページ（category.php）の場合には自動でカテゴリー名が読み込ませる方法を使う必要があります。理由はテンプレートファイルがcategory.php一つしかないケースが多いからです。ただし、コードを単純化するためにカテゴリーアーカイブページの直接の親のアーカイブページは手入力で行います。
その記述例を下に載せておきます。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">
ホーム
</a>
</li>
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('投稿アーカイブのスラッグを手入力')); ?>" class="p-breadcrumbs_li-a">
ここに投稿アーカイブページのタイトル（H1タグ）を手入力
</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
<!-- カテゴリーのデータを取得 -->
<?php
// カテゴリーのデータを取得
$cat = get_the_category();
$cat = $cat[0];
// カテゴリー名を取得
$cat_name = $cat->cat_name;
?>
<!-- カテゴリー名を出力 -->
<?php echo esc_html($cat_name); ?>
</li>
</ul>
</nav>捕捉：投稿アーカイブ階層の項目
記述例の９行目・10行目の「投稿アーカイブのスラッグを手入力」「ここに投稿アーカイブページのタイトル（H1タグ）を手入力」の箇所はそれぞれご自分のサイトのものに変更願います。
たとえば、投稿アーカイブのスラッグが「blog」、投稿アーカイブページのタイトルが「技術情報」の場合には下記のようになります。
<a href="<?php echo esc_url(home_url('blog')); ?>" class="p-breadcrumbs_li-a">
技術情報
</a>捕捉：カテゴリーアーカイブ階層の項目
下記のコードで自動でカテゴリ名を取得・出力しています。
<!-- カテゴリーのデータを取得 -->
<?php
// カテゴリーのデータを取得
$cat = get_the_category();
$cat = $cat[0];
// カテゴリー名を取得
$cat_name = $cat->cat_name;
?>
<!-- カテゴリー名を出力 -->
<?php echo esc_html($cat_name); ?>ここでは、the_category()関数を使うとカテゴリーリンクも同時に出力され、自動的にaタグが付与されるため使用厳禁です。
個別投稿ページ
下に個別投稿ページのパン屑リストの表示例を載せておきます。
ホーム（リンク有り） > アーカイブページ名（リンク有り） > カテゴリー名（リンク有り） >
例）
上のカテゴリーアーカイブとの違いは、パン屑リスト右末端のカテゴリー名にもリンクが付く点です。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">
ホーム
</a>
</li>
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('ここに投稿アーカイブのスラッグを手入力')); ?>" class="p-breadcrumbs_li-a">
ここに投稿アーカイブのタイトル（H1タグ）を手入力
</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb --single">
<!-- カテゴリーのデータを取得 -->
<?php
// カテゴリーのデータを取得
$cat = get_the_category();
$cat = $cat[0];
// カテゴリー名を取得
$cat_name = $cat->cat_name;
// カテゴリースラッグを取得
$cat_slug = $cat->slug;
?>
<!-- カテゴリーリンクを出力 -->
<a href="<?php echo esc_url(home_url('/')); ?><?php echo esc_html($cat_slug); ?>" class="p-breadcrumbs_li-a">
<!-- カテゴリー名を出力 -->
<?php echo esc_html($cat_name); ?>
</a>
</li>
</ul>
</nav>the_category()関数を使うとカテゴリ名とカテゴリーリンクも同時に出力され、自動的にaタグが付与されます。しかし、隣の項目のaタグとスタイルを同じにしたい場合には不向きですので採用していません。
この記述例では下記のようにカテゴリー名とカテゴリースラッグを取得し、出力しています。
<!-- カテゴリーのデータを取得 -->
<?php
// カテゴリーのデータを取得
$cat = get_the_category();
$cat = $cat[0];
// カテゴリー名を取得
$cat_name = $cat->cat_name;
// カテゴリースラッグを取得
$cat_slug = $cat->slug;
?>
<!-- カテゴリーリンクを出力 -->
<a href="<?php echo esc_url(home_url('/')); ?><?php echo esc_html($cat_slug); ?>" class="p-breadcrumbs_li-a">
<!-- カテゴリー名を出力 -->
<?php echo esc_html($cat_name); ?>
</a>この記述例では、個別投稿ページのタイトル（H1タグ）は表示させていません。理由は長いタイトルがパン屑リストに並ぶと見る人に違和感を与えるからです。大人気WordPressテーマの「swell」でも初期設定は同様です。もし、ページタイルも表示したい場合は、liタグを一つ追加し、the_title()などの関数で簡単にページタイトルを読み込ませることができます。
カスタム投稿タイプ
テンプレートファイルが、カスタム投稿ページ（single-$posttype.php）、カスタム投稿タイプの記事一覧ページ（archive-$posttype.php）、カスタム投稿のカテゴリー別記事一覧ページ（カスタムタクソノミーアーカイブ）（taxonomy.php）用のパン屑リストのコードです。階層が浅い方から一つずつ紹介していきます。
カスタム投稿アーカイブ
カスタム投稿タイプの記事一覧ページです。このページにおけるパン屑リストの表示例は下記のとおりです。基本的に投稿アーカイブページと同様です。
ホーム（リンクあり） > カスタム投稿タイプのアーカイブページ名（リンクなし）
例）
コードは投稿アーカイブページと同様に直接カスタム投稿タイプ名を手入力するか、もしくは下記のWordPress関数「get_post_type_object(get_post_type())->label)」でカスタム投稿タイプ名を取得・出力できます。
以下にカスタム投稿タイプ名を自動的に出力できるパン屑リストの記述例を載せておきます。
<!-- パン屑リスト -->
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">ホーム</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
<!-- カスタム投稿タイプ名を取得・出力 -->
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>
</li>
</ul>
</nav>カスタム投稿のタクソノミーアーカイブ
カスタム投稿のタクソノミーアーカイブページ（taxonomy.php）のパン屑リストは下記のように表示されます。
ホーム（リンクあり） > アーカイブページ名（リンクあり）＞カテゴリー名（リンクなし）
例）
以下にカスタムタクソノミーアーカイブページのパン屑リストの記述例を載せておきます。表示がバグらないように手入力と自動入力のハイブリッド型です。
<!-- パンくずリスト -->
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">
ホーム
</a>
</li>
<li class="p-breadcrumbs_li">
<!-- カスタム投稿タイプのアーカイブページのリンクを取得表示 -->
<a href="<?php echo esc_url(home_url('ここにカスタム投稿タイプのスラッグを直接手入力')); ?>" class="p-breadcrumbs_li-a">
<!-- カスタム投稿タイプ名を表示 -->
ここにカスタム投稿タイプ名を直接手入力
</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
<!-- 現在ページのターム名を表示 -->
<?php single_term_title(); ?>
</li>
</ul>
</nav>- カスタム投稿タイプのアーカイブページ：スラッグ・カスタム投稿タイプ名ともに手入力としていますが、これは下に空のターム階層があるとWordPress関数では表示がバグる可能性があるため、手入力としました。
- ターム名（カスタム投稿タイプのカテゴリー名）：タクソノミーアーカイブページでは、WordPress関数single_term_title();でターム名を自動表示できます。
個別カスタム投稿ページ
カスタム投稿タイプの個別ページ（single-$posttype.php）のパン屑リストは下記のように表示されます。
ホーム（リンクあり） > アーカイブページ名（リンクあり）＞カテゴリー名（リンクあり）＞
例）
このような表示にするためのパン屑リストの記述例を下に載せておきます。
<!-- パンくずリスト -->
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">
ホーム
</a>
</li>
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('ここにカスタム投稿タイプのスラッグを手入力')); ?>" class="p-breadcrumbs_li-a">
ここにタクソノミー名（カスタム投稿タイプ名）を手入力
</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb --single">
<?php
$term = get_the_terms($post->ID, 'works-cat'); //引数の後ろ側はタクソノミースラッグ
$term = $term[0];
$term_cat_slug = $term->slug; //タームのスラッグ名を取得
$term_cat_name = $term->name; //ターム名を取得
?>
<!-- 最初のhome_urlのカッコ内にはタクソノミースラッグを手入力 -->
<a href="<?php echo esc_url(home_url('ここにカスタム投稿タイプのスラッグを手入力/')); ?><?php echo esc_html($term_cat_slug); ?>" class="p-breadcrumbs_li-a">
<!-- ターム名を出力 -->
<?php echo esc_html($term_cat_name); ?>
</a>
</li>
</ul>
</nav>幾つかコードの説明を捕捉しておきます。
カスタム投稿のアーカイブ階層
カスタム投稿のアーカイブのスラッグとページタイトルは手入力です。
カテゴリ（ターム）名の階層
手入力と関数による自動入力のハイブリッドです。
23行目のスラッグ手入力の箇所は、例えばスラッグが「works」の場合は下記のようになります。右側の/を忘れないようにして下さい。
<?php echo esc_url(home_url('works/')); ?>同じく23行目のタームのスラッグとターム名は16行目のget_the_terms関数を使って値を取得しています。基本的にコピペで機能するはずです。
関連記事
カスタム投稿タイプ系列のパン屑リストがバグる確率を減らすために、あわせて下記の設定も行うことをオススメします。
その他のテンプレートページ
以下のページテンプレートのパン屑リストは、サイト構造的にトップページの直下になります。そのため、もしパン屑リストを作る場合には、基本的に固定ページの同じ方法になります。
検索結果ページ（search.php）
検索結果ページ（search.php）のパン屑リストの表示例は下記のとおりです。
ホーム（リンク付き）＞「〇〇」で検索した結果
検索結果ページのパン屑リストのPHP記述例は下記のとおりです。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">ホーム</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
「<?php the_search_query(); ?> 」で検索した結果
</li>
</ul>
</nav>the_search_query関数で、検索結果ページのタイトルと同様に検索語を自動で取得・出力します。
404ページ（404.php）
そもそも404ページにパン屑リストが必要かという話にもなりますが、もし作るのであれば下記のようになります。
ホーム（リンク有り）＞お探しのページは見つかりませんでした。
<nav class="p-breadcrumbs_nav">
<ul class="p-breadcrumbs_ul">
<li class="p-breadcrumbs_li">
<a href="<?php echo esc_url(home_url('/')); ?>" class="p-breadcrumbs_li-a">ホーム</a>
</li>
<li class="p-breadcrumbs_li --last-breadcrumb">
お探しのページは見つかりませんでした。
</li>
</ul>
</nav>WEBサイトの階層構造的に、404ページにパン屑リストは必要ないと考える制作者も一定数いますので、無理に作る必要はないかもしれません。
関連記事
カスタム投稿タイプでカテゴリー未選択時に自動選択させる方法
ターム（カスタム投稿タイプのカテゴリー名）未選択状態を無くために、下記の記事の処置をしておくとパン屑リストの表示がバグる確率を減らすことができます。
