いわゆるパンくずリスト

■サンプル
ＨＯＭＥ > 第2階層 > 第3階層

<a href="#">ＨＯＭＥ</a> &nbsp;&gt;&nbsp;<a href="#">第2階層</a> &nbsp;&gt;&nbsp;第3階層

記号を駆使して、こういう作り方もあるけれど↑ やっぱりカッコよくリストで組みたいものです↓

<ul class="path"> <li class="top"><a href="#">ＨＯＭＥ</a></li> <li><a href="#">第2階層</a></li> <li>第3階層</li> </ul>

サイトのパンくずリスト

■CSS

.path {    font-size: 10px;/* fix */    margin: 0px;    padding: 7px 6px; } .path li {    display: inline;    background: url(../img/path.gif) no-repeat 4px 3px;    line-height:1.1em;    padding-left: 14px; } .path li.top {    background-image: none;    padding-left: 0px; }

>っていう記号も、背景画像にしちゃいましょう。

■画像

（↑見えますか？小さすぎて見えづらいですね…）

パンくずリスト表示プラグイン

[ TopicPath ] by Boleroさん

<!-- BEGIN topic_path --> {topic_path} <!-- END topic_path -->

これで吐き出されるソースは

■サンプル

 > カテゴリ > サブカテゴリ

&nbsp;&gt;&nbsp;<a href="#">カテゴリ</a> &nbsp;&gt;&nbsp;<a href="#">サブカテゴリ</a>

といった感じです。

これをul、liを使ったパンくずリストに合わせるのなら

■TopicPath.pm
46行目
sub NAVI_ARROW {'&nbsp;&gt;&nbsp;'};
↓
sub NAVI_ARROW {''};
空にして

77行目【アーカイブの時】
$cms->tag('topic_path'=>"Archive:&nbsp;$date");
↓
$cms->tag('topic_path'=>"<li>Archive:&nbsp;$date</li>");

91行目【個別モードの時】
'tag' => '<a href="'.$site_cgi.'?cid=%d">%s</a>',
↓
'tag' => '<li><a href="'.$site_cgi.'?cid=%d">%s</a></li>',

とし、これで上書き＋再構築すると
吐き出されるソースは

<li><a href="#">カテゴリ</a></li><li><a href="#">サブカテゴリ</a></li>

となります。

あとは、{topic_path}をulでくくってやれば、うまい具合にパンくずがliタグでくくられる仕様に変身♪

<!-- BEGIN topic_path --> <ul class="path"> {topic_path} </ul> <!-- END topic_path -->

■関連ブログ記事
ウェブマーケティング用語集 | パンくずリスト