WordPress プラグインなしでパンくずリストを表示

WordPressで記事ページにパンくずリストを表示する方法は、プラグインなど様々な方法があります。

いろんな方法がありますが、テンプレートタグを使えば、かなり簡単に表示させる事ができます。

最近のWordPress用ブログテンプレートは、いわしブログでも使用しているStinger3を始め、最初からパンくずリスト出力が標準装備されるようになってきました。

でも、企業向けのWordPressサイトを一から作る場合は、やはり自前でパンくずリストを設置する必要があります。WordPressにはパンくずリスト表示用プラグインがたくさんありますが、今回はプラグインを使わずにパンくずリストを設置する方法を紹介します。

パンくずリストとは？

パンくずリスト

パンくずリストとは、webサイトやブログ内での位置を視覚的にわかりやすくするために、滞在中のページを階層順にリスト化して表示したものです。このブログにもタイトルの上にパンくずリストが表示されていますね。

規模の大きいサイトだと、現在どの階層のページを見ているのかがわかりにくいのですが、パンくずリストがあれば、サイト内の現在位置が直感でわかるようになります。

また、パンくずリストは、ユーザビリティの向上だけではなく、SEOにも重要な役割を果たしています。

検索エンジンにサイトの構造を正しく認識させることは、SEOの重要なポイントの一つなのですが、パンくずリストを表示させることで、検索エンジンにサイトの階層や構造を正確に把握させることができます。

ちなみに、「パンくず」という名称の由来ですが、童話「ヘンゼルとグレーテル」の中で、主人公が森の中で迷わないように、パンくずを落としながら歩いたというお話から来ています。英語では「breadcrumbs」と表記します。

プラグインなしでパンくずリストを設定

WordPressには、パンくずリストを表示するためのプラグインがたくさんありますが、今回はプラグインを使わずにパンくずリストを表示させることにしました。

パンくずリスト表示コードは、bl6.jpさんの記事から引用させていただきました。ありがとうございます。

パンくずリスト表示コード functions.php記載用

まずはfunctions.phpに以下のコードを記載します。このコードは投稿ページだけでなく、カテゴリや固定ページにも対応、固定ページが親子構造になっている場合でもパンくずリストを出力させることができます。

また、microdata形式による構造化マークアップにも対応しています。自動的にmicrodataコードがパンくずと共に生成されるので、検索結果にパンくずを表示させることができます。

// パンくずリスト

function breadcrumb(){

global $post;

$str ='';

if(!is_home()&&!is_admin()){

$str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';

$str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> ></div>';

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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> ></div>';

}

$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';

} elseif(is_page()){

if($post -> post_parent != 0 ){

$ancestors = array_reverse(get_post_ancestors( $post->ID ));

foreach($ancestors as $ancestor){

$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></div>';

}

} 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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> ></div>';

}

} else{

$str.='<div>'. wp_title('', false) .'</div>';

}

$str.='</div>';

}

echo $str;

}