「Breadcrumb NavXT」でパンくずリストを出力

プラグイン「Breadcrumb NavXT」を使ってサイトにパンくずリストを出力してみました。

パンくずリストとは、サイト内の各ページの先頭付近に、サイトのトップページからそのページまでの経路のことです。

プラグイン「Breadcrumb NavXT」のインストール

WordPressのプラグイン設定->新規追加を選択し、「Breadcrumb NavXT」を検索してインストールします。
インストールが終わったら、有効化します。

「Breadcrumb NavXT」の設定

インストール後、有効化したら、WordPress管理画面の[設定]->「Breadcrumb NavXT」を選択します。

階層表示の設定

「Breadcrumb NavXT設定」の[投稿タイプ]タブから投稿階層を選択します。
これによって、パンくずリストの階層をどのように表示させるかが設定ができます。
今回は、カテゴリーで階層化したかったので、カテゴリーを選択しました。
※他にも日付やタグなどで階層化の選択ができます。

アイコンマークを追加する

パンくずリストの各情報にアイコンマークを追加してみます。
ホーム表示には、家のアイコン、カテゴリー表示には、フォルダーのアイコンを追加します。

家のアイコン追加

まずは、家のアイコンをホームページパンくずに追加してみます。
「Breadcrumb NavXT設定」のホームページテンプレート内に記載してある要素の前に<i class=”fa fa-home”></i>を追加します。
※また、パンくずリストのホームページ表示をサイトタイトルではなく、”ホーム”と表示させたかったので、テンプレートの要素を%htitleから”ホーム”に変更しました。

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="%title%へ移動" href="%link%" class="%type%"><span property="name"><i class="fa fa-home"></i> ホーム</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><span property="name"><i class="fa fa-home"></i> ホーム</span><meta property="position" content="%position%"></span>

フォルダーのアイコン追加

次に、フォルダーアイコンをカテゴリーのパンくずに追加します。
「Breadcrumb NavXT設定」のカテゴリーテンプレート内に記載してある要素の前に<i class=”fa fa-folder-open”></i>を追加します。

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="%title%のカテゴリーアーカイブへ移動" href="%link%" class="%type%"><span property="name"><i class="fa fa-folder-open"></i> %htitle%</span></a><meta property="position" content="%position%"></span>

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="%title%のカテゴリーアーカイブへ移動" href="%link%" class="%type%"><span property="name"><i class="fa fa-folder-open"></i> %htitle%</span></a><meta property="position" content="%position%"></span>

header.phpにパンくずリスト出力のコードを書く

パンくずリストを出力するには、以下のコードをheader.phpへ記載します。

<!-- パンくずリスト -->
<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
<?php if (function_exists('bcn_display')) { bcn_display(); } ?>
</div>

なお、私はホーム画面ではパンくずリストを出力させたくないため、is_home()という関数を使い、ホーム画面以外だけパンくずリストを出力させるようにしました。
※is_home()は、ブログのメインページかどうかを返す関数です。!is_home()とすることで、メインページ以外の時にパンくずリストを出力するようにしています。

<!-- パンくずリスト -->
<div class="breadcrumbs" xmlns:v="http://rdf.data-vocabulary.org/#">
<?php if( !is_home() ): ?>
<?php if (function_exists('bcn_display')) { bcn_display(); } ?>
<?php endif; ?>
</div>

CSSでスタイルを微調整

追加したパンくずリストのdiv要素には、class名”breadcrumbs”が付与されていますので、
CSSで自分の好みに合わせてスタイルを調整したら完成です。

最後に

以上、プラグイン「Breadcrumb NavXT」を使ってパンくずリストを出力させてみました。
少しでも参考になれば幸いです。