ワードプレス(WordPress)のブログサイトにパンくずリストを表示してくれるプラグイン Breadcrumb NavXT を解説します。
- Breadcrumb NavXTの使い方と詳細な設定方法がわかります
- パンくずリストのデザインのカスタマイズ方法がわかります
Breadcrumb NavXTで実現できること
Breadcrumb NavXTプラグインを入れると実現できることは次の1つです。
ブログサイトにパンくずリストを表示できる
- 固定ページにもパンくずリストを表示できる
パンくずリストはWordPressのテーマによっては最初から実装されているので不要ですが、例えばWordPressのテーマの「JIN」だとフッター(投稿記事下部)だけしかパンくずリストを表示してくれません。
こういった場合にBreadcrumb NavXTプラグインを使えば記事上部にもパンくずリストを表示させることが可能です。
さらに固定ページやカスタム投稿タイプにもパンくずリストを表示することができます。
Breadcrumb NavXTを有効化したあと、ウィジェットのブロックにBreadcrumb NavXTがあるので適用して利用します。
またはWordPressテーマのheader.phpにPHPコードを直接記述します。
Breadcrumb NavXTのインストール方法
Breadcrumb NavXTプラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
- 「新規追加」をクリックします
- 検索ボックスに”Breadcrumb NavXT”と入力すると下に検索結果が表示されます
- ”Breadcrumb NavXT”の「今すぐインストール」ボタンをクリックします
“Breadcrumb NavXT”のインストール完了画面↑Breadcrumb NavXTのインストールが完了すると有効化ボタンが表示されるのでクリックします。
“Breadcrumb NavXT”を有効化すると表示される画面これでBreadcrumb NavXTのインストールと有効化は完了です。
Breadcrumb NavXTの設定と使い方
Breadcrumb NavXTの設定画面はダッシュボード(管理画面)にある「Breadcrumb NavXT」です。
WordPressのダッシュボード(管理画面)↑Breadcrumb NavXTの設定画面はWoredPressのダッシュボード(管理者画面)の「設定」内の「Breadcrumb NavXT」をクリックします。
Breadcrumb NavXTの設定
Breadcrumb NavXTの設定画面は下記の4つの項目があります。
- 一般
- 投稿タイプ
- タクソノミー
- その他
設定項目数は多いですが殆ど利用しない設定ばかりです。
次項では各設定タグの大事な個所だけピックアップして解説します。
①一般
Breadcrumb NavXTの一般設定画面| 一般設定項目名 | 意味 |
|---|---|
| パンくずの区切り | 階層の区切り文字を指定。初期設定は> |
| 現在の項目にリンク | 表示している記事タイトルの階層のパンくずリストをリンクにするか否か |
| 分割ページパンくず | トップ画面にパンくずリストと何ページ目かが表示される |
| 分割ページテンプレート | 分割ページパンくず有効化時に文字を指定。初期設定はページ |
| ホームページパンくず | パンくずリストにトップページを含めるか否か |
| ホームページテンプレート | ホームページパンくずに表示する文字を指定。初期設定はサイト名 |
| ホームページテンプレート (リンクなし) | ホームページパンくずがリンクになっていない時のみ使われる |
| ブログを示すパンくず | サブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定 |
| メインサイトのパンくず | サブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定 |
| メインサイトのホームページテンプレート | サブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定 |
| メインサイトホームテンプレート (リンクなし) | サブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定 |
パンくずの区切りは初期設定は特殊文字の「>」になっていますが、ブログサイト上では「＞」と表示されます。
ちなみに半角の空白は「 」を入力します。
設定を変更したほうが良い箇所は「ホームページテンプレート」だけです。
初期設定では「%htitle%」となっていてブログサイト名になっているので、「Home」や「ホーム」などに変更することをおすすめします。
②投稿タイプ
Breadcrumb NavXTの投稿タイプ設定画面| 投稿タイプ設定項目名 | 意味 |
|---|---|
| 投稿テンプレート | 投稿記事の階層のパンくずリストに表示する文字を指定。初期設定は記事のタイトル |
| 投稿テンプレート(リンクなし) | 投稿パンくずリストがリンクになっていない時のみ使われる |
| 投稿階層表示 | 投稿ページを階層化して表示 |
| 投稿 Hierarchy Use Parent First | 投稿ページの親を階層に使用する。親階層がなくなると経由元を考慮してパンくずリストを表示する |
| 投稿階層表示におけるリファラーページの考慮 | ページの経由元を考慮してパンくずリストを表示する。例えばアーカイブページを経由して投稿ページを表示した場合はパンくずリストに日付が表示される |
| 投稿階層 | パンくずリストを階層表示する時の基準を指定。親投稿、日付、カテゴリー、タグ、フォーマットから選択可能 |
| 固定ページテンプレート | 固定ページの階層のパンくずリストに表示する文字を指定。初期設定は固定ページのタイトル |
| 固定ページテンプレート(リンクなし) | 固定ページパンくずリストがリンクになっていない時のみ使われる |
| メディアテンプレート | メディアページの階層のパンくずリストに表示する文字を指定。初期設定はメディアページのタイトル |
| メディアテンプレート(リンクなし) | メディアページパンくずリストがリンクになっていない時のみ使われる |
| メディアルートページ | メディアページの親を固定ページから指定する |
| メディアアーカイブ表示 | パンくずリストに、メディアアーカイブのパンくずを表示 |
| メディア階層表示 | メディアページを階層化して表示 |
| メディア Hierarchy Use Parent First | メディアページの親を階層に使用する。親階層がなくなると経由元を考慮してパンくずリストを表示する |
| メディア階層表示におけるリファラーページの考慮 | ページの経由元を考慮してパンくずリストを表示する。例えばアーカイブページを経由してメディアページを表示した場合はパンくずリストに日付が表示される |
| メディア階層 | パンくずリストを階層表示する時の基準を指定。親投稿、日付から選択可能 |
| CTAテンプレート | CTAページの階層のパンくずリストに表示する文字を指定。初期設定はCTAページのタイトル |
| CTAテンプレート(リンクなし) | CTAページパンくずリストがリンクになっていない時のみ使われる |
| CTAルートページ | CTAページの親を固定ページから指定する |
| CTAアーカイブ表示 | パンくずリストに、CTAアーカイブのパンくずを表示 |
| CTA階層表示 | CTAページを階層化して表示 |
| CTA Hierarchy Use Parent First | CTAページの親を階層に使用する。親階層がなくなると経由元を考慮してパンくずリストを表示する |
| CTA階層表示におけるリファラーページの考慮 | ページの経由元を考慮してパンくずリストを表示する。例えばアーカイブページを経由してCTAページを表示した場合はパンくずリストに日付が表示される |
| CTA階層 | パンくずリストを階層表示する時の基準を指定。親投稿、親投稿、日付から選択可能 |
投稿タイプはパンくずリストの最下層にあたる記事ページの設定項目になります。
投稿タイプの設定で変更する箇所はありません。初期設定のままで大丈夫です
③タクソノミー
Breadcrumb NavXTのタクソノミー設定画面| タクソノミー設定項目名 | 意味 |
|---|---|
| カテゴリーテンプレート | パンくずリストの階層をカテゴリーにした場合の設定。初期設定はカテゴリー名 |
| カテゴリーテンプレート(リンクなし) | パンくずリストがリンクになっていない時のみ使われる |
| タグテンプレート | パンくずリストの階層をタグにした場合の設定。初期設定はタグ名 |
| タグテンプレート(リンクなし) | パンくずリストがリンクになっていない時のみ使われる |
| フォーマットテンプレート | パンくずリストの階層をフォーマットにした場合の設定。初期設定はタグ名 |
| フォーマットテンプレート(リンクなし) | パンくずリストがリンクになっていない時のみ使われる |
タクソノミー設定は初期設定のままでOKです。変更する箇所はありません。
パンくずリストのカテゴリー名の部分を装飾をするときだけ、カテゴリーテンプレートを触る可能性はあります。
④その他
Breadcrumb NavXTのその他設定画面↑その他の設定画面ではパンくずリストに投稿者や日付が表示される場合の設定を変更することができます。
その他の設定は初期設定のままで大丈夫です。変更する箇所はありません
ウィジェットにショートコードを設定する方法
Breadcrumb NavXTのショートコード[flexy_breadcrumb]をウィジェットに指定する方法を解説します。
ダッシュボード(管理画面)の外観 ⇒ ウィジェット ⇒ 記事上部 ⇒ブロックを追加 ⇒ すべて表示 ⇒ Breadcrumb NavXT ⇒ 更新ボタンを押して完了です。
ウィジェット画面- ダッシュボード(管理画面)の外観をクリックします
- ウィジェットをクリックします
- 記事上部を開いてブロックを追加します
- 「すべて表示」をクリックします
- 左側の[Breadcrumb NavXT]をクリックします
- 更新ボタンを押します
以上でウィジェットにBreadcrumb NavXTのショートコードを設定する方法は完了です。
パンくずリストを確認
投稿ページの上部に表示されているパンくずリストを確認します。
投稿ページ上部のパンくずリスト↑上のパンくずリストは下記の4か所を初期設定からカスタマイズしています
- パンくずの区切り記号を変更
- パンくずのルートをブログ名からトップページに変更
- WordPressテーマ「JIN」のオリジナルアイコンをバンくずリストに挿入
- アイコンと文字の色を水色に変更
- タイトル名を非表示
次項でそれぞれのカスタマイズ方法を解説します。
①パンくずの区切り記号を変更
Breadcrumb NavXT 設定の一般タブのパンくずの区切りを「 〉」に変更しています。
「 」は半角の空白です。見た目のバランス調整のため挿入しています。
➁パンくずのルートをブログ名からトップページに変更
Breadcrumb NavXT 設定の一般タブのホームページテンプレート内の「%htitle%」を「トップページ」に変更しています。
③オリジナルアイコンをバンくずリストに挿入
アイコンはfontawesomeが有名で人気がありますが、外部サイトからデータを読み込むためブログサイトの表示速度が遅くなります。
なのでWordpress有料テーマ「JIN」で使える家型のオリジナルアイコン「jic jin-ifont-home」で➁のトップページを「<i class=”jic jin-ifont-home”>＜/i」で囲います。
「<i class=”jic jin-ifont-home”>トップページ</i>」
カテゴリーの階層の先頭にあるフォルダーの形をしたアイコン「jic jin-ifont-folder」はタクソノミーのカテゴリーテンプレート内に次のコードを挿入します。
「<i class=”jic jin-ifont-folder”></i> 」
④アイコンと文字の色を水色に変更
アイコンの色と文字の色は初期設定だと黒なのでリンクになっているのに気づきにくいため水色に変えています。
変更する方法は③で挿入したアイコンのコードの両端に次のHTMLコードを挿入します。
<font color=”#008db7″>○○</font>
カスタマイズした実際の設定画面
①～④のカスタマイズ設定完了後の実際の画面はこのようになります↓
Breadcrumb NavXT 設定の一般タブのホームページテンプレート
Breadcrumb NavXT 設定のタクソノミーのカテゴリーテンプレート
⑤タイトル名を非表示
パンくずリストにタイトル名を含めない理由は、投稿記事のタイトル名の直ぐ上に同じタイトル名が並ぶのは冗長で見苦しいからです。
WordPressテーマの functions.php の最終行に次のPHPコードを挿入します。
functions.phpに挿入するタイトル名を非表示にするコードfunctions.phpファイルは下記のディレクトリにあります。
ドメイン名/public_html/wp-content/themes/利用しているテーマ名/
Breadcrumb NavXTのコードをheader.phpに挿入する方法
Breadcrumb NavXTはウィジェットを使う方法が簡単なのでおすすめですが、Wordpressテーマのheader.phpの最終行にコードを挿入することも可能です。
header.phpファイルは下記のディレクトリにあります。
ドメイン名/public_html/wp-content/themes/利用しているテーマ名/
WordPressテーマの header.php の最終行に次のPHPコードを挿入します。
header.phpに挿入するBreadcrumb NavXTのコード
ウィジェットだとパンくずリストのSEOに有利になる効果がないようなので、もし利用しているWordpressテーマにパンくずリストが全く無い場合はウィジェットを使わずにheader.phpファイルに直接Breadcrumb NavXTのコードを記述するほうが良いでしょう。
ただし、ウィジェットを使う場合と比べると表示場所が異なります。
Breadcrumb NavXTのパンくずリストの位置の違いまとめ
Breadcrumb NavXTは高機能で細かいカスタマイズができて、かつウィジェット機能を利用してパンくずリストを好きな場所に設置することができる便利なプラグインです。
最大の難点は全ての細かいカスタマイズを使いこなすのには知識が必要な点です。
とはいえ、初期設定の状態でもウィジェット機能を使えば簡単にパンくずリストを設置できるので、知識がない場合でも簡単に導入できる点が最大の長所ともいえます。
PHPの知識がない場合でもBreadcrumb NavXTの設定画面からHTMLコードを使って文字の装飾やアイコンを挿入できる点が、他のパンくずリストプラグインよりも確実に優れている点です。
設定画面の数も項目数も多くコードが記入されているので一見すると敷居が高そうですが、9割以上の設定項目は初期設定のままで利用できるので、惑わされずに利用してみることをおすすめします。
もっと簡単なパンくずリスト用プラグインのほうが良い場合は「Flexy Breadcrumb」がおすすめです。
「Flexy Breadcrumb」の詳細な情報と設定方法はこちらの記事を参考にしてください↓
Flexy Breadcrumb パンくずリスト表示プラグイン 設定方法と使い方
