Breadcrumb NavXTで沼らない！bcn_displayとbcn_display_listの違いと正しい選び方

2025-09-27

記事内にプロモーションを含む場合があります。

パンくずのCSSが効かない？原因は構造にあった｜Breadcrumb NavXTの関数使い分けで解決！

※本記事は「オリジナルテーマや子テーマでパンくずリストを導入したい方」向けです。
既にテーマにパンくず機能がある場合は不要です。

ワンクリックで目的地へGO！

はじめに｜パンくずリスト、表示は簡単だけどスタイルで悩む？

結論：スタイル重視なら bcn_display_list()、最短表示なら bcn_display()。

既に <ul><li> でデザインしている → bcn_display_list() が崩れにくい
まず表示だけしたい → bcn_display()

パンくずリストは、Webサイトのナビゲーションを補助する大切な要素ですが、実装時に悩みが多いパーツでもあります。

WordPressでは「Breadcrumb NavXT」という定番プラグインを使えば、簡単にパンくずリストを表示できます。ですが、実際に導入してみると、

CSSが効かない
構造が崩れる
デザインが思った通りにならない

といった壁にぶつかるケースも少なくありません。

私自身も、パンくずリストの実装で10時間以上、3回ほど沼る経験を繰り返したことがあります。
「パンくずでこんなに苦戦する人なんて他にいるのかな？」と思うほど毎回迷走…。

でも、bcn_display() と bcn_display_list() の構造の違いと使い分け方をきちんと整理して理解した瞬間、「なんだ、こんなにシンプルなことだったのか！」と一気に解決できました！

この記事でわかること

Breadcrumb NavXTの概要と導入方法
bcn_display() と bcn_display_list() の違い
HTML構造の違いとスタイルへの影響
実際の使い分け方と注意点

Breadcrumb NavXTとは？｜WordPress用パンくずプラグインの定番

Breadcrumb NavXT（ブレッドクラムナビXT）は、 WordPressでパンくずリスト（階層ナビゲーション）を自動表示できる人気プラグインです。

主な特徴

WordPressの構造に合わせて自動でパンくずを生成
→ 自作テーマでもゼロから作らなくて済む
投稿・固定ページ・カテゴリ・タグに対応
カスタム投稿・タクソノミーにも柔軟に対応
→ ブログ以外のサイト設計にも対応できる
関数（bcn_display / bcn_display_list）で表示方法を選べる

プラグインを有効化して、テンプレートに1行コードを加えるだけで使えるため、導入ハードルは低いです。
ですが、“出力構造”と“CSSの相性”を考慮せずに導入すると表示が崩れることもあります。

Breadcrumb NavXTの導入手順（概要）

Breadcrumb NavXT はプラグインを有効化するだけでも使えますが、
オリジナルテーマや子テーマに組み込む場合は下記の流れが基本になります。

プラグイン「Breadcrumb NavXT」を有効化
パンくず用のテンプレートファイルを作成
表示したい箇所に呼び出しコードを追加
CSSでスタイルを調整
表示崩れや二重表示をチェック

詳しいコード例や設定方法は別記事でまとめています。

次のセクションでは、
表示関数である bcn_display() と bcn_display_list() の違いと特徴について詳しく解説していきます。

bcn_display() の特徴｜最速で表示したい人向け

bcn_display() は、Breadcrumb NavXT を使ったパンくずリストの表示方法として、
書籍や講座でもよく紹介されている基本の関数です。

コード例

<?php if ( function_exists( 'bcn_display' ) ) : ?>
  <div class="breadcrumb">
    <?php bcn_display(); ?>
  </div>
<?php endif; ?>

出力されるHTMLの例

<div class="breadcrumb">
  <span typeof="v:Breadcrumb">
    <a href="/">ホーム</a>
  </span> › 
  <span typeof="v:Breadcrumb">
    <a href="/blog/">ブログ</a>
  </span> › 
  <span class="current-item">記事タイトル</span>
</div>

特徴まとめ

<div> + <span> + <a> を使ったフラットなHTML構造
区切り文字（セパレータ）は › や > などのテキストで出力される
構造の制御がしづらく、CSSが効きにくいケースがある

向いている人

とにかくパンくずをすぐ表示したい人
デザインは最低限でOKな人
書籍や講座のサンプル通りに導入したい人

bcn_display_list() の特徴｜HTML＋CSS派にうれしい構造

bcn_display_list() は、<ul><li> の構造でパンくずを出力できる関数です。
HTML＋CSSベースでデザインを組んでいる人にとって扱いやすいのが特徴です。

コード例

<?php if ( function_exists( 'bcn_display_list' ) ) : ?>
  <ul class="breadcrumb">
    <?php bcn_display_list(); ?>
  </ul>
<?php endif; ?>

出力されるHTMLの例

<ul class="breadcrumb">
  <li typeof="v:Breadcrumb">
    <a href="/">ホーム</a>
  </li>
  <li typeof="v:Breadcrumb">
    <a href="/blog/">ブログ</a>
  </li>
  <li class="current-item">記事タイトル</li>
</ul>

特徴まとめ

<ul><li> 形式でリスト構造が明確
.current-item などのクラスが自動で付与される
セパレータはCSSの ::before などで調整できる → デザイン自由度が高い

向いている人

HTML＋CSSベースでパンくずをデザインしていた人
CSSで細かくスタイルを当てたい人
構造の意味づけ（セマンティック）を重視したい人

ありぃ

bcn_display() は手軽だけど、CSSが効きにくいことがある。bcn_display_list() はHTMLの構造がしっかりしている分、デザイン面で安心です◎

このあとのセクションでは、bcn_display() と bcn_display_list() のHTML構造を比較しながら、
どちらを選べばよいか、状況別の判断ポイントも整理していきます。

HTML構造の違いを比較

ここでは、bcn_display() と bcn_display_list() がそれぞれどのようなHTMLを出力するのかを、実際のコードで比較してみます。

🟥 bcn_display() の出力例

<div class="breadcrumb">
  <span typeof="v:Breadcrumb">
    <a href="/">ホーム</a>
  </span> › 
  <span typeof="v:Breadcrumb">
    <a href="/blog/">ブログ</a>
  </span> › 
  <span class="current-item">記事タイトル</span>
</div>

特徴

<div> + <span> + <a> を使ったシンプルなフラット構造
区切り（›）はテキストとして挿入される
ul / li を前提にしたCSSは効かない
付与されるクラスが限られるため、カスタマイズ性は低め

🟩 bcn_display_list() の出力例

<ul class="breadcrumb">
  <li typeof="v:Breadcrumb">
    <a href="/">ホーム</a>
  </li>
  <li typeof="v:Breadcrumb">
    <a href="/blog/">ブログ</a>
  </li>
  <li class="current-item">記事タイトル</li>
</ul>

特徴

<ul><li> のリスト形式で階層構造が明確
.current-item などのクラスが自動で付与される
セパレータは ::before などCSSで柔軟に調整可能
既存のHTML＋CSSに自然に組み込みやすい

どちらを選ぶべきか？

すでにHTML＋CSSでパンくずをデザインしている場合 → bcn_display_list() が断然おすすめ
「まずは表示できれば十分」という場合 → bcn_display() でもOK

bcn_display() vs bcn_display_list()｜比較まとめと選び方のヒント

ここまで紹介してきた bcn_display() と bcn_display_list() の違いを、
実装面・カスタマイズ性・使いやすさなどの観点で比較表にまとめました。

比較項目	`bcn_display()`	`bcn_display_list()`
出力構造	`div`, `span`, `a` のフラット構造	`ul`, `li`, `a`のリスト構造
スタイルの当てやすさ	△（工夫が必要）	◎（CSSで当てやすい）
構造的な意味（セマンティック）	弱い（階層が曖昧）	明確（ナビゲーションに適切）
表示までの手軽さ（初心者向き）	◎（コードを貼るだけ）	◯（`<ul>`を用意する必要あり）
カスタマイズ性	低い（上書き・追加が面倒）	高い（既存のHTML＋CSSを活かせる）
相性が良い状況	「とりあえず表示したい」場合	「デザインや構造を整えたい」場合