サイト訪問者がサイト内での現在位置を直感的に把握するのに便利なパンくずリスト。
ユーザビリティ・アクセシビリティの向上という点においてパンくずリストを表示させることはスタンダードな要素になります。
Wordpress の場合、『Breadcrumb NavXT』というプラグインを使って表示させることが可能ですが、今回はプラグインを使わずに表示させる方法です。

Example:

Demo » Parent Category I » Child Category II » A Post With Everything in it

パンくずリストの表示方法

下記のコードを使用中のテーマ内のfunctions.phpに書き加えます。

<?php
function get_breadcrumbs(){
	global $wp_query;

	if ( !is_home() ){

		// Start the UL
		echo '<ul>';
		// Add the Home link
		echo '<li><a href="'. get_settings('home') .'">'. get_bloginfo('name') .'</a></li>';

		if ( is_category() )
		{
			$catTitle = single_cat_title( "", false );
			$cat = get_cat_ID( $catTitle );
			echo "<li> &raquo; ". get_category_parents( $cat, TRUE, " &raquo; " ) ."</li>";
		}
		elseif ( is_archive() && !is_category() )
		{
			echo "<li> &raquo; Archives</li>";
		}
		elseif ( is_search() ) {

			echo "<li> &raquo; Search Results</li>";
		}
		elseif ( is_404() )
		{
			echo "<li> &raquo; 404 Not Found</li>";
		}
		elseif ( is_single() )
		{
			$category = get_the_category();
			$category_id = get_cat_ID( $category[0]->cat_name );

			echo '<li> &raquo; '. get_category_parents( $category_id, TRUE, " &raquo; " );
			echo the_title('','', FALSE) ."</li>";
		}
		elseif ( is_page() )
		{
			$post = $wp_query->get_queried_object();

			if ( $post->post_parent == 0 ){

				echo "<li> &raquo; ".the_title('','', FALSE)."</li>";

			} else {
				$title = the_title('','', FALSE);
				$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
				array_push($ancestors, $post->ID);

				foreach ( $ancestors as $ancestor ){
					if( $ancestor != end($ancestors) ){
						echo '<li> &raquo; <a href="'. get_permalink($ancestor) .'">'. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</a></li>';
					} else {
						echo '<li> &raquo; '. strip_tags( apply_filters( 'single_post_title', get_the_title( $ancestor ) ) ) .'</li>';
					}
				}
			}
		}

		// End the UL
		echo "</ul>";
	}
}
?>

下記のコードをパンくずリストを表示させたいテンプレートに書いて呼び出します。

<?php get_breadcrumbs(); ?>

CSSでのスタイリングもしてありますので、デザインのカスタマイズも出来ます。

ul.breadcrumbs {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size:12px;
}
ul.breadcrumbs li {
	float: left;
	margin: 0 5px 0 0;
	padding: 0;
}

Bookmark & Share

56 Responses to “WordPressにプラグインなしでパンくずリストを表示させる方法”

  1. teamiks より:

    WordPress サイトで『Breadcrumb NavXT』というプラグインを使わずに「パンくずリスト」を表示させる方法。 / “Blog × Play Under World – WordPressにプラグインなしでパンくずリス…” http://t.co/1sGj9uwl

  2. […] このやり方については、分かったブログさんが紹介されていますが、その通りにやると私の場合ダッシュボード自体もエラーになりFTPでfanctions.phpを元に戻さない限りアクセスできなくなります。分かったブログさんが元にしていた記事も読み直し、以下のようにしました。 […]

  3. […] WordPressにプラグインなしでパンくずリストを表示させる方法 […]

  4. […] WordPressにプラグインなしでパンくずリストを表示させる方法 […]

Leave a Reply

  • Categories