Breadcrumb NavXT

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の設定画面
一般設定

Breadcrumb NavXT一般設定
Breadcrumb NavXT一般設定

アクティブページ

Breadcrumb NavXTアクティブページ
Breadcrumb NavXTアクティブページ

投稿およびページ

Breadcrumb NavXT投稿およびページ
Breadcrumb NavXT投稿およびページ

カテゴリー

Breadcrumb NavXTカテゴリー
Breadcrumb NavXTカテゴリー

タグ

Breadcrumb NavXTタグ
Breadcrumb NavXTタグ

日付アーカイブ

Breadcrumb NavXT日付アーカイブ
Breadcrumb NavXT日付アーカイブ

その他

Breadcrumb NavXTその他
Breadcrumb NavXTその他

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

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




この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL