いわゆるパンくずリスト
<a href="#">HOME</a> > <a href="#">第2階層</a> > 第3階層記号を駆使して、こういう作り方もあるけれど↑ やっぱりカッコよくリストで組みたいものです↓
<ul class="path"> <li class="top"><a href="#">HOME</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 -->
これで吐き出されるソースは
■サンプル
> <a href="#">カテゴリ</a> > <a href="#">サブカテゴリ</a>といった感じです。
これをul、liを使ったパンくずリストに合わせるのなら
■TopicPath.pm
46行目
sub NAVI_ARROW {' > '};
↓
sub NAVI_ARROW {''};
空にして
77行目【アーカイブの時】
$cms->tag('topic_path'=>"Archive: $date");
↓
$cms->tag('topic_path'=>"<li>Archive: $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 -->
■関連ブログ記事
ウェブマーケティング用語集 | パンくずリスト