WordPressでパンくずを追加するプラグイン　Breadcrumb NavXT　を入れてリスト表示した。

参考ページ
1bit.memoさん
http://1bit.mobi/20101206102236.html

パンくずを入れようと思いBreadcrumb NavXTって云うプラグインを見つけて適用したんやけど、素の状態だと文字間を　>　で表示してしまい、見た目にあまりよろしくない。

・・・で、リスト表示の背景画像の矢印表示をしてみた。

1bit.memoさんのページを見つけて設定してみたがうちではうまく行かんかったんで1bit.memoさんのデータを元にいじってやっつけました。

最初に
Breadcrumb NavXTをインストールして有効に。

表示させたい場所に

index.php

//先頭のHOMEの部分はCSSの背景で貼ってるのでHOMEへのリンクは透明gifを貼ってます。
<div class="kuzu">
<ul class="kuzuu">
<?php if(!is_front_page()){ ?>
<li class="first"><a href="<?php bloginfo('url'); ?>"><img src="<?php bloginfo('template_url'); ?>/images/clear.gif" alt="HOME" width="12" height="12" /></a></li>
<?php } ?>
<?php
if(function_exists('bcn_display'))
{
    bcn_display();
}
?>
</ul>
<br class="cf" />
</div>

を入れる。
うちは、トップページのみ、page.phpで後は　index.phpで全て表示しているので、index.phpのフッターの手前に配置しています。
div class=”kuzu”でパンくずのエリアを囲み、その中に ulを入れてます。

CSS

/*パンくずを囲むエリア*/
.kuzu{
	font-size: 12px;
	border: solid 1px #CCCCCC;
	background-color: #FFFFFF;
	width: 880px;
	padding-left: 10px;
	padding-right: 10px;
	margin-top: 10px;
}
/*パンくずリスト*/
.kuzuu li {
	list-style:none;
	width:auto;
	background-image: url(images/pankuz.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
	float: left;
	height: 20px;
	line-height: 10px;
	padding-top: 10px;
}
/*パンくず先頭ホームの部分*/
.kuzuu li.first {
  padding-right: 10px;
  padding-left: 0;
	background-image: url(images/home.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

←パンくずのHOMEの画像 home.gif

←パンくず矢印画像　pankz.gif


リンク用の透明画像は適当に透過gifでこさえて12pxではっ付けて下さい。

後は、Breadcrumb NavXTの設定画面でリスト表示の指定等を行って下さい。
Breadcrumb NavXTの設定画面
一般設定

アクティブページ

投稿およびページ

カテゴリー

タグ

日付アーカイブ

その他

これで行けます。・・・たぶん。

まぁ〜階層も気にするほど深くないんでパンくずが必要かどうか疑問ですが。

Tweet