WEBサイト上での、現在のページの場所を表示するのが、パンくずリストです。訪問者が、WEBサイトの階層構造をすぐに理解し、迷子にならずに閲覧するためにパンくずリストは便利です。

WordPressでは、簡単にパンくずリストを表示することができます。ここでは、WEBサイトのユーザビリティを改善してくれるパンくずリストを、WordPress（WEBサイト）に導入する2つの方法を紹介します。

プラグイン「Breadcrumb NavXT」でパンくず表示

はじめに、プラグインで簡単にパンくずリストを表示する方法を解説していきます。「Breadcrumb NavXT」プラグインを管理画面でインストールして有効化しましょう。管理画面「設定」→「Breadcrumb NavXT」で、細かい設定も可能です。

パンくずリストとして出力する細かい設定が可能です。※よくわからない方はそのままでも問題ありません。

WEBサイトで表示させるための方法は、パンくずリストを表示させたい場所に下記を記載するだけです。

<?php if(is_home()): ?>
<?php else: ?>
<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
<?php endif; ?>

以上でパンくずリストが表示されるはずです。確認してみましょう。デザインは、適宜CSSで設定してみてください。

プラグインなしでパンくずリストを表示させる方法

プラグインを使わなくてもパンくずリストを簡単に設定する方法を解説します。まず、下記をfunction.phpに記載します。

<?php
function breadcrumb($divOption = array("id" => "breadcrumb", "class" => "clearfix")){
global $post;
$str ='';
if(!is_home()&&!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */
$tagAttribute = '';
foreach($divOption as $attrName => $attrValue){
$tagAttribute .= sprintf(' %s="%s"', $attrName, $attrValue);
}
$str.= '<div'. $tagAttribute .'>';
$str.= '<ul>';
$str.= '<li><a href="'. home_url() .'/">HOME</a></li>';
$str.= '<li>&gt;</li>';
 
if(is_category()) {	//カテゴリーのアーカイブページ
$cat = get_queried_object();
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
$str.='<li>&gt;</li>';
}
}
$str.='<li>'. $cat -> name . '</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){
$str.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor). '</a></li>';
$str.='<li>&gt;</li>';
}
}
$str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>';
$str.='<li>&gt;</li>';
$str.= '<li>'. $post -> post_title .'</li>';
} elseif(is_page()){	//固定ページ
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<li><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a></li>';
$str.='<li>&gt;</li>';
}
}
$str.= '<li>'. $post -> post_title .'</li>';
} elseif(is_date()){	//日付ベースのアーカイブページ
if(get_query_var('day') != 0){	//年別アーカイブ
$str.='<li><a href="'. get_year_link(get_query_var('year')). '">' . get_query_var('year'). '年</a></li>';
$str.='<li>&gt;</li>';
$str.='<li><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '">'. get_query_var('monthnum') .'月</a></li>';
$str.='<li>&gt;</li>';
$str.='<li>'. get_query_var('day'). '日</li>';
} elseif(get_query_var('monthnum') != 0){	//月別アーカイブ
$str.='<li><a href="'. get_year_link(get_query_var('year')) .'">'. get_query_var('year') .'年</a></li>';
$str.='<li>&gt;</li>';
$str.='<li>'. get_query_var('monthnum'). '月</li>';
} else {	//年別アーカイブ
$str.='<li>'. get_query_var('year') .'年</li>';
}
} elseif(is_search()) {	//検索結果表示ページ
$str.='<li>「'. get_search_query() .'」で検索した結果</li>';
} elseif(is_author()){	//投稿者のアーカイブページ
$str .='<li>投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</li>';
} elseif(is_tag()){	//タグのアーカイブページ
$str.='<li>タグ : '. single_tag_title( '' , false ). '</li>';
} elseif(is_attachment()){	//添付ファイルページ
$str.= '<li>'. $post -> post_title .'</li>';
} elseif(is_404()){	//404 Not Found ページ
$str.='<li>404 Not found</li>';
} else{	//その他
$str.='<li>'. wp_title('', true) .'</li>';
}
$str.='</ul>';
$str.='</div>';
}
echo $str;
}
?>

次に、パンくずリストを表示させたい場所に下記を記載して完了です。

<?php breadcrumb(); ?>

リッチスニペットを使ったパンくずリストを作り、構造化マークアップをしたい方はGoogleを参考にチャレンジしてみてください。S.Sはまだ試行錯誤中ですので、完成したら報告します。