WordPressでプラグインを使わずにパンくずリストを表示する
パンくずリストは上のようにwebサイトのコンテンツを階層で表したリストのことですね。元ネタは「ぅゎょぅι゛ょっょぃ」のキャッチコピーで有名なヘンゼルとグレーテルだった気がする。
WordPressにはこのパンくずリストを簡単に設置できるBreadcrumb Navigation XTという大変便利なプラグインがあるのでとっても快適。
ですがせっかくなのでプラグインなしでパンくずリストを実装してみようと思います。
注意事項
- 区切り文字を単独の「>」にするとカテゴリアーカイブ、個別記事での表示がおかしくなる可能性があります(下記のコードでは「 >&nbdp;」としています)。
- 記事に設定するカテゴリに親子関係がある場合、パンくずに子カテゴリが表示されない場合があります。記事を投稿する際、最下層の子カテゴリにのみチェックすれば避けられるようです(下図参照)。
実装されるパンくずリストのイメージ
この記事で作成するパンくずリストは以下のような結果が出力されます。
(青字はリンク)
ページの種類 | パンくずリスト | 備考 |
---|---|---|
ホーム(サイトのトップページ) | HOME | |
カテゴリアーカイブ | HOME > カテゴリ1 > カテゴリ1-1 > カテゴリ1-1-1 | ※カテゴリの親子関係を表示 |
記事の個別ページ | HOME > カテゴリ1 > カテゴリ1-1 > カテゴリ1-1-1 > 記事タイトル | |
固定ページ | HOME > ページタイトル | |
タグアーカイブ | HOME > タグ:タグ名 | |
日付アーカイブ | HOME > yyyy年 mm月 dd日 | ※年単位、月単位、日単位それぞれに対応 |
検索結果 | HOME > 検索文字列 の検索結果 | |
投稿者アーカイブ | HOME > 投稿者名 | |
404ページ | HOME > ページが見つかりません。 | |
上記のどれにも当てはまらない場合 | HOME |
とりあえず生コード
以下のコードをfunctions.phpに記入。
function my_bread(){ global $post; define("SEPA"," > "); //区切り文字 //【表示】ホーム echo '<a href="'. get_bloginfo('url').'">HOME</a>'; //カテゴリアーカイブ if(is_category()){ echo SEPA; $cat = get_category(get_cat_ID(single_cat_title('',false))); //親カテゴリがある場合 if($cat->parent){ $cate_pare = get_category_parents(get_cat_ID(single_cat_title('',false)),true,SEPA); //get_category_parentsが自カテゴリも生成しちゃうので除去 for($i=0;$i<2;$i++){ $cate_pare = substr($cate_pare,0,strrpos($cate_pare,SEPA)); } //【表示】親カテゴリ echo $cate_pare.SEPA; } //【表示】自カテゴリ single_cat_title(); //個別記事ページ }elseif(is_single()){ echo SEPA; while(have_posts()){ the_post(); $cat=get_the_category(); $cat = $cat[0]; //【表示】カテゴリ echo get_category_parents($cat->cat_ID,true,SEPA); //【表示】記事タイトル the_title(); } //ページ }elseif(is_page()){ echo SEPA; //【表示】ページタイトル the_title_attribute(); //タグアーカイブ }elseif(is_tag()){ echo SEPA.'タグ:'; //タグ名 single_tag_title(); //日付アーカイブ }elseif(is_date()){ echo SEPA; //西暦の後に「年」がつかないので追加 $date = wp_title('',false); $date = substr($date,0,6).'年'.substr($date,6); //【表示】日付 echo $date; //日付の後に「日」がつかないので追加 if(is_day()){ echo '日'; } //検索結果 }elseif(is_search()){ echo SEPA; //【表示】検索文字列 the_search_query(); echo ' の検索結果'; //投稿者アーカイブ }elseif(is_author()){ echo SEPA; //【表示】投稿者名 wp_title(); //404ページ }elseif(is_404()){ //【表示】案内文 echo SEPA.'ページが見つかりません。'; } }
以下のコードをパンくずリストを表示したいテンプレートに記入
<?php my_bread(); ?>
説明
WordPressに用意されている条件分岐タグで今どの種類のページなのか判定して、対応した情報を表示している。
条件分岐タグ - WordPress Codex 日本語版
今回使用した主なテンプレートタグとかWordPressの関数
名前 | 説明 | ループ内・外 |
---|---|---|
is_○○() | それぞれの条件に該当したらTRUEを返す | |
get_bloginfo('url') | ブログの情報を取得(ここではブログのURL)。'url'の部分を他の値にすれば他の情報を取得可能(テンプレートタグ/get bloginfo - WordPress Codex 日本語版)。 | 両方 |
single_cat_title() | 現在のカテゴリ名を取得・表示。カテゴリアーカイブページでのみ有効。 | 外 |
get_cat_ID() | カテゴリ名からカテゴリIDを取得する。 | |
get_category() | 指定したIDのカテゴリの情報を取得する(関数リファレンス/get category - WordPress Codex 日本語版)。 | |
get_the_category() | get_category()と名前が似てるが、こちらは記事のループ内でしか使えない。属する記事のカテゴリ情報を取得する。 | 内 |
get_category_parents() | 指定したカテゴリIDのカテゴリと、その親カテゴリを表示。またはリンクを生成 | |
the_title() | 記事のタイトルを取得・表示 | 内 |
the_title_attribute() | 記事のタイトルを取得・表示 | 外 |
single_tag_title() | 現在のタグ名を表示・取得。タグアーカイブで使用 | |
wp_title() | タイトルバーに使う奴。WEBページのタイトルを表示する(日付なら日付、投稿者アーカイブなら投稿者名 など)。 | 外 |
the_search_query() | 検索に使用した検索文字列を表示 |
※取得:phpで扱える情報として取得(直接表示はされない)。
※表示:そのまま値が画面に表示される。
細かい事
最初のdefine()の第二引数を変更すれば区切り文字を変更できる。
多少色々やってるのはカテゴリアーカイブ、個別記事ページ、日付アーカイブのみで、それ以外は一発で欲しい情報を表示してくれるテンプレートタグがある。
カテゴリアーカイブでは親カテゴリをget_category_parents()、現在のカテゴリをsingle_cat_title()で表示している。こうやって分けることで親カテゴリはリンク、現在のカテゴリはただのテキストとして表示できる。
だがget_category_parents()は親カテゴリだけでなく現在のカテゴリも表示してしまう上、末尾にセパレータもつけてしまうので、phpのsubstr()関数で余計な部分を取り除いている。
個別記事ページはループを使ってカテゴリとタイトルを取得している。
日付アーカイブは探した限りではうまいこと日付を表示してくれるテンプレートタグを発見できなかったので、ページのタイトルを表示するwp_title()を使っている。
いざ表示してみると「2011 5月 26」みたいに月以外は単位が表示されなかったので(WordPressの設定とか関係あるのかわからん)これまたsubstr()で文字列を分割して、西暦の後に「年」を挿入している。