サイト訪問者がサイト内での現在位置を直感的に把握するのに便利なパンくずリスト。
ユーザビリティ・アクセシビリティの向上という点においてパンくずリストを表示させることはスタンダードな要素になります。
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. juntak4 より:

    プラグインを使わずfunctions.phpを使う

  2. […] ンくずリストのコード探してみたところよさそうなのがあった(WordPressにプラグインなしでパンくずリストを表示させる方法)のですが、Wordpress3.0からトップページに任意のページを指定 […]

  3. […] 今回はBlog Play Under Worldさんの記事の方法を試してみます。 以下のコードをfunctions.phpに追加 […]

  4. stellar_spr より:

    [パンくず]

  5. okosou より:

    パンくずリスト

  6. megayosuke より:

    WordPressにプラグインなしでパンくずリストを表示する方法。これがいまのところ一番使いやすいかな? http://bit.ly/gPyEiI

  7. hayashin10 より:

    RT @megayosuke: WordPressにプラグインなしでパンくずリストを表示する方法。これがいまのところ一番使いやすいかな? http://bit.ly/gPyEiI

  8. zaki より:

    RT @megayosuke: WordPressにプラグインなしでパンくずリストを表示する方法。これがいまのところ一番使いやすいかな? http://bit.ly/gPyEiI

  9. ekawasaki より:

    RT @megayosuke: WordPressにプラグインなしでパンくずリストを表示する方法。これがいまのところ一番使いやすいかな? http://bit.ly/gPyEiI

  10. […] いパンくずリストの設定があるのが分かった。参考にしたサイトWordPressにプラグインなしでパンくずリストを表示させる方法functions.php に追加して動作を確認。確かにプラグインを使わな […]

  11. designholic より:

    WPでパンくずナビを実装するコード。

  12. Yoshi より:

    こんにちは。
    パンくずリストの表示方法ありがとうございます。
    ところで、特定のカテゴリーのみを非表示にする、ということは可能でしょうか?
    例えばカテゴリーID10だけを非表示(除外する)にする、という具合です。

  13. YOU UCHIDA より:

    Yoshiさん:
    はじめまして、こんにちは。
    その場合は is_category という条件分岐タグを使用ます。
    カテゴリーID10の場合は is_category(’10’) ですね。

  14. […] Blog × Play Under Worldさんのブログで紹介されていたものを 参考にさせていただき、自分なりにカスタマイズしました。 カスタマイズした部分: ・ リストタグで囲まれていたものを 定義 […]

  15. Eco より:

    こんにちは、はじめまして!
    今、WordPressを設置しているホスティングサーバはPHP4(!)なため、お書きになっている『Breadcrumb NavXT』が有効化できず、プラグインを使わないパンくずリストはないものかと探していて、こちらにたどり着きました。

    早速設置してみたのですが、カスタム投稿タイプで作成したページには、「サイト名 >>Objectページ名 」となってしまいます。固定ページの場合は問題なくカテゴリーが表示されます。もし、この解決方法をご存知でしたら、ご教示いただければ大変助かります。突然厚かましいお願いをして、すみません…。

  16. Eco より:

    YOU UCHIDAさま

    昨日、こちらで質問させてもらったEcoです。質問した後もまたいろいろ探しているうちに、希望の動作が可能なコードが見つかってしまいました…。
    お返事をもらう前にこのような状況となってしまい、大変失礼かと思いましたが、そのコードを採用することいたしました。本当にすみません。

  17. Yoshi より:

    YOU UCHIDA さま

    こんにちは。

    すいません、当方初心者のため、もう少し詳しく教えて下さい。

    >カテゴリーID10の場合は is_category(’10′) ですね。

    このままコード内に書き加えるだけでいいのでしょうか?

    また、コード内どこに設置してもいいのでしょうか?

    非常に素人質問で恐縮ですが、宜しくお願いします。

  18. YOU UCHIDA より:

    Ecoさん:
    いえいえ、とんでもないです。
    get_post_type() かなとあたりはついていたのですが、動作確認ができていなくてお返事が遅くなっていました。
    動作が可能なコードが見つかって良かったですね。

  19. YOU UCHIDA より:

    Yoshiさん:
    こういうことでしょうか?

    if ( !is_home() ){

    の部分を以下のコードに差し替えてみてください。

    if ( is_category(“10”) ){
    echo “”;
    }
    elseif ( !is_home() ){

  20. Yoshi より:

    YOU UCHIDA さま

    こんばんは。
    解説ありがとうございますm(_._)m
    とても助かります。

    ところで、サイトにパンくずは表示され、ちゃんと動いてるのですが、Wordpressの管理画面が真っ白で作動しなくなってしまいました。(コードを削除すると復活)
    これは何かプラグインが影響しているのでしょうか?

  21. taichi_ito より:

    パンくずをプラグインを使わずにカスタマイズする

  22. junysb3 より:

    WordPressにプラグインなしでパンくずリストを表示させる方法 « Blog × Play Under World: http://bit.ly/dYfbOP

  23. YOU UCHIDA より:

    Yoshi様
    こちらでは上記コードで動作を確認しています。
    差し替えた部分がダメだったのでしょうかね?

  24. samuri より:

    こっちだな / Blog × Play Under World – WordPressにプラグインなしでパンくずリストを表示させる方法 http://htn.to/4DSk3J

  25. samuri02 より:

    こっちだな

  26. goron より:

    いつもありがとうございます。
    当方、WP初心者ながらオリジナルテーマを作って作成しています。
    説明いただいています通りのタグをfunctions.phpに記載し、index.phpに呼び込みましたら、うまく表示されました。
    同じように、home.phpに呼び込むために、を記載しましたが、表示されません。
    何が足りないのでしょうか。
    気づかれることがありましたら、ご教授いただけないでしょうか。
    お手数をおかけしますが、どうぞよろしくお願い致します。

  27. YOU UCHIDA より:

    goron様

    どういたしまして、こんにちは。
    homeで表示させるには、「!is_home()」となっている部分を「is_home()」と変更してみてください。

  28. […] WordPressにプラグインなしでパンくずリストを表示させる方法 WordPressのパンくずリストをプラグインを使わずカスタマイズ […]

  29. goron より:

    YOU UCHIDA 様

    お返事ありがとうございます
    ご連絡が遅くなりました

    さっそく試してみたところ、表示されました!
    私に少しのphpの知識があれば良かったのですが。

    助かりました、活用させていただきます。

    また訪問させてもらいます。

    ありがとうございました。

  30. YOU UCHIDA より:

    goron様

    どういたしまして。無事表示されたようで良かったです。

  31. gadgetshop より:

    お客様に環境を移行してもらう訳いかないので、プラグインなし助かります。

  32. yu_ki0806 より:

    ふむふむ、Wordpressでパンくずリストを表示させる際に、プラグイン無しでも行けるのか! http://bit.ly/kzKXlM 参考になった~

  33. niesoxxx より:

    WordPressにプラグインなしでパンくずリストを表示させる方法 http://t.co/SYgJO56 via @you2u

  34. dmg_tshirts より:

    [WordPress][パンくず] / Blog × Play Under World – WordPressにプラグインなしでパンくずリストを表示させる方法 http://htn.to/rN7s5E

  35. wordpressgoat より:

    WordPressにプラグインなしでパンくずリストを表示させる方法 « Blog × Play Under World http://bit.ly/oQIqqK #wordpress #wp

  36. kotori_blog より:

    WordPressにプラグインなしでパンくずリストを表示させる方法 http://t.co/3Q9InqG via @you2u

  37. […] 参考にさせていただいたサイトはこちら […]

  38. ow_ukeguchi より:

    簡単にぱんくずさくせい。固定ページばっかりのサイトで簡単に実装。goodです

  39. ie6knight より:

    WordPressにプラグインなしでパンくずリストを表示させる方法
    http://t.co/s4TDhRdl

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

  41. rimne1190 より:

    “Blog × Play Under World – WordPressにプラグインなしでパンくずリストを表示させる方法” http://t.co/U7m0AWdg

  42. nasabe より:

    パンクズをプラグイン無しで

  43. ryoma_konno より:

    WordPressにプラグインなしでパンくずリストを表示させる方法 « Blog × Play Under World – http://t.co/I1ef0gt4 #89memo

  44. […] ユーザービリティの観点から、パンくずリストは必ず入れるようにしています。こちらのブログ記事を参考にして作りました。 […]

  45. find_key より:

    WordPressにプラグインなしでパンくずリストを表示させる方法 http://t.co/azb4Czd0 便利!すごく助かりました!改行が入ってしまうので、元のプログラムで改行部分を削除して横一列にして表示しました。

  46. chinaharem より:

    WordPress の場合、『Breadcrumb NavXT』というプラグインを使って表示させることが可能ですが、今回はプラグインを使わずに表示させる方法です。

  47. hmatsumi より:

    WordPressにプラグインなしでパンくずリストを表示させる方法 « Blog × Play Under World http://t.co/5Ipqcq0w

  48. ikeikegogo0512 より:

    ほほぅ♪( ´▽`)“@hmatsumi: WordPressにプラグインなしでパンくずリストを表示させる方法 « Blog × Play Under World http://t.co/nh9pcQB3”

  49. hmatsumi より:

    早速設定しました! RT @ikeikegogo0512: ほほぅ♪( ´▽`)“@hmatsumi: WordPressにプラグインなしでパンくずリストを表示させる方法 « Blog × Play Under World http://t.co/5Ipqcq0w”

  50. tuckin94 より:

    WordPress サイトで『Breadcrumb NavXT』というプラグインを使わずに「パンくずリスト」を表示させる方法。

  51. teamiks より:

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

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

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

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

Leave a Reply

  • Categories