パンくずリストを追加できるWordPressプラグイン「Breadcrumb NavXT」の使い方

「WordPressサイトにパンくずリストを表示したい」「今のデザインを自分のサイトに合わせてカスタマイズしたい」と悩んでいませんか。

Breadcrumb NavXTは、柔軟な設定とSchema.org（構造化データ）への自動対応を備えたWordPressプラグインです。ブロックエディタやウィジェットに対応しており、テーマを問わず最適な場所にパンくずリストを設置できます。

この記事では、Breadcrumb NavXTの基本設定から、「ホーム」の名称変更、特定階層の追加・削除といったカスタマイズ手順まで、実際の検証結果をもとに解説します。

Breadcrumb NavXTとは？

Breadcrumb NavXTは、サイトのページタイトル上部などに、パンくずリスト（現在位置を示すナビゲーション）を生成するWordPressプラグインです。

多くのWordPressサイトで採用されており、サイト独自の階層構造に合わせた細かなカスタマイズに対応できる点が特徴です。

Breadcrumb NavXT

導入が必要なケース

Breadcrumb NavXTのプラグインは、以下のケースで導入の検討が必要となります。

• パンくずリストが実装されていないブロックテーマ（Twenty Twenty-Fiveなど）や、海外製テーマを利用している場合
• カスタム投稿タイプなどを多用しており、テーマ標準の機能ではどうしても対応できない階層構造を作りたい場合

TCDテーマでは、すでにパンくずリストが実装されているため、プラグインの導入は不要です。無理にこのプラグインを導入すると、機能が競合して不具合の原因になる可能性があるため注意が必要です。

メリット

• ノーコードでの配置：ブロックエディタ用の専用ブロックやウィジェットが用意されており、記事内やサイドバーなどへ直感的に配置できる
• 構造化データへの自動対応：Schema.orgに準拠したマークアップが自動で出力され、検索エンジンがサイトの階層構造を把握しやすくなる
• 柔軟な表示設定：トップページの表示を「サイト名」から「ホーム」への名称変更、カテゴリの除外など、細かな調整が管理画面から行える

デメリット（注意点）

• テーマの標準機能と重複・競合する可能性：ご利用のWordPressテーマにパンくずリスト機能がすでに実装されている場合、このプラグインは原則として不要
• ショートコードには非対応：ブロックやウィジェットが使えない場所（ヘッダー上部など）に配置するには、テーマのPHPファイル（header.phpなど）へ直接関数を記述する作業が必要
• カスタマイズの手間がかかる：カスタマイズの自由度が高い反面、設定項目の確認やコードでの実装が必要

Breadcrumb NavXTの使い方と基本的な表示方法

インストール手順

1. WordPress管理画面の左メニューから「プラグイン」 ＞ 「プラグインを追加」 をクリック
2. 右上の検索窓に「Breadcrumb NavXT」と入力して、該当プラグインを探す
3. 表示されたら「今すぐインストール」 をクリックし、完了後に「有効化」

基本的な表示方法

プラグインを有効化しただけでは、サイト上には表示されません。ご自身の環境や用途に合わせて、以下のいずれかの方法で配置します。

方法1：ブロックエディタで配置

WordPressのブロックエディタを開き、「Breadcrumb Trail」という名称のブロックを使って、パンくずリストを追加することができます。

なお、WordPressのバージョン7.0以降から公式の「パンくずリスト」ブロックが利用できるようになりました。アイコンの太さが細い方がWordPress公式、太い方がBreadcrumb NavXTのブロックとなります。

ブロックテーマの場合（サイト全体に一律設置）

Twenty Twenty-Fiveなどのブロックテーマでは、サイト全体のテンプレートにブロックを直接組み込みます。

管理画面の左メニューから「外観」＞「エディター」＞「テンプレート」を開きます。現在利用しているテーマ名をクリックし、パンくずリストを設置したいページのテンプレート（「個別投稿」など）を選択して、編集画面を開きます。

任意の場所（記事タイトルの上など）に「パンくずリスト」ブロックを追加し、保存します。

WordPress公式テーマの「Twenty Twenty Five」で検証してみましたが、パンくずリストは配置できたものの左に寄ってしまっため、CSSでの位置調整が必要となります。

クラシックテーマの場合（特定ページのみの例外的な設置）

通常の投稿や固定ページの編集画面からブロックを追加します。ただし、この方法は「LPなど特定の固定ページだけ、あえて違う場所にパンくずリストを置きたい」といった非常に特殊なケースに限られます。

全記事に一律で表示させたい場合は、後述の「方法2（ウィジェット）」または「方法3（テーマファイル）」を利用してください。

配置するには、ブロック追加ボタン（＋マーク）をクリックし、検索窓に「パンくずリスト」と入力します。

表示されたブロックを選択すると、パンくずリストが表示されます。

なお、WordPress 7.0のパンくずリストブロックよりも、Breadcrumb NavXTの方がサイドバーから詳細な設置を行えます。

方法2：ウィジェットで配置

ご利用のテーマ（クラシックテーマ）に「記事タイトルの上」や「コンテンツ上部」といったウィジェットエリアが用意されているのであれば、ウィジェットで配置するのが最も簡単で安全な方法です。

PHPファイルを直接編集するリスク（画面が真っ白になるなど）を避けつつ、全記事の同じ位置に一律で設置できます。

管理画面の左メニューから「外観」 ＞ 「ウィジェット」 を開きます。もし、「ウィジェット」の設定ページがなければ利用できないテーマの可能性があります。

ウィジェット一覧の中から「Breadcrumb NavXT」を探し、表示させたいウィジェットエリアにドラッグ＆ドロップして設置します。

タイトルや出力方法などの設定を行ったら保存します。ページを開くと、指定のエリアに表示されます。

検証に利用したTCDテーマでは、折り返した文字の行間（行と行の間）がやや詰まっていますので、必要に応じてCSSでの調整が必要となります。

方法3：テーマファイルにコードを記述

記事の上部など、すべてのページの同じ位置に表示させたい場合は、テーマの共通テンプレートファイル（header.php など）にPHPコードを直接記述します。

テーマファイルの編集は、記述箇所を誤ると画面が真っ白になるエラーが起きる可能性があります。必ず事前にバックアップを取り、子テーマを利用して編集してください。

Breadcrumb NavXTの公式ドキュメントでは、パンくずリストを表示させたい場所に、以下のコードを貼り付けるよう記載されています。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php if(function_exists('bcn_display')) {
bcn_display();
}?>
</div>

この1種類のコードを貼り付けるだけで、全ページに最適なパンくずリストを出力します。

ご利用のテーマの記事タイトルの上あたりに該当するコードを見つけて、そこにコードを記述します。

検証では、WordPress公式のクラシックテーマ「Twenty Twenty-One」を使用しました。左側に余白がない状態でパンくずリストが表示されてしまいましので、こちらも同様にCSSでの調整が必要となります。

※注意点：設定画面内のコードについて

プラグインの設定画面（「ホームページテンプレート」などの入力欄）に記載されている <span property=”itemListElement”…> といったコードは、パンくずリストのHTML構造を決めるための「テンプレート」です。

テーマファイルに貼り付けるコードではないため、混同しないように注意してください。

表示内容・デザインのカスタマイズ方法

ショートコードで表示させる方法（非標準機能）

Breadcrumb NavXTは、最新バージョンにおいてもショートコード機能は標準搭載されていません。

インターネット上でショートコードに関する情報が多く見受けられるのは、WordPressテーマの functions.php にコードを追記し、プラグインの機能を呼び出す「自作のショートコード」を作成しているケースがほとんどです。

どうしてもショートコードを使って任意の場所に配置したい場合は、以下の手順で専用のショートコードを作成できます。

サーバーのファイルマネージャーやFTPソフトから、利用しているテーマ（子テーマ推奨）のfunctions.php を開き、以下のPHPコードを追記して保存します。

// Breadcrumb NavXTのショートコード化
function custom_breadcrumb_shortcode() {
    $breadcrumbs = '';
    if ( function_exists( 'bcn_display' ) ) {
        // bcn_display( true ) で出力せずに文字列として取得します
        $breadcrumbs .= '<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">';
        $breadcrumbs .= bcn_display( true );
        $breadcrumbs .= '</div>';
    }
    return $breadcrumbs;
}
add_shortcode( 'bcn_display', 'custom_breadcrumb_shortcode' );

記事の編集画面やウィジェット内で、ショートコード [bcn_display] を入力します。ブロックエディタの場合は、ショートコードブロックを使用します。

ショートコードは、表示したいテーマファイルの任意の場所に記述しても表示できます。

ショートコードを入力した箇所に、構造化データに対応したパンくずリストが表示されるようになります。

余白・位置・行間などを調整する（CSSの追加）

テーマファイルにコードを記述したり、ブロックを配置したりした際、パンくずリストが画面の左端に寄りすぎて不自然に見えることがあります。

サイトのデザインに合わせてすっきり配置できるよう、一般的な2パターンのCSS調整コードを紹介します。以下のWordPressの入力欄またはテーマ専用のCSS入力欄に貼り付けて使用してください。

• ブロックテーマ：「外観」＞「テーマ」＞「カスタマイズ」＞「スタイル」＞「右上のリーダ」＞「追加CSS」
• クラシックテーマ：「外観」 ＞ 「カスタマイズ」 ＞ 「追加CSS」

パターン1：中央寄せ（センタリング）にする

パンくずリストをページの中央に配置したい場合のコードです。

/* パンくずリストを中央に寄せる */
.breadcrumbs {
text-align: center;
margin-top: 20px; /* 上の余白 */
margin-bottom: 20px; /* 下の余白 */
padding: 0 15px; /* 左右の隙間（スマホ対策） */
line-height: 1.8; /* 行間の調整（複数行になった場合） */
}

パターン2：記事の本文（メインコンテンツ）の幅に合わせる

左寄せのまま、記事の本文の開始位置とパンくずリストの左端の位置をきれいに揃えたい場合のコードです。

/* 本文の幅に合わせて余白を作る */
.breadcrumbs {
max-width: 1200px; /* サイトの本文の最大幅に合わせる */
margin-left: auto;
margin-right: auto;
margin-top: 25px; /* 上の余白 */
margin-bottom: 25px; /* 下の余白 */
padding: 0 20px; /* 画面端に張り付かないための左右の隙間 */
line-height: 1.8; /* 行間の調整（複数行になった場合） */
}

※ max-width: 1200px; の数値は、利用しているテーマの本文横幅（1000pxや1100pxなど）に合わせて調整してください。

「ホーム」の名称変更

パンくずリスト上のトップページの表記（デフォルトはサイト名）を「ホーム」などに変更する手順です。

はじめに、WordPress管理画面の「設定」＞「Breadcrumb NavXT」をクリックします。

続いて、「一般」タブを開き、「ホームページのパンくず」セクションにある「ホームページテンプレート」の入力欄を確認します。

%htitle%と記述されている箇所を、「ホーム」や「トップページ」など任意のテキストに書き換えます。

該当ページを開くと、パンくずリスト上のトップページ名（サイト名）が「ホーム」に変換されます。

区切り記号の変更や画像化

パンくずリストの各階層を区切る記号を変更する手順です。

「一般」タブを開き、「パンくずの区切り」の入力欄を確認します。デフォルトでは &gt; （ > の意味）が入力されています。ここを任意の記号（例： / や | ）に書き換えて保存します。

記号ではなくアイコン画像を使用したい場合は、この欄にHTMLの<img>タグを直接入力します。

入力例： <img src="アイコン画像のURL" alt="区切り" />

ページを表示すると、区切りが「>」から別の区切り記号やアイコン画像などに変わります。

不要な階層を削除・非表示にする

Breadcrumb NavXTでは、サイトの構造に合わせてパンくずリストの階層を柔軟に追加・削除できます。

トップページと投稿を非表示にする

設定画面から「一般」タブを開き、該当するチェックを外して保存します。

この設定により、トップページと投稿は、パンくずリストの階層として表示されなくなります。

カテゴリーを非表示にする

投稿ページ（ブログ記事など）のパンくずリストから、一括してカテゴリーの階層を消去したい場合の公式設定です。

WordPress管理画面から「設定」＞「Breadcrumb NavXT」＞「投稿タイプ」 タブをクリックします。

その後、「投稿階層の表示」のチェックを外し、画面最下部の 「変更を保存」 をクリックすれば、カテゴリーが非表示になります。

構造化データの出力確認

Breadcrumb NavXTは、検索エンジンがサイト構造を理解するための「構造化データ（Schema.orgのBreadcrumbList）」を標準で自動出力します。そのため、構造化データに関する特別な追加設定はプラグイン側では不要です。

設定後は、意図した通りに検索エンジンに認識されているか、Googleの公式ツール「リッチリザルトテスト」を用いて検証を行います。

はじめに「リッチリザルトテスト」を開き、パンくずリストを設置したページのURLを入力し、「URLをテスト」をクリックします。

分析完了後、検出された項目のリストに「パンくずリスト」と表示され、緑色のチェックマーク（有効）が付いていれば正常に出力されています。

※今回はテスト環境のサイトを使用し、検索エンジンにクロールさせない設定にしているため「クロールに失敗」と表示されています。

もしテスト結果に構造化データのエラーが表示される場合は、以下の原因が考えられます。

• テーマとの二重出力：利用しているWordPressテーマにも構造化データの出力機能がある場合、コードが重複してエラーになることがあります。テーマ側をOFFに設定するか、プラグインを無効化してください。
• キャッシュの影響：キャッシュプラグインを利用している場合、古い状態のページが読み込まれている可能性があります。WordPressのキャッシュをクリアしてから、再度テストを実行してください。

よくあるトラブルと解決策

パンくずリストが表示されない

設定を終えても画面にパンくずリストが表示されない場合は、以下の点を確認してください。

• テーマファイルへの記述が間違っていないか：PHPファイル（header.phpなど）に直接コードを追記した場合、記述する場所が間違っていると表示されません。また、<?php bcn_display(); ?> の関数が正しく記述されているか確認してください。
• キャッシュが残っていないか：キャッシュプラグインを利用している場合や、サーバー側のキャッシュ機能が有効な場合、古い画面が表示されたままになることがあります。一度キャッシュをクリアして再読み込みを行ってください。

エラーが出る・画面が真っ白になる

テーマのPHPファイルを編集した直後にエラーが出た場合、コードの構文エラー（全角スペースの混入や、セミコロンの抜けなど）が原因です。

まずはサーバーのファイルマネージャーやFTPソフトを使用して、編集前の状態（バックアップ）に戻してください。復旧後、改めて記述するコードに誤りがないか確認した上で、慎重に編集を行います。

また、サーバー側のセキュリティ機能やセキュリティ・プラグインが影響して設定が変更できない（エラーが表示される）場合もあります。

筆者の利用環境では、セキュリティプラグインが影響して403エラーが表示されました。

このセキュリティプラグインを無効化したところ、正常に設定変更をすることができました。

変更した設定が反映されない・削除できない

管理画面で「ホーム」の名称変更や階層の削除を行ったのに、実際の画面に反映されない場合は、テーマの機能と競合している可能性が高いです。

多くのWordPressテーマには、独自のパンくずリスト出力機能が備わっています。

テーマ側のパンくずリストが表示されたままになっている可能性があるため、テーマの設定から独自のパンくずリスト表示機能を「オフ」に変更してください。

まとめ

Breadcrumb NavXTは、サイト独自の構造に合わせたパンくずリストの生成と、細やかなカスタマイズが可能なWordPressプラグインです。

テーマ標準のパンくずリスト機能では対応しきれない「特定階層の追加・除外」や「表示テキストの変更」が必要な場合に役立ちます。

また、構造化データ（Schema.org）が自動出力されるため、検索エンジンにサイト構造を正確に伝える用途でも有効です。

ご自身のサイト環境に合わせて設定を調整し、読者と検索エンジンの双方にとって分かりやすいナビゲーションの構築に活用してください。