32ARTS この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
- パンくずとは
-
ページ・ナビゲーションのことで、ブログやホームページで現在表示されている
ページがサイト内のどの位置にいるかを階層表示するリスト。
閲覧者が迷子にならないように、表示させることがユーザビリティの向上となり
ますので、導入することをオススメします。
ページの種類 ⇒ パンくずリスト
・ホーム（サイトのトップページ）⇒ 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(); ?>
style.css 追加
/* パンくず */
#pankuzu {
text-align:left;
}
こちらの内容はメモとして残像ブログさんの内容を利用させて頂いていますので
詳しくはこちらより、ご覧ください。
WordPressでプラグインを使わずにパンくずリストを表示する
その後、上記方法の場合、固定ページの親子ページのパンくずが、階層どおりに表示されないことが判明。
以下の内容に変更し対応。
function breadcrumb() {
global $post;
echo '<div class="breadcrumb">';
echo '<ul>';
echo '<li><a href="' . home_url() . '/">Home</a></li>';
if ( ! is_home() ) {
echo '<li> > </li>';
}
if ( is_search() ) {
echo '<li>Search</li>';
} elseif ( is_tag() ) {
echo '<li>Tag: <i>' . single_tag_title('' , false ) . '</i> </li>';
} elseif( is_404() ) {
echo '<li>404 Not found</li>';
} elseif( is_date() ) {
if ( is_day() ) {
echo '<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
echo '<li> > </li>';
echo '<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')) .'">'. get_query_var('monthnum') .'月</a></li>';
echo '<li> > </li>';
echo '<li>'. get_query_var('day') .'日</li>';
} elseif ( is_month() ) {
echo '<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
echo '<li> > </li>';
echo '<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')) .'">'. get_query_var('monthnum') .'月</a></li>';
} else {
echo '<li>'. get_query_var('year') .'年</li>';
}
} elseif( is_category() ) {
$cat = get_queried_object();
if ( $cat->parent != 0 ) {
$ancestors = array_reverse(get_ancestors( $cat->cat_ID, 'category' ));
foreach ( $ancestors as $ancestor ) {
echo '<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
echo '<li> > </li>';
}
echo '<li>'. $cat->cat_name .'</li>';
} else {
echo '<li>'. $cat->cat_name .'</li>';
}
} elseif( is_page() ) {
if ( $post->post_parent != 0 ) {
$ancestors = array_reverse( $post->ancestors );
foreach($ancestors as $ancestor) {
echo '<li><a href="'. get_permalink($ancestor) .'">'. get_the_title($ancestor) .'</a></li>';
echo '<li> > </li>';
}
echo '<li>'. $post->post_title .'</li>';
} else {
echo '<li>'. $post->post_title .'</li>';
}
} elseif( is_attachment() ) {
$img = preg_replace( '/^http:[^ \t\n\r\f]+\//', '', wp_get_attachment_url() );
echo '<li>'. $img .'</li>';
} elseif( is_single() ) {
$categories = get_the_category($post->ID);
$cat = $categories[0];
if( $cat->parent != 0) {
$ancestors = array_reverse(get_ancestors( $cat->cat_ID, 'category' ));
foreach ( $ancestors as $ancestor ) {
echo '<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
echo '<li> > </li>';
}
echo '<li><a href="' . get_category_link($cat->cat_ID) .'">'. $cat->cat_name .'</a></li>';
echo '<li> > </li>';
echo '<li>'. $post->post_title .'</li>';
} else {
echo '<li><a href="' . get_category_link($cat->cat_ID) .'">'. $cat->cat_name .'</a></li>';
echo '<li> > </li>';
echo '<li>'. $post->post_title .'</li>';
}
} elseif ( is_paged() ) {
$no = (get_query_var('paged'));
if ( ! $no ) { $no = '1'; }
echo '<li> > </li>';
echo '<li>Page: '. $no .'</li>';
} else {}
echo '</ul>';
echo '</div>';
echo '<div class="breadcrumb_end"></div>';
}
以下のコードをパンくずリストをヘッダー部の最後、または表示したいテンプレートに挿入
<div class="pankuzu"><?php breadcrumb(); ?></div><!--パンくず表示-->
【 wordpressビジネスサイトの場合はこちらを使用 】
以下のコードをヘッダー部の最後、または表示したいテンプレートに挿入
<?php if ( is_front_page() ) { // トップページ ?>
<?php } else { // トップページ ?>
<div class="pankuzu"><?php breadcrumb(); ?></div><!--パンくず表示-->
<?php } ?>
style.css 追加
/* パンくず */
.pankuzu {
text-align:left;
margin: 5px 0px 5px 0px;
line-height: 1.846153846;
}
.breadcrumb li {
float: left;
}
.breadcrumb_end {
clear:both;
}