デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

「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 で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン