1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressで簡単にパンくずを表示させる方法

WordPressで簡単にパンくずを表示させる方法

WordPressのテンプレートタグを利用すれば、プラグインを使わずにパンくずの表示をする事もできます。また、当サイトで利用している、パンくずリストを表示する自作関数も公開していますので、ぜひご利用ください。

  • 2015/9/6
  • 2014/2/2

「パンくずリスト」とは、多くの場合でWebページの上の方にある「ホーム > カテゴリー > 記事」のような形式のリンクの事を言います。
そのページがホームページ内のどの位置にあるのかを表しているもので、貴重な内部リンクの構築にも一役買ってくれます。
（参考：パンくずのSEO効果と構造化マークアップの方法）

WordPressでこのパンくずリストを表示させたい場合、プラグインなどを使う方法もありますが、もっと手軽にパンくずリストを表示する方法もあります。

また、当サイトでも利用している「パンくずリストを表示する自作関数」もご紹介しますので、functions.phpにコピー＆ペーストすれば、すぐに使えるはずです。

テンプレートタグを使ってパンくずを表示させる方法

パンくずを表示させたい箇所に、以下のコードを書くだけです。

<?php $postcate = get_the_category(); ?>
<?php echo get_category_parents($postcate[0]->term_id,TRUE ); ?>

「get_category_parents」というテンプレートタグは、親カテゴリーを取得するタグです。
どんなに深い階層になっていても、親カテゴリーを、各カテゴリーへのリンクも含めて、すべて表示させる事ができます。

例えばMacBookAirに関する記事ページが、「パソコン→Mac→MacBookAir」というカテゴリ階層になっている場合でも、このテンプレートタグを使えば「パソコン>Mac>MacBookAir」という具合にパンくずを表示できます。

get_category_parentsの引数

get_category_parentsに指定する引数をご紹介します。

get_category_parents(現在のカテゴリー,リンクの有無,'カテゴリー間の文字');

現在のカテゴリー：カテゴリーをIDで指定
リンクの有無：TRUEでカテゴリーページへのリンクを表示
カテゴリー間の文字：>などの文字を指定

ブログトップへのリンクを追加する

上記のコードだけだと「ホーム」などのブログのトップページへのリンクが表示されませんので、実際にパンくずとして利用する際には、少しコードを追加する必要があります。

以下のようなHTMLソースに修正します。

<?php $postcate = get_the_category(); ?>
<ol>
<li><a href="<?php echo home_url(); ?>">ホーム</a> > </li>
<li><?php echo get_category_parents($postcate[0]->term_id,TRUE,' > '); ?></li>
</ol>

注意事項
上記ソースコードは、固定ページのテンプレートでは使用できません。
パンくず周りのデザインはCSSを使って調整してください。

コピペで簡単！SFN自作パンくず専用関数

以下の自作関数は、当サイトで実際に利用しているパンくずリストを表示させる自作関数です。
そのままfunctions.phpにコピー＆ペーストしていただき、各テンプレートからは<?php the_bread(); >と書いて関数を呼び出せば、問題なく利用できるはずです。

パンくずリスト表示用関数

function the_bread( $query = true ){

	if( is_archive()){
		$cate = get_queried_object();
	}else if( is_single() ){
		$cate = get_the_category();
		$cate = $cate[0];
	}
	$queried_object = get_queried_object();
	$current = array( "name"=>$cate->name , "term_id"=>$cate->term_id );
	$parents = array();
	
	echo '
    ';
	
	if( is_home() ){
		//トップページの場合にはリンクを表示させない
		echo '
  1. ホーム
    2. ';
	}elseif( is_search() ){
		$search_query =  get_search_query();
		echo '
  2.  > 
  3. 「'. $search_query .'」の検索結果
    4. ';
	}elseif( is_page() ){
		//固定ページの処理
		echo '
  4.  > 
    5. ';
		
		if( $parent_ID = $queried_object->post_parent ){
			
			while( $parent_ID ){
				$parent = get_post( $parent_ID );
				array_unshift($parents , $parent);
				$parent_ID = $parent->post_parent;
			}
			
			foreach( $parents as $parent ){
				echo '
  5.  > 
    6. ';
			}
		}
		
	}else{
		//それ以外のページの処理
		echo '
  6.  > 
    7. ';
		
		while( $cate->parent ){
			//ひとつ上の階層のカテゴリデータを配列$parentsの先頭に格納
			//下からカテゴリ階層を遡るのでデータは常に先頭に格納する必要がある
			$cate = get_category( $cate->parent );
			array_unshift($parents , $cate);
		}
		
		//$parentsの内容を表示
		foreach( $parents as $parent ){
			echo '
  7.  > 
    8. ';
		}
		
		//現在表示されているカテゴリの表示
		if( is_archive()){
			echo '
  8. '.$current["name"].'
    9. ';
		}else if( is_single() ){
			echo '
  9.  > 
    10. ';
		}
	}
	echo '
  10. '.$queried_object->post_title.'
    11. ';
	echo "
";
}

パンくずを表示させる方法

テンプレートファイル内で以下のコードを書いた部分にパンくずリストが表示されます。

// パンくずを表示させたい場所に以下のコードを書く
<?php the_bread(); ?>

パンくずリストのスタイルシートです。ほかに装飾をする場合は書き足してください。

.bread{
	line-height:40px;
	font-size:0.8em;
	list-style:none;
}
.bread li{
	float:left;
}

注意事項
当サイト及び当サイトの管理人は、公開しているコードを利用した事によるいかなる損害も保証しません。ご了承ください。

get_the_category()の注意点

記事ページのパンくずリストを表示するには、get_the_category()という関数を使って、「現在表示している記事のカテゴリー情報」を元にしたコードを書きます。

カテゴリーページにパンくずを表示させる場合、記事ページのようにget_the_category()を使うと、一番新しい記事の内容を起点にしてしまうので、うまく表示できません。

例えば、以下のようなカテゴリーの構成だった場合、get_the_category()を使って果物のカテゴリーページのパンくずを表示させると、最新の記事がみかんの記事だったらみかんを起点としたパンくずが、リンゴだったらリンゴを起点としたパンくずが表示されてしまいます。

ホーム
└果物
    └リンゴ
    └みかん
└野菜
└肉

そこで、表示しているカテゴリー（果物）そのものの情報を起点とした情報を取得する必要がありますので、カテゴリーページの場合にはget_queried_object()という関数を使います。
この関数は表示している（リクエストした）ページに応じた情報を返してくれる関数なので、カテゴリーページで利用すると、そのカテゴリーページそのものの情報を返してくれます。

パンくずリストを表示させるときに限らず、カテゴリページの情報を取得して表示したい場合など、get_the_category()の挙動にはご注意ください。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

WebCampPro（3ヶ月の超ガッチリ型）

3ヶ月の実践カリキュラムと3ヶ月のキャリアサポートで「転職・就職を保証してくれる」スクール。来校型のスクールですが、平日は毎日13:00以降、講師が常駐しているので質問や疑問もすぐに解消できるのが良いです。それぞれの学習スピードに合わせてカリキュラムが組まれますが、3ヶ月間という短期で一人前のエンジニアになるのが目標なので、かなりきつい部分もあるかと思います。

しかし裏を返せば「本気でキャリア形成をしたい」、「プログラムを仕事にしたい」という方にはピッタリなスクールです。

WebCamp（1か月の集中型）

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp（2〜6か月のカスタマイズ型）

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします

▲