パンくずは一般的にはプラグインを利用しますが、ECサイト等でサイトに特化したパンくずにする為には自作のパンくずの方がカスタマイズ性に優れます。
そこでここでは自作のパンくずを作る方法を解説しています。
1.前提知識
現在表示されているページを判断する関数。
| ページ種別 | 関数 | 備考 |
| ホームページ | is_front_page() | 設定→表示設定で選択したページかを判定する。 |
| 固定ページ | is_page() | 固定ページで作成したコンテンツかを判定する。 |
| 投稿ページ | is_single() | 投稿で作成したコンテンツかを判定する。 |
| カスタム投稿ページ | is_singular(‘××’) | カスタム投稿かを判定する。
××はカスタム投稿の名前 |
| カテゴリページ | is_category() | カテゴリを選択して表示されたページかを判定する。 |
| 検索ページ | is_search() | 検索結果ページかを判定する。 |
| アーカイブページ | is_date() | アーカイブページかを判定する。 |
| is year() | 年別アーカイブページかを判定する。 | |
| is_month() | 月別アーカイブページかを判断する。 |
2.具体的なプログラム
2-1.functions.phpへの記述
// パンくず
get_template_part('func/my_breadcrumb');
※1.上記はfuncフォルダの中にあるmy_breadcrumb.phpを取り込め！という命令です。
2-2.func￥my_breadcrumb.phpに記述するプログラムは下記になります。
<?php /***************************************************************************** breadcrumbプログラム *******************************************************************************/ function my_breadcrumb() { global $wp_query,$post; /* Bootstrapアイコン文字のセット */ $icon_home='<span class="glyphicon glyphicon-home" aria-hidden="true"></span>'; $icon_book=' / <span class="glyphicon glyphicon-book" aria-hidden="true"></span> '; $icon_file=' / <span class="glyphicon glyphicon-file" aria-hidden="true"</span>'; ?> <style> #breadcrumb{ display:flex; flex-wrap:wrap; /* パンくずが画面一杯になった複数行にする */ margin:3px;0; font-size:14px;font-size:0.875rem;} </style> <?php if(is_front_page()):return; ?> <!-- HOMEページなら終了 --> <?php endif; ?> <div id='breadcrumb'> <a href='<?php echo home_url(); ?>/'><?php echo $icon_home; ?> HOME</a><!--パンくずの先頭部分--> <!--固定ページのパンくず処理--> <?php if(is_page()): ?> <?php if($post->post_parent != 0):?> <?php $ancestors = array_reverse(get_ancestors($post->ID,'page'));?> <?php foreach($ancestors as $id):?> <a href='<?php echo get_permalink($id); ?>'><?php echo $icon_book.get_the_title($id); ?></a> <?php endforeach;?> <?php endif;?> <?php echo $icon_file.$post->post_title; ?> <!--投稿ページのパンくず処理--> <?php elseif(is_single()): ?> <?php $nowcat = get_the_category($post->ID)[0];?> <?php if($nowcat -> parent != 0): ?> <?php $ancestors = array_reverse(get_ancestors($nowcat -> cat_ID, 'category')); ?> <?php foreach($ancestors as $id):?> <a href='<?php echo get_category_link($id);?>'><?php echo $icon_book.get_cat_name($id);?></a> <?php endforeach;?> <?php endif;?> <a href='<?php echo get_category_link($nowcat->term_id);?>'><?php echo $icon_book.$nowcat->name;?></a> <div><?php echo $icon_file.$post->post_title; ?></div> <!-- カテゴリページのパンくず処理--> <?php elseif(is_category()): ?> <?php $nowcat=get_queried_object();?> <?php if($nowcat->category_parent != 0):?> <?php $ancestors = array_reverse(get_ancestors( $nowcat->cat_ID, 'category' ));?> <?php foreach($ancestors as $id):?> <a href='<?php echo get_category_link($id);?>'> / <?php echo get_cat_name($id);?></a> <?php endforeach;?> <?php endif;?> <div> / カテゴリ「<?php echo $nowcat->name;?>」を表示:<?php echo $wp_query->found_posts;?>件</div> <!--検索ページのパンくず処理--> <?php elseif(is_search()): ?> <div> / 「<?php the_search_query();?>」の検索結果：<?php echo $wp_query->found_posts;?>件</div> <!-- アーカイブページのパンくず処理--> <?php elseif(is_date()): ?> <?php if(is_year()==1 and is_month()==0):?> <div> / <?php echo get_query_var('year');?>年の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div> <?php else:?> <a href='<?php echo get_year_link(get_query_var("year"));?>'> / <?php echo get_query_var('year');?>年</a> <div> / <?php echo get_query_var('monthnum');?>月の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div> <?php endif;?> <!-- if文の終了 --> <?php endif;?> </div> <?php } ?>
3.プログラムの解説
①先頭部分
global $wp_query,$post;
/* Bootstrapアイコン文字のセット */
$icon_home='<span class="glyphicon glyphicon-home" aria-hidden="true"></span>';
$icon_book=' / <span class="glyphicon glyphicon-book" aria-hidden="true"></span> ';
$icon_file=' / <span class="glyphicon glyphicon-file" aria-hidden="true"</span>';
始めにこのプログラムの中で使うグローバル変数($wp_query,$post)を宣言しています。
次に下記の様なパンくずの前に付くBootstrapアイコンを各変数($icon_home,$icon_book,$icon_file)セットしています。
②スタイル設定
<style>
#breadcrumb{
display:flex;
flex-wrap:wrap; /* パンくずが画面一杯になった複数行にする */
margin:3px;0;
font-size:14px;font-size:0.875rem;}
</style>
#breadcrumb(パンくず)の横表示はFlexbox機能を利用しています。
また画面一杯になった時に「flex-wrap:wrap;」で複数行表示を指定しています。
③フロントページの処理
<?php if(is_front_page()):return; ?> <!-- HOMEページなら終了 -->
<?php endif; ?>
フロントページの場合はこの関数からリターンさせています。
④パンくずの先頭処理
<div id='breadcrumb'>
<a href='<?php echo home_url(); ?>/'><?php echo $icon_home; ?> HOME</a><!--パンくずの先頭部分-->
パンくずの先頭に下記を表示しています。
⑤固定ペーの処理
<!--固定ページのパンくず処理--> <?php if(is_page()): ?> <?php if($post->post_parent != 0):?> <?php $ancestors = array_reverse(get_ancestors($post->ID,'page'));?> <?php foreach($ancestors as $id):?> <a href='<?php echo get_permalink($id); ?>'><?php echo $icon_book.get_the_title($id); ?></a> <?php endforeach;?> <?php endif;?> <?php echo $icon_file.$post->post_title; ?>
※1.この固定ページに親がある場合は「$post->post_parent」に値が入っています。
※2.親がある場合は親を「get_ancestors」で取得し、「array_reverse」で反転させて古い順に並べます。
※3.反転させた親を「foreach」で1個づつ読み出しブックアイコン＋「get_the_title」と「get_permalink」でリンク付き文字にして表示しています。
※4.最後にファイルアイコン＋ドキュメントタイトル「$post->post_title」を表示しています。
表示例
上記は固定ページに親を付けたパンくずサンプルです。
⑥投稿ページの処理
<!--投稿ページのパンくず処理--> <?php elseif(is_single()): ?> <?php $nowcat = get_the_category($post->ID)[0];?> <?php if($nowcat -> parent != 0): ?> <?php $ancestors = array_reverse(get_ancestors($nowcat -> cat_ID, 'category')); ?> <?php foreach($ancestors as $id):?> <a href='<?php echo get_category_link($id);?>'><?php echo $icon_book.get_cat_name($id);?></a> <?php endforeach;?> <?php endif;?> <a href='<?php echo get_category_link($nowcat->term_id);?>'><?php echo $icon_book.$nowcat->name;?></a> <div><?php echo $icon_file.$post->post_title; ?></div>
※1.現在のカテゴリ情報を「$nowcat = get_the_category($post->ID)[0]」で呼び出します。
※2.親がある場合は「$nowcat -> parent」に値が入っています。
※3.親がある場合は親を「get_ancestors」で取得し、「array_reverse」で反転させて古い順に並べます。
※4.反転させた親を「foreach」で1個づつ読み出しブックアイコン＋「get_cat_name」と「get_category_link」でリンク付き文字にして表示します。
※5.次に現在のカテゴリを上記と同様にブックアイコン＋「get_cat_name」と「get_category_link」でリンク付き文字にして表示します。
※6.最後にファイルアイコン＋ドキュメントタイトル「$post->post_title」を表示しています。
表示例
上記はカテゴリに親を付けたパンくずサンプルです。
⑦カテゴリページの処理
<!-- カテゴリページのパンくず処理--> <?php elseif(is_category()): ?> <?php $nowcat=get_queried_object();?> <?php if($nowcat->category_parent != 0):?> <?php $ancestors = array_reverse(get_ancestors( $nowcat->cat_ID, 'category' ));?> <?php foreach($ancestors as $id):?> <a href='<?php echo get_category_link($id);?>'> / <?php echo get_cat_name($id);?></a> <?php endforeach;?> <?php endif;?> <div> / カテゴリ「<?php echo $nowcat->name;?>」を表示:<?php echo $wp_query->found_posts;?>件</div>
※1.関数「get_queried_object()」は、現在のカテゴリ情報を返します。
投稿ページでないので「$nowcat = get_the_category($post->ID)[0]」は使えません。
※2.現在のカテゴリの親の処理は投稿ページの時と同様な処理をしています。
※3.最後に現在のカテゴリ名に加えて、このカテゴリの件数($wp_query->found_posts)を表示しています。
表示例
上記はカテゴリに親を付けたパンくずサンプルです。
⑧検索結果ページの処理
<!--検索ページのパンくず処理--> <?php elseif(is_search()): ?> <div> / 「<?php the_search_query();?>」の検索結果：<?php echo $wp_query->found_posts;?>件</div>
※1.何のワードで検索したか？は「the_search_query()」で取得できます。
※2.検索件数は「$wp_query->found_posts」に設定されています。
表示例
⑨アーカイブページの処理
<!-- アーカイブページのパンくず処理--> <?php elseif(is_date()): ?> <?php if(is_year()==1 and is_month()==0):?> <div> / <?php echo get_query_var('year');?>年の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div> <?php else:?> <a href='<?php echo get_year_link(get_query_var("year"));?>'> / <?php echo get_query_var('year');?>年</a> <div> / <?php echo get_query_var('monthnum');?>月の投稿リストを表示:<?php echo $wp_query->found_posts;?>件</div> <?php endif;?>
※1.月別アーカイブページの場合は、年のURLと月の投稿件数を表示します。
月別アーカイブページの場合は、その年の投稿件数を表示します。
※2.年や月のデータは「get_query_var()」で$wp_queryにあるquery_varsからデータを読み込みます。
年は「get_query_var(‘year’)」、
月は「get_query_var(‘monthnum’)」で取得できます。
※3.年のリンク情報は「get_year_link(get_query_var(“year”)」で取得します。
※4.対象件数は$wp_queryにある「found_posts」の値を見ています。
表示例
