ソフトエンジニアのブログ、制作ノウハウ等を配信

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

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

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

スポンサーリンク

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

breadlist2

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

「Breadcrumb NavXT」の設定

breadlist3

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

階層表示の設定

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

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

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

家のアイコン追加

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

breadlist6

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

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

補足:Font Awesomeのアイコン
他にもいろんなアイコンを追加することができます。以下のサイトにいろんなアイコンの種類があります。
参考にしてみてください。
Font Awesomeで表示できるアイコン

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

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

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

CSSでスタイルを微調整

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

最後に

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

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン