パンくずリストを設置する

WordPressにパンくずリストを設置現在閲覧中のWEBページが、サイト内のどこに位置しているのかをツリー構造でわかりやすく教えてくれるパンくずリスト
パンくずリストがあれば、他のページも見てもらえる機会が増えますし、何よりもWEBサイト全体がわかりやすくなること間違いなしです。

そんなパンくずリストの設置方法を紹介します。

テンプレートファイルの上部に設置しよう

私の場合は、ひとまず
  • single.php
  • category.php
上記2ファイルに記述しました。

■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>&raquo;
	<?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>&raquo;
	<?php
		}
	?>
	<a href="<?php echo get_category_link($the_cate); ?>"><?php echo get_cat_name($the_cate); ?></a>&raquo;
</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>&raquo;
	<?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>&raquo;
		<?php
		}
	?>
	<?php single_cat_title();?>
</div><!-- .breadcrumbs -->


breadcrumbsクラスはオリジナルクラスですので、適宜名前を変更してください。
私の場合は、特にスタイルシートにて装飾はしておりません。

上記コードを挿入するだけで、パンくずリストが表示されます。
コードを改変すれば、表示の仕方も工夫できますね!
とても便利なので、ぜひお試しあれ!


関連記事

WordPressの画像を連続で投稿に挿入する 連続で画像を投稿に挿入
WordPressにて何枚もの画像を連続で挿入したい時があります。メディアを追加ウィンドウを自動で閉じないカスタマイズを紹介します。
WordPressで関連記事一覧を表示する方法 WordPressで関連記事を一覧表示する
WordPressなどで記事の隅っこによく見かける関連記事の一覧。プラグインを使用せずに実装する方法を紹介します。
WordPressでの子ページの作り方 固定ページを階層化し親ページに子ページ一覧を表示
WordPressの固定ページを階層化し、親ページに子ページの一覧を表示する方法を紹介します。プラグイン不使用です。
アイキャッチ画像の上に半透明の帯と記事タイトルをテキスト表示 画像の上に半透明の帯とテキストを表示
最近よく見かける、画像の上に半透明の帯を表示しテキストを配置する方法。簡単なCSSで実現できますのでお勧めです。
WordPressの固定ページや投稿記事に個別にcssを追加する 固定ページや投稿記事ごとに個別のCSSとJavaScriptを追加
WordPressテーマのスタイルシートとは別に、記事やページごとに追加指定したいcssがある場合には、function.phpをカスタマイズすれば可能となります。JavaScriptも同様に可能です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>