パンクズリスト自動生成プラグイン「Breadcrumb NavXT」

12月 13th, 2011 by berry | Filed under wordpress.

パンくずリストとは、トップページから現在表示しているページまでの階層を示したリストのことです。
↓のようなやつですね。

トップページ > 商品一覧 > 亀こ子たわし

ユーザーを迷わせないためには欠かせない表示ですね。
企業のサイトでこのパンくずリストを設置していないサイトはほとんど見なくなりました。

wordpressでは、「Breadcrumb NavXT」というプラグインを利用することで簡単にパンクズリストを設置することができます。wordpress利用者の方にはおなじみの定番プラグインですね。
現在は日本語対応もされておりさらに使いやすくなっています。

プラグインをインストールすると 管理画面の「設定」の中にBreadcrumb NavXTが追加されており、細かく設定が可能です。
何も設定しなくても動作しますが、最低限は「ホームタイトル」の設定は必要でしょう。

あとは以下のコードを書き込むだけで、自動的にパンクズリストを表示してくれます。
index.php か header.phpに書き込むのが一般的だと思います。

<?php
if(function_exists(‘bcn_display’))
{
// Display the breadcrumb
bcn_display();
}
?>

すると、

<a title=”トップページ” href=”http://○○.com”>あいうえお商会トップ</a> &gt; <a title=”最新情報” href=”http://○○.com/category/news/”>最新情報</a> &gt; 新商品の紹介

と、aタグのみ使用でシンプルに出力されます。
これをechoで<div>を出力するようにすればスタイルの設定等できますね。

<?php
if(function_exists(‘bcn_display’))
{
// Display the breadcrumb
echo ‘<div class=”kuzu”>’;
bcn_display();
echo ‘</div>’;
}
?>

出力はこうなります。

<div class=”kuzu”>
<a title=”トップページ” href=”http://○○.com”>あいうえお商会トップ</a> &gt; <a title=”最新情報” href=”http://○○.com/category/news/”>最新情報</a> &gt; 新商品の紹介
</div> 

スタイルの設定はこんな感じにしています。
CSSのおさらい:heightとline-heightを同じにすることで、文字をボックスの中央に寄せる事ができますね。

.kuzu{
height:40px;
line-height:40px;
font-size:12px;
}

Leave a Reply