Breadcrumb NavXTでパンくずを動的表示｜HTMLデザインをそのまま使う手順まとめ

2025-11-28

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

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

HTMLパンくずをWordPressで「そのまま」使うために

HTMLとCSSで作ったパンくずリスト、「せっかくデザインしたんだから、WordPressでもあのまま使いたい…！」
そう思ったこと、ありませんか？

でもいざ動的化しようとすると、

プラグイン入れたのにパンくずが出ない
デザインが崩れる
設定しても反映されない

…など、思わぬ落とし穴にハマりがちなんです。私もパンくずがほんとうに苦手で、何度も沼にはまっては抜け出し…を繰り返してきました。

そんな経験から、この記事では静的HTML＋CSSで作ったパンくずデザインを、WordPressでもそのまま再現する方法をまとめていきます。

使うのは、定番プラグインの Breadcrumb NavXT。
そして WordPress が出力する構造を理解し、bcn_display_list() を使うことで、HTMLで作った見た目のまま、動的パンくずとして表示できるという流れを一緒に作っていきましょう！

この記事でわかること

静的HTMLで作ったパンくずデザインを、WordPressにそのまま組み込む方法
bcn_display_list() を使って「そのまま表示＆そのままCSSを適用」仕組み
パンくずが表示されないときのチェックポイント
最短でつまずかずに導入するための流れ

対象の方

オリジナルテーマを作成中で、デザインしたパンくずを使いたい方
静的HTML → WordPress移行中の方
Breadcrumb NavXTの設定で一度でも迷ったことがある方

うさちゃん

“HTMLのパンくずをWordPressでそのまま使いたい！”って人にはピッタリの記事だよ〜！

まずは静的HTML＋CSSのパンくずを確認しよう

WordPressへ組み込む前に、まずは ベースになる静的HTML＋CSSのパンくずリスト をおさらいしておきます。

今回使うのは、前回の記事でも紹介した擬似要素で「>」で区切りを表現した“スマート型パンくず” です。

ありぃブログ

HTMLとCSSで作るパンくずリスト3デザイン HTMLとCSSだけで簡単に作れるパンくずリストを3つのデザインで紹介。コード付きでコピペOK！静的サイトでもすぐ実装できる初心者向けガイドです。

この見た目をWordPressでも再現したい！」という前提で進めていきますね。

完成イメージ

サンプルHTML（静的）

<nav aria-label="Breadcrumb">
  <ul class="breadcrumb">
    <li><a href="/">ホーム</a></li>
    <li><a href="/blog/">ブログ</a></li>
    <li>記事タイトル</li>
  </ul>
</nav>

擬似要素で区切りを作るCSSの特徴

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li {
  position: relative;
  padding-left: 20px;
  margin-right: 8px;
}

.breadcrumb a {
  text-decoration: none;
  font-size: 14px;
  color: #333;
  transition: opacity 0.3s;
}

.breadcrumb a:hover {
  opacity: 0.6;
}

.breadcrumb li:last-child {
  font-weight: bold;
  color: #555;
}

.breadcrumb li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  border-top: 2px solid #0097b2;
  border-right: 2px solid #0097b2;
  transform: rotate(45deg) translateY(-50%);
}

デザインの特徴まとめ

ul > li のシンプルな構造
擬似要素で「＞」のような区切りを作っている
現在ページ (li:last-child) は太字で強調
ホバー時に透明度で軽く反応させる

WordPressと相性が良い理由

WordPress（Breadcrumb NavXT）は<li> を自動生成する仕組みなので、最初から ul > li の構造で作ってあるパンくずとは相性バツグンなんです。

この構造をそのまま、次の章から WordPress のオリジナルテーマへ組み込んでいきます。

※色や余白はテーマに合わせて自由に調整できます◎

WordPress側の準備（必要最低限でOK）

パンくずを動的に表示するには、WordPress環境＋オリジナルテーマが前提になります。

今回は、私が普段と同じようにローカル環境で作ったテーマにパンくずを追加する流れで進めていきますね。

今回の想定環境

WordPressローカル環境（Local / MAMP など何でもOK）
オリジナルテーマ（例：sample-themeなど仮でOK）
パンくずを表示するファイル： index.php、もしくは single.php / 固定ページテンプレートなど

“特別な仕組み”は不要で、普通にテーマを作っていれば導入できます◎

テーマ構成（breadcrumb.phpの置き場所）

パンくずをキレイに管理するために、
テンプレートパーツを1つ作って呼び出す形がいちばんスッキリします。

最低限のテーマ構成はこんな感じ👇

sample-theme/
├── style.css            ← テーマ情報用（WordPressに認識される用）
├── assets/
│   └── style.scss       ← 実際のスタイルを書くファイル
├── index.php
├── header.php
├── footer.php
├── functions.php
└── template-parts/
    └── breadcrumb.php   ← パンくず表示用テンプレート

style.scss は、 functions.php の中でwp_enqueue_style() を使って読み込む形でOKです。

うさちゃん

後からCSSをいじることになるから、assetsで分けておくと管理しやすいんだよ〜！

補足｜スタイル確認用の仮レイアウト

作業中に「CSS効いてる？」「HTML反映されてる？」が分からなくて混乱するとき、ありますよね…。
そんなときは、header / main / footer に仮背景を入れておくと確認しやすいです。

.site-header {
  background-color: #fce4ec;
}
.site-main {
  background-color: #e3f2fd;
}
.site-footer {
  background-color: #ede7f6;
}

これだけでも、「テーマが正しく読み込まれているか」「CSSが反映されているか」が一瞬でわかります◎

ありぃブログ

初心者向け｜WordPressテーマの最小構成と仮レイアウトまとめ | ありぃブログ WordPressでオリジナルテーマを作りながら、プラグインの導入やカスタマイズの検証をしてみたい。でも、いきなり全部のテンプレートを揃えるのは大変…。そんなときに役立…

ここまでできたら準備OK！
次は、いよいよパンくずを“動かす”ためのプラグイン設定に進みます。

Breadcrumb NavXTを導入してパンくずを出力する

WordPressでパンくずを動的に表示するなら、やっぱり定番の Breadcrumb NavXT が便利です。
ここでは、実際の動作に必要な“最低限だけ”まとめています。

1. プラグインのインストール

WordPress 管理画面 → [プラグイン] → [新規追加]
検索窓に「Breadcrumb NavXT」と入力
「今すぐインストール」→「有効化」

有効化すると、［設定］の中に「Breadcrumb NavXT」 が追加されます。

2. 表示設定の確認（最低限ここだけ）

管理画面 → ［設定］ →［Breadcrumb NavXT］ →「一般」タブを開いて、
以下の項目だけチェックしておきましょう。

パンくずの区切り記号

[一般タブ]にある「パンくずの区切り」は、デフォルトで >（>）が入っていますが、
今回はCSSの擬似要素で区切りを作るため “空欄でOK” です。

ホームページテンプレートタイトル

%htitle%→「ホーム」へ変更
（任意でOKですが、“ホーム”と表示させるなら明示しておくとズレません）

補足｜よく使う設定タブの見方

よく触るのは実はここだけ👇

タブ名	用途
一般	ホーム名・区切り記号の設定
投稿タイプ	投稿（ブログ）の親階層の設定
タクソノミー	カテゴリやタグの表示（初期値でOKなこと多い）
投稿者・日付	表示させないことが多いため、初期値のままでOK

事前にやっておくべきWP基本設定（パンくずに直結）

パンくずの形をホーム > ブログ > カテゴリー > 記事タイトルにしたい場合、WordPress本体の設定も合わせておく必要があります。

STEP

固定ページを最低2つ用意（ホーム／ブログ）

ホーム
ブログ（投稿一覧用）

どちらも内容は空でOK。
公開しておけばOKです。

補足メモ

「ホーム」ページを作成

タイトル：ホーム（例）
スラッグ：home（または空欄でもOK）

「ブログ」ページを作成

タイトル：ブログ
スラッグ：blog

2～3記事作っておくと、今後の動作確認や並びチェックにも便利です！

STEP

表示設定

管理画面 → [設定] → [表示設定]

ホームページの表示 → 「固定ページ」
- ホームページ：作った「ホーム」
- 投稿ページ：作った「ブログ」
  （※ここでブログの名称を「お知らせ」等ににすれば、その表記になります）

これで WordPress が「投稿＝ブログページに属するもの」と認識してくれます！

STEP

パーマリンク設定

管理画面 → [設定] → [パーマリンク]

「投稿名」を選択するのがおすすめ
（URLがシンプルでパンくずとの整合性も取りやすい）
（例：https://example.com/test-post）

?p=123 のままだとパンくずがうまく動かないこともあるので注意してください。

ここまでできれば、Breadcrumb NavXTの出力に必要な最低限の準備は完了です！

次は、いよいよパンくずを“表示する側”のコードに入っていきます。

パンくずをテンプレートパーツ化する

パンくずは ほぼ全ページで使う ものなので、
テンプレートパーツとして分けておくと管理しやすくなります。

テンプレートパーツ化するメリット

複数のテンプレートで共通利用できる（例：index.php, page.php, single.php など）
CSSや構造を変えるときも1か所変更でOK
main テンプレートがスッキリして見やすい

1 . breadcrumb.php を作成する

template-parts/ のフォルダ内に
breadcrumb.php を作って、次のコードを入れます。

<?php
if ( function_exists( 'bcn_display_list' ) ) : ?>
  <nav aria-label="Breadcrumb">
    <ul class="breadcrumb">
      <?php bcn_display_list(); ?>
    </ul>
  </nav>
<?php endif; ?>

ポイントはここ👇

bcn_display_list() が <li> を自動生成してくれる
HTMLの ul.breadcrumb と構造がそのまま一致
だから CSSもそのまま使える

2. パンくずを表示したいテンプレートで呼び出す

表示したい場所にこれを入れるだけ👇

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

よく使うのは：

single.php
page.php
archive.php
index.php

呼び出し時のテンプレート全体イメージ

<?php get_header(); ?>

<main class="site-main">

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

  <div class="page-heading">
    <h2>メインコンテンツ</h2>
    <p>これはテスト用のコンテンツです。</p>
  </div>

</main>

<?php get_footer(); ?>

よくある表示されない原因

「表示されない＝コードが間違ってる」と思いがちですが、実際は以下が原因のことが多いです：

Breadcrumb NavXTの設定不足（固定ページ割り当て忘れ）
関数名の間違い（bcn_display() との混同）
トップページでは表示されない
表示するテンプレート自体が正しく呼ばれていない

ここまでできれば、パンくずはほぼ確実に表示される状態になっています！
次のセクションでは、デザインが“静的のまま再現されているか”をチェックしていきましょう◎

表示確認：HTMLのデザインがそのまま効いているか

パンくずの呼び出しコードをテンプレートに追加したら、ブラウザで表示をチェックしてみましょう！

正しく表示されたときのチェックリスト

以下のように表示されていれば 成功です！

ホーム＞ブログ＞投稿タイトル の階層が表示されている
各リンクにホバー時のふわっとした透過効果 がある
最後の要素（現在ページ）は リンクなし＋太字
「＞」は CSSの擬似要素 で表示されている（HTMLには書かれていない）

静的デザインが“そのまま”再現できる理由

今回の方法では、最初に作っていた静的なパンくずHTMLに近い構造を、
ほぼそのままWordPress上で動かすことができています。

その理由はシンプルで、

<ul class="breadcrumb"> の構造 → 静的版と同じ
<li>はプラグインが自動生成するから書き換え不要
CSSは .breadcrumb li に当たるように設計してあるのでそのまま効く

つまり、
HTMLの“枠”はあなたのデザインのまま、
中身だけWordPressが自動で入れ替えてくれるイメージなんです。

「これ、本当に動的なの…？」と不安になったら、
カテゴリーや別の記事に移動してみてください。
パンくずの階層がスッと変わっていれば、しっかり動いています◎

うさちゃん

記事ごとに“勝手にパンくずが変わる”って、地味に感動ポイントよね〜！

表示されない・崩れるときのチェック項目

「同じように書いたのに、なぜか表示されない…」
そんなときは、慌てず順番にひとつずつ見ていきましょう。

固定ページ・投稿ページの設定はOK？

［設定］→［表示設定］で
「ホーム」「ブログ」 の割り当てが正しい？
固定ページは 公開済み？
投稿ページには 実際の投稿記事 がある？

パンくず出力関数が正しいか？

呼び出しているのは bcn_display_list() ですか？
bcn_display() と混在すると、構造が変わってCSSも効きにくくなります。

正しい書き方はこちら👇

<?php if ( function_exists( 'bcn_display_list' ) ) : ?>
  <nav aria-label="Breadcrumb">
    <ul class="breadcrumb">
      <?php bcn_display_list(); ?>
    </ul>
  </nav>
<?php endif; ?>

CSSのクラス名や構造がマッチしているか？

.breadcrumb クラスは <ul> に入っている？
CSSが入っているファイルは、テーマ側でちゃんと 読み込まれている？
SCSSを使っているなら、コンパイルできてる？

投稿ページで本文が出ない場合（single.php）

パンくずは出てるのに、本文だけ空白…？
これはループの書き忘れが原因であることが多いです。

正しいループの例はこちら👇

<?php get_header(); ?>

<main class="site-main">

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

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h1><?php the_title(); ?></h1>

    <div class="post-content">
      <?php the_content(); ?>
    </div>

  <?php endwhile; endif; ?>

</main>

<?php get_footer(); ?>

the_content() を書き忘れると、投稿自体は存在しても 本文は表示されません。

もしこれらを確認しても表示されない場合は、ブラウザのキャッシュやテーマの読み込み順を軽く見直してみてくださいね！