現在閲覧中のWEBページが、サイト内のどこに位置しているのかをツリー構造でわかりやすく教えてくれるパンくずリスト。
パンくずリストがあれば、他のページも見てもらえる機会が増えますし、何よりもWEBサイト全体がわかりやすくなること間違いなしです。
そんなパンくずリストの設置方法を紹介します。
テンプレートファイルの上部に設置しよう
私の場合は、ひとまず- single.php
- category.php
■single.phpの挿入コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="breadcrumbs"> <a href="<?php echo get_bloginfo('url')."/"; ?>">TOP</a>» <?php $cats = get_the_category(); $cat = $cats[0]; $the_cate=$cat->cat_ID; $ancestors=get_ancestors($the_cate, 'category' ); $num=count($ancestors); for ($i = 1; $i <= $num; $i++) { ?> <a href="<?php echo get_category_link($ancestors[$num-$i]); ?>"><?php echo get_cat_name($ancestors[$num-$i]); ?></a>» <?php } ?> <a href="<?php echo get_category_link($the_cate); ?>"><?php echo get_cat_name($the_cate); ?></a>» </div><!-- .breadcrumbs --> |
■category.phpの挿入コード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div class="breadcrumbs"> <a href="<?php bloginfo('url'); ?>">TOP</a>» <?php $the_cate=get_query_var('cat'); $ancestors=get_ancestors($the_cate, 'category' ); $num=count($ancestors); for ($i = 1; $i <= $num; $i++) { ?> <a href="<?php echo get_category_link($ancestors[$num-$i]); ?>"><?php echo get_cat_name($ancestors[$num-$i]); ?></a>» <?php } ?> <?php single_cat_title();?> </div><!-- .breadcrumbs --> |
breadcrumbsクラスはオリジナルクラスですので、適宜名前を変更してください。
私の場合は、特にスタイルシートにて装飾はしておりません。
上記コードを挿入するだけで、パンくずリストが表示されます。
コードを改変すれば、表示の仕方も工夫できますね!
とても便利なので、ぜひお試しあれ!
関連記事

WordPressテーマのスタイルシートとは別に、記事やページごとに追加指定したいcssがある場合には、function.phpをカスタマイズすれば可能となります。JavaScriptも同様に可能です。