[wordpress] パンくずプラグインBreadcrumb NavXT

wordpressのパンくずナビゲーションと言えば 少し前はBreadcrumb Navigation XTが有名だったのですが、作者がバージョンアップをやめてしまったので、
現在はBreadcrumb NavXT が最もポピュラーなプラグインとなりました。

どちらのプラグインでも動作的には問題ありませんが、Breadcrumb NavXT の方が細かい設定が出来ます。

 

Breadcrumb NavXT の導入

プラグインのサイトからDLしてアップするか ダッシュボードメニューのプラグイン新規追加から検索してインストールします。
サイトはこちら →

テンプレートに挿入

プラグインを有効化したら、テンプレートの任意の場所に下記のタグを入れます。
ヘッダーの一番下とかが一番面倒じゃないですが デザイン的に問題がある場合はページ・アーカイブ・シングルテンプレートの一番上とかに入れます。

<div class="breadcrumbs">
<!--?php if(function_exists('bcn_display')) { bcn_display(); } ?--></div>

CSSの設定と画像を使う場合

基本的に設定をしなくても問題ありませんが、ホーム部分はデフォルトでブログとなっているので、ホームに変えます。
画像を入れることもできるので、その場合は画像URLを入れます。
私のブログはホーム部分とセパレータ部分に画像を入れています。

CSSの設定

私はテンプレートに入れたクラス名の外側にヘッダーパンくずようのIDを付けています。
このサイトの上部を見て頂けると分かりますが グレーの角丸枠で囲っている部分がID要素です。
先程テンプレートに入れるタグで付けてあるclass=”breadcrumbs”にはリンクの設定と画像の位置設定だけしてあります。
下記CSSは このサイトの設定です。参考にしてみてください。

div#topbread {
         background-color:#f0f0f0;
         padding:10px 10px;
         margin-bottom:10px;
	 font-size: 85%;
         color:#333333;
         clear:both;
        -webkit-border-top-left-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
	}

div#topbread .breadcrumbs img  {
         vertical-align: middle;
}

div#topbread .breadcrumbs a {
         color:#00a0e9;
         font-weight:bold;
	}

問題発生!カテゴリーが急に表示されなくなった時

wordpressをバージョンアップしたり 何かの原因で急にパンくずナビのカテゴリー部分が表示されなくなった事があります。
こういう時は Breadcrumb NavXTの設定画面を出しておいて 別窓でプラグインの停止→削除→再インストール だしておいた保存画面を参考に再設定。
これで元に戻ります。 という事があったもので・・

may the force be with you…