WordPress設定

Breadcrumb NavXT パンくずリスト表示プラグイン 設定方法と使い方読み終わるまで 2

Breadcrumb NavXT パンくずリスト表示プラグイン 設定方法と使い方 アイキャッチ

ワードプレス(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のダッシュボード(管理者画面)の新規プラグイン追加画面WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面
  1. WordPressのダッシュボード(管理者画面)の「プラグイン」をクリックします
  2. 「新規追加」をクリックします
  3. 検索ボックスに”Breadcrumb NavXT”と入力すると下に検索結果が表示されます
  4. ”Breadcrumb NavXT”の「今すぐインストール」ボタンをクリックします
“Breadcrumb NavXT”のインストール完了画面“Breadcrumb NavXT”のインストール完了画面

↑Breadcrumb NavXTのインストールが完了すると有効化ボタンが表示されるのでクリックします。

"Breadcrumb NavXT"を有効化すると表示される画面“Breadcrumb NavXT”を有効化すると表示される画面

これでBreadcrumb NavXTのインストールと有効化は完了です。

Breadcrumb NavXTの設定と使い方

Breadcrumb NavXTの設定画面はダッシュボード(管理画面)にある「Breadcrumb NavXT」です。

WordPressのダッシュボード(管理画面)WordPressのダッシュボード(管理画面)

↑Breadcrumb NavXTの設定画面はWoredPressのダッシュボード(管理者画面)の「設定」内の「Breadcrumb NavXT」をクリックします。

Breadcrumb NavXTの設定

Breadcrumb NavXTの設定画面は下記の4つの項目があります。

  1. 一般
  2. 投稿タイプ
  3. タクソノミー
  4. その他

設定項目数は多いですが殆ど利用しない設定ばかりです。
次項では各設定タグの大事な個所だけピックアップして解説します。

①一般

Breadcrumb NavXTの一般設定画面Breadcrumb NavXTの一般設定画面
Breadcrumb NavXTの一般設定
一般設定項目名意味
パンくずの区切り階層の区切り文字を指定。初期設定は>
現在の項目にリンク表示している記事タイトルの階層のパンくずリストをリンクにするか否か
分割ページパンくずトップ画面にパンくずリストと何ページ目かが表示される
分割ページテンプレート分割ページパンくず有効化時に文字を指定。初期設定はページ
ホームページパンくずパンくずリストにトップページを含めるか否か
ホームページテンプレートホームページパンくずに表示する文字を指定。初期設定はサイト名
ホームページテンプレート (リンクなし)ホームページパンくずがリンクになっていない時のみ使われる
ブログを示すパンくずサブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定
メインサイトのパンくずサブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定
メインサイトのホームページテンプレートサブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定
メインサイトホームテンプレート (リンクなし)サブディレクトリやサブドメインでマルチサイトにしている場合にのみ有効な設定

パンくずの区切りは初期設定は特殊文字の「>」になっていますが、ブログサイト上では「>」と表示されます。

ちなみに半角の空白は「&nbsp」を入力します。

設定を変更したほうが良い箇所は「ホームページテンプレート」だけです。
初期設定では「%htitle%」となっていてブログサイト名になっているので、「Home」や「ホーム」などに変更することをおすすめします。

②投稿タイプ

Breadcrumb NavXTの投稿タイプ設定画面Breadcrumb NavXTの投稿タイプ設定画面
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 FirstCTAページの親を階層に使用する。親階層がなくなると経由元を考慮してパンくずリストを表示する
CTA階層表示におけるリファラーページの考慮ページの経由元を考慮してパンくずリストを表示する。例えばアーカイブページを経由してCTAページを表示した場合はパンくずリストに日付が表示される
CTA階層パンくずリストを階層表示する時の基準を指定。親投稿、親投稿、日付から選択可能

投稿タイプはパンくずリストの最下層にあたる記事ページの設定項目になります。

投稿タイプの設定で変更する箇所はありません。初期設定のままで大丈夫です

③タクソノミー

Breadcrumb NavXTのタクソノミー設定画面Breadcrumb NavXTのタクソノミー設定画面
Breadcrumb NavXTのタクソノミー設定
タクソノミー設定項目名意味
カテゴリーテンプレートパンくずリストの階層をカテゴリーにした場合の設定。初期設定はカテゴリー名
カテゴリーテンプレート(リンクなし)パンくずリストがリンクになっていない時のみ使われる
タグテンプレートパンくずリストの階層をタグにした場合の設定。初期設定はタグ名
タグテンプレート(リンクなし)パンくずリストがリンクになっていない時のみ使われる
フォーマットテンプレートパンくずリストの階層をフォーマットにした場合の設定。初期設定はタグ名
フォーマットテンプレート(リンクなし)パンくずリストがリンクになっていない時のみ使われる

タクソノミー設定は初期設定のままでOKです。変更する箇所はありません。
パンくずリストのカテゴリー名の部分を装飾をするときだけ、カテゴリーテンプレートを触る可能性はあります。

④その他

Breadcrumb NavXTのその他設定画面Breadcrumb NavXTのその他設定画面

↑その他の設定画面ではパンくずリストに投稿者や日付が表示される場合の設定を変更することができます。

その他の設定は初期設定のままで大丈夫です。変更する箇所はありません

 

ウィジェットにショートコードを設定する方法

Breadcrumb NavXTのショートコード[flexy_breadcrumb]をウィジェットに指定する方法を解説します。

ダッシュボード(管理画面)の外観 ⇒ ウィジェット ⇒ 記事上部 ⇒ブロックを追加 ⇒ すべて表示 ⇒ Breadcrumb NavXT ⇒  更新ボタンを押して完了です。

ウィジェット画面ウィジェット画面
  1. ダッシュボード(管理画面)の外観をクリックします
  2. ウィジェットをクリックします
  3. 記事上部を開いてブロックを追加します
  4. 「すべて表示」をクリックします
  5. 左側の[Breadcrumb NavXT]をクリックします
  6. 更新ボタンを押します

以上でウィジェットにBreadcrumb NavXTのショートコードを設定する方法は完了です。

パンくずリストを確認

投稿ページの上部に表示されているパンくずリストを確認します。

投稿ページ上部のパンくずリスト投稿ページ上部のパンくずリスト

↑上のパンくずリストは下記の4か所を初期設定からカスタマイズしています

  1. パンくずの区切り記号を変更
  2. パンくずのルートをブログ名からトップページに変更
  3. WordPressテーマ「JIN」のオリジナルアイコンをバンくずリストに挿入
  4. アイコンと文字の色を水色に変更
  5. タイトル名を非表示

次項でそれぞれのカスタマイズ方法を解説します。

①パンくずの区切り記号を変更

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>&nbsp;」

④アイコンと文字の色を水色に変更

アイコンの色と文字の色は初期設定だと黒なのでリンクになっているのに気づきにくいため水色に変えています。
変更する方法は③で挿入したアイコンのコードの両端に次のHTMLコードを挿入します。

<font color=”#008db7″>○○</font>

カスタマイズした実際の設定画面

①~④のカスタマイズ設定完了後の実際の画面はこのようになります↓

Breadcrumb NavXT 設定の一般タブのホームページテンプレートBreadcrumb NavXT 設定の一般タブのホームページテンプレート
Breadcrumb NavXT 設定のタクソノミーのカテゴリーテンプレートBreadcrumb NavXT 設定のタクソノミーのカテゴリーテンプレート

 

⑤タイトル名を非表示

パンくずリストにタイトル名を含めない理由は、投稿記事のタイトル名の直ぐ上に同じタイトル名が並ぶのは冗長で見苦しいからです。

WordPressテーマの functions.php の最終行に次のPHPコードを挿入します。

functions.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のコードheader.phpに挿入するBreadcrumb NavXTのコード

 

ウィジェットだとパンくずリストのSEOに有利になる効果がないようなので、もし利用しているWordpressテーマにパンくずリストが全く無い場合はウィジェットを使わずにheader.phpファイルに直接Breadcrumb NavXTのコードを記述するほうが良いでしょう。
ただし、ウィジェットを使う場合と比べると表示場所が異なります。

Breadcrumb NavXTのパンくずリストの位置の違いBreadcrumb NavXTのパンくずリストの位置の違い

まとめ

Breadcrumb NavXTは高機能で細かいカスタマイズができて、かつウィジェット機能を利用してパンくずリストを好きな場所に設置することができる便利なプラグインです。

最大の難点は全ての細かいカスタマイズを使いこなすのには知識が必要な点です。

とはいえ、初期設定の状態でもウィジェット機能を使えば簡単にパンくずリストを設置できるので、知識がない場合でも簡単に導入できる点が最大の長所ともいえます。

PHPの知識がない場合でもBreadcrumb NavXTの設定画面からHTMLコードを使って文字の装飾やアイコンを挿入できる点が、他のパンくずリストプラグインよりも確実に優れている点です。

設定画面の数も項目数も多くコードが記入されているので一見すると敷居が高そうですが、9割以上の設定項目は初期設定のままで利用できるので、惑わされずに利用してみることをおすすめします。

もっと簡単なパンくずリスト用プラグインのほうが良い場合は「Flexy Breadcrumb」がおすすめです。

「Flexy Breadcrumb」の詳細な情報と設定方法はこちらの記事を参考にしてください↓
Flexy Breadcrumb パンくずリスト表示プラグイン 設定方法と使い方