西村高速自動車2

敦賀でTOYSHOPGRAPHICSっていうCG屋の西村高速自動車っていうブログです。

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その他

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

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




次へ 投稿

前へ 投稿

返信する

© 2020 西村高速自動車2