コピペで実装WordPressで「パンくずリスト」ソースコードを公開！構造化マークアップだから検索結果にも表示されるよ

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> &gt; </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> &gt; </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> &gt; </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> &gt; </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> &gt; </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> &gt; </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> &gt; </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.net" itemprop="url">
	<span itemprop="title">ホーム</span></a> &gt; </span>
	<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="https://naoyu.net/category/wordpress/" itemprop="url">
	<span itemprop="title">Wordpress</span></a> &gt; </span>
	<span>パンくずリストの出力サンプル【WordPress】</span>
</div>

あとは、CSSで好きなようにデザインを整えましょう！