はじめに

パンくずリスト（Breadcrumb）は、現在閲覧しているページがサイト内のどこに位置しているかを示すナビゲーションです。

例えば、以下のような表示になります。

ホーム ＞ WordPress ＞ プラグイン不要！WordPressでパンくずリストを実装する方法

ユーザーが現在地を把握しやすくなるだけでなく、SEOにも効果が期待できるため、多くのWebサイトで採用されています。

パンくずリストはSEOプラグイン（Yoast SEO、Rank Mathなど）でも表示できますが、オリジナルテーマでは「余計なプラグインを増やしたくない」というケースも少なくありません。

そこで今回は、プラグインを使わずにWordPressでパンくずリストを実装する方法を紹介します。

パンくずリストとは？

パンくずリストとは、サイト階層をユーザーへ分かりやすく伝えるナビゲーションです。

例えば、

ホーム
　└ WordPress
　　　└ パンくずリストの記事

なら、

ホーム ＞ WordPress ＞ パンくずリストの記事

と表示します。

これにより、

• 現在地が分かる
• 上位ページへ戻りやすい
• クローラーがサイト構造を理解しやすい

というメリットがあります。

パンくずリストを設置するメリット

SEO対策になる

Googleはサイト構造を重視しています。

パンくずリストがあることで、

• カテゴリー構造
• ページ階層

を理解しやすくなります。

検索結果にもパンくずが表示されることがあります。

---

ユーザビリティが向上する

記事を読んだあと、

「WordPressカテゴリーへ戻りたい」

というケースがあります。

その際、

ホーム ＞ WordPress

をクリックするだけで戻れます。

---

内部リンクが増える

カテゴリーへのリンクが増えるため、

内部リンクの最適化にもつながります。

実装場所

一般的には、

header.php

または

single.php
page.php
archive.php

などタイトルの上へ設置します。

パンくずリストのサンプルコード

以下をそのまま利用できます。

<?php
if (!is_front_page()):
echo '<nav class="breadcrumb">';
echo '<a href="' . home_url('/') . '">ホーム</a>';
if (is_single()) {
 $cat = get_the_category();
 if ($cat) {
  echo ' <span>＞</span> ';
  echo '<a href="' . get_category_link($cat[0]->term_id) . '">';
  echo esc_html($cat[0]->name);
  echo '</a>';
 }
 echo ' <span>＞</span> ';
 the_title();
} elseif (is_page()) {
 echo ' <span>＞</span> ';
 the_title();
} elseif (is_category()) {
 echo ' <span>＞</span> ';
 single_cat_title();
}
echo '</nav>';
endif;?>

コードの解説

トップページでは表示しない

if (!is_front_page()):

トップページだけ非表示になります。

---

ホームへのリンク

home_url('/');

ホームURLを取得します。

例えば、

https://example.com/

になります。

---

投稿ページ

is_single()

投稿ページだけ処理します。

---

カテゴリー取得

get_the_category();

現在の記事のカテゴリーを取得しています。

---

カテゴリーURL

get_category_link();

カテゴリー一覧へのリンクになります。

---

タイトル表示

the_title();

現在の記事タイトルです。

CSS例

.breadcrumb{
 margin-bottom:30px;
 font-size:14px;
}

.breadcrumb a{
 color:#3366cc;
 text-decoration:none;
}

.breadcrumb span{
 margin:0 6px;
 color:#999;
}

シンプルですが十分見やすくなります。

子カテゴリーがある場合

例えば、

WordPress
　└ カスタマイズ
　　　└ パンくずの記事

なら、

ホーム ＞ WordPress ＞ カスタマイズ ＞ 記事

と表示したいケースがあります。

その場合は

get_category_parents();

を使用します。

$cat = get_the_category();
echo get_category_parents($cat[0], true, ' ＞ ');

これだけで親カテゴリーも表示できます。

カスタム投稿の場合

通常の記事ではなく、

• お知らせ
• 制作実績
• 商品

などのカスタム投稿を使う場合は、

is_singular('news');

などで条件分岐すると対応できます。

Schema.org（構造化データ）もおすすめ

パンくずリストは

BreadcrumbList

の構造化データを設定すると、

Googleが理解しやすくなります。

最近のSEOプラグインでは自動対応していますが、

オリジナルテーマでもJSON-LDを追加すれば実装可能です。

プラグインとの違い

プラグインでは

• Rank Math
• Yoast SEO
• Breadcrumb NavXT

などがあります。

しかし、

オリジナルテーマなら

数十行のPHPだけで十分実装できます。

余計なプラグインを増やさないという点でもおすすめです。

実務で意識していること

実務ではパンくずリストを設置する際、

デザインだけでなく保守性も重視しています。

私がよく行うのは、

template-parts/breadcrumb.php

としてパーツ化する方法です。

そして、

<?php get_template_part('template-parts/breadcrumb'); ?>

を各テンプレートから呼び出しています。

こうすることで、

デザイン変更やカテゴリー追加があっても修正箇所が1か所で済みます。

案件でもこの方法を採用することが多く、管理しやすい実装になります。

まとめ

パンくずリストはSEOだけでなく、ユーザーの利便性向上にも役立つ重要な機能です。

オリジナルテーマであれば、プラグインを使わなくてもPHPだけで十分実装できます。

今回紹介したコードをベースに、

• 子カテゴリー対応
• カスタム投稿対応
• 構造化データ対応

まで追加すれば、多くの案件でそのまま使えるパンくずリストになります。

私自身もWordPress案件では、パンくずリストをテンプレートパーツとして実装することが多く、保守性を考慮した構成を意識しています。

ぜひ今回のコードをベースに、自分のテーマへ組み込んでみてください。