WordPressでパンくずリストの実装方法。構造化マークアップで検索結果に反映する【コピペでOK】
WordPressで「パンくずリスト」を実装するには、便利なプラグインは沢山あります。
しかし、オリジナルテーマを制作している場合、できればプラグイン無しで実装したいですよね。
そこで、コピペで簡単にパンくずが実装できる、PHPコードを公開します！
どのようにしてパンくずとして実装しているか、じっくり見てみてくださいね。
パンくずリストの実装方法
テーマのfunction.phpに以下のコードを追記します。
初心者の方は、必ずバックアップを取ってからお試しください！
/**
* パンくずリスト出力
* <?php if(function_exists("the_breadcrumb")){the_breadcrumb();} ?>
*/
function the_breadcrumb(){
global $post;
$title = '';
$str ='';
if(!is_home()&&!is_admin()){
// ホーム（必ず表示）
$str.= '<div id="breadcrumb" class="cf"><span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
$str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> > </span>';
// 以下条件分岐
// カテゴリー
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.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> > </span>';
}
}
$title = single_cat_title('',false);
// タグ
} elseif(is_tag()) {
$title = single_tag_title('',false);
} elseif(is_date()) {
$title = get_the_time('Y年n月');
// 固定ページ
} elseif(is_page()){
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a> > </span>';
}
}
$title = get_the_title();
// ブログ投稿
} elseif(is_singular('post')){
$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.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> > </span>';
}
}
$str.='<span 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> > </span>';
$title = get_the_title();
// 以下カスタム投稿
// タクソノミー
} elseif(is_tax()){
$query = get_queried_object();
$taxonomy_slug = $query->taxonomy;
$terms = array_reverse(get_the_terms($post->ID, $taxonomy_slug));
$term = $terms[0];
if($term -> parent != 0){
$ancestors = get_ancestors( $term -> term_id, $taxonomy_slug);
foreach($ancestors as $ancestor){
$term_name = get_term_by('term_taxonomy_id', $ancestor, $taxonomy_slug);
$str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_term_link($ancestor, $taxonomy_slug).'" itemprop="url"><span itemprop="title">'. $term_name->name . '</span></a> > </span>';
}
}
$title = esc_html($query->name);
// カスタム投稿
} elseif(is_singular()){
$query = get_queried_object();
$typelink = get_post_type_archive_link($query->post_type);
$typename = get_post_type_object($query->post_type);
$str.='<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. $typelink .'" itemprop="url"><span itemprop="title">'. $typename->labels->name . '</span></a> > </span>';
$title = get_the_title();
// カスタム投稿アーカイブ
} elseif (is_post_type_archive()) {
$posttypeTitle = post_type_archive_title('', false );
$title = esc_html($posttypeTitle);
} elseif (is_404()) {
$title = '404 ページが見つかりません';
} else {
}
$str.='<span>'. $title .'</span>';
$str.='</div>';
}
echo $str;
}
パンくずリストを出力する
<?php if(function_exists("the_breadcrumb")){the_breadcrumb();} ?>
この１行を、パンくずを表示させたい場所にコピペすればOKです。
簡単ですね！！
出力されるHTMLはコレ！
当ページの場合は、この様にHTMLを出力します。
<div id="breadcrumb" class="cf"> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://naoyu.me" itemprop="url"> <span itemprop="title">ホーム</span></a> > </span> <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://naoyu.me/category/wordpress/" itemprop="url"> <span itemprop="title">Wordpress</span></a> > </span> <span>パンくずリストの出力サンプル【WordPress】</span> </div>
あとは、CSSで好きなようにデザインを整えましょう！
