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の設定画面
一般設定
アクティブページ
投稿およびページ
カテゴリー
タグ
日付アーカイブ
その他
これで行けます。・・・たぶん。
まぁ〜階層も気にするほど深くないんでパンくずが必要かどうか疑問ですが。