WordPressでパンくずリストを表示する方法は様々ですが、私のおすすめは自作で作成してパンくずを表示することです。
プラグインを使えば簡単に設置できますが、
- 設定項目が多くて分かりづらい
- デザイン調整がしづらい
- 少し複雑な分岐の設定が難しい
といったデメリットもあります。
そこで今回は、シンプルな条件分岐を使ってパンくずリストを自作する方法をご紹介します。
目次
パンくずリストとは？
パンくずリストとは、現在表示しているページの階層を示すナビゲーションのことです。
例：
ホーム > お知らせ > 記事タイトルユーザーが今どの階層にいるのかを把握しやすくなり、SEOの観点からも内部構造を明確にできるメリットがあります。
実装コード
functions.phpの記述
まずは functions.php に以下のコードを追加します。
function my_breadcrumbs() {
if ( is_front_page() ) return;
echo '<nav class="c-breadcrumbs">';
echo '<a href="' . esc_url(home_url('/')) . '">ホーム</a>';
// 固定ページ
if ( is_page() ) {
global $post;
$ancestors = get_post_ancestors($post);
// 親ページがある場合
if ( $ancestors ) {
$ancestors = array_reverse($ancestors);
foreach ( $ancestors as $ancestor ) {
echo ' <a href="' . get_permalink($ancestor) . '">' . esc_html(get_the_title($ancestor)) . '</a>';
}
}
echo '<span>' . esc_html(get_the_title()) .'</span>';
}
// 通常投稿ページ（お知らせ一覧）
elseif ( is_home() && get_post_type() === 'post' ) {
echo '<span>お知らせ</span>';
}
// 通常投稿ページ（お知らせ詳細）
elseif ( is_single() && get_post_type() === 'post' ) {
// 「お知らせ一覧」用の固定ページID
$news_page_id = 25;
if ( $news_page_id ) {
echo '<a href="' . esc_url( get_permalink($news_page_id) ) . '">お知らせ</a>';
}
echo '<span>' . esc_html( get_the_title() ) . '</span>';
}
// カスタム投稿ページ（一覧）
elseif ( is_post_type_archive() ) {
$post_type = get_post_type_object(get_query_var('post_type'));
echo '<span>' . esc_html($post_type->label) .'</span>';
}
// カスタム投稿ページ（詳細）
elseif ( is_singular() && !is_page() && get_post_type() !== 'post' ) {
global $post;
$post_type = get_post_type_object(get_post_type());
// カスタム投稿のアーカイブページが存在する場合
if ( !empty($post_type->has_archive) ) {
echo '<a href="' . get_post_type_archive_link(get_post_type()) . '">' . esc_html($post_type->label) . '</a>';
}
// 投稿タイトル
echo '<span>' . get_the_title() . '</span>';
}
echo '</nav>';
}テンプレート側での呼び出し
表示したい場所（例：header.php や page.php など）に以下を記述します。
<?php if ( function_exists( 'my_breadcrumbs' ) ) my_breadcrumbs(); ?>これでパンくずリストが表示されます。
コードのポイント解説
① トップページでは表示しない
if ( is_front_page() ) return;トップページにはパンくずは不要なため、早期リターンしています。
② 固定ページの階層取得
$ancestors = get_post_ancestors($post);get_post_ancestors() を使うことで、親ページを配列で取得できます。
階層構造のある固定ページにも対応できます。
③ お知らせ一覧ページのリンク先設定
お知らせ詳細ページで「お知らせ一覧ページへのリンク」を出したい場合は、「お知らせ一覧の固定ページID」を指定して、リンク先を設定します。
$news_page_id = 25;④ カスタム投稿タイプにも対応
- アーカイブページ
- 詳細ページ
どちらにも対応できるように分岐しています。
is_post_type_archive() // アーカイブページ
is_singular() && !is_page() && get_post_type() !== 'post' //詳細ページ自作するメリット
自作するメリットは次の通りです。
- 不要な機能がないため軽量
- デザインを自由に制御できる
- 条件分岐を自分で完全にコントロールできる
- サイト構造に合わせて柔軟に拡張できる
特に、
「お知らせだけ特別な構造にしたい」
「カスタム投稿ごとに表示を変えたい」
といったケースでは、自作のほうが圧倒的に扱いやすいです。
まとめ
WordPressでパンくずリストを表示する方法は複数ありますが、中規模以上のサイトやカスタマイズ前提のサイトでは自作がおすすめです。
シンプルな条件分岐で構築すれば、十分実用的なパンくずリストを実装できます。
ぜひ、自分のサイト構造に合わせてカスタマイズしてみてください。
