【Wordpress SEO対策】マークアップ付パンくずリスト(コピペ可)

パンくずリストがあると、閲覧者様が迷子になる心配もないし、回遊率UPやSEO対策、最近ではリッチスニペットなど、Wordpressの必須アイテムですよね^^。

自作の「パンくず」なら見た目も、配置も、思い通り。
~~今回は、投稿に複数カテゴリーが紐付いている場合、ショップサイトのように全てのカテゴリーが表示されます。~~1個しか表示されません。。。
~~▼こんな感じ~~

(優先カテゴリーを決めて、というのも作ったのですが、、、それはいつか、、、^^;;)

リッチスニペット対応のパンくずリストで、SEO対策もバッチリ。

ページマークアップと併せて設置すれば [ Schema Markup ] は完了です^^v

パンくずリストの作り方

コードとスタイルシートを作成しています。
コードはコピペでOK^^ 自己責任でご利用下さいませm(__)m

コードの水色部分は Font Awesome(4.7.0) を使用しています。
Font Awesomeをお使いの場合や、アップロードできる場合はそのままでOKですが、、、

Font Awesomeを使用しない場合は最後に記載の Font Awesome不使用時の修正方法をご覧下さい^^

パンくずリストのコード

少々長いですが、、、
「投稿ページ」「固定ページ」「カテゴリー」「月アーカイブ」「検索結果」「404」
に対応するようになっています^^;

以下を functions.php に貼り付けます

<?php 
function mybreadcrumb() { if( !is_home() && !is_front_page()){ 
global $post;
echo '<nav class="breadcrumb">'. PHP_EOL;
$first = '<ol class="bread-links" itemscope itemtype="http://schema.org/BreadcrumbList"> 
<li class="home" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
	<a itemprop="item" href="'. esc_url( home_url( '/' )) .'" title="'. get_bloginfo( 'name' ) .' トップページ"> 
	<i class="fa fa-home" aria-hidden="true"></i> 
	<span itemprop="name">'. get_bloginfo( 'name' ) .'</span></a><meta itemprop="position" content="1" /></li>'. PHP_EOL; 
if( is_single() ) { // 投稿 
	$categories = get_the_category(); 
	if ( $categories ) { foreach( $categories as $category ) { 
		$i = 2; 
		$bread = $first; 
		if( $category->parent ){ 
			$parent = get_category( $category->parent ); 
			$bread.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
	<a itemprop="item" href="'. get_category_link( $parent ) .'" title="'. $parent->name .'"> 
	<span itemprop="name">'. $parent->name .'</span></a><meta itemprop="position" content="'. $i++ .'" /></li>'. PHP_EOL; 
		} 
		$bread.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
	<a itemprop="item" href="'. get_category_link( $category ) .'" title="'. $category->name .'"> 
	<span itemprop="name">'. $category->name .'</span></a><meta itemprop="position" content="'. $i++ .'" /></li>'. PHP_EOL; 
		$bread.= '</ol>'. PHP_EOL; 
	}} 
} else { 
	$bread = $first; 
	if( is_page() ) { // 固定ページ 
		global $page; 
		$i = 2; 
		if( $post->post_parent > 0 ) {
			$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
			foreach( $ancestors as $ancestor ) {		
				$bread.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="'. get_permalink( $ancestor ) .'" title="'. get_the_title( $ancestor ) .'">
	<span itemprop="name">'. get_the_title( $ancestor ) .'</span></a><meta itemprop="position" content="'. $i++ .'" /></li>'. PHP_EOL;
			}
		}
		if ( $page > 1 ){ 
			$bread.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
	<a itemprop="item" href="'. get_page_link() .'" title="'. $post->post_title .' p1">
	<span itemprop="name">'. $post->post_title .' p1</span></a><meta itemprop="position" content="'. $i++ .'" /></li>'. PHP_EOL;
			$bread.= '<li>'. $post->post_title .' p'. $page .'</li>'. PHP_EOL; 
		} else { 
			$bread.= '<li>'. $post->post_title .'</li>'. PHP_EOL; 
		} 
	} elseif( is_category() ) { // カテゴリーページ 
		$cat = get_queried_object(); 
		if( $cat->parent > 0 ) { 
			$ancestors = array_reverse( get_ancestors( $cat->cat_ID, 'category' ) ); 
			foreach( $ancestors as $ancestor ) { 
				$i = 2; 
				$bread.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
	<a itemprop="item" href="'. get_category_link( $ancestor ) .'" title="'. get_cat_name( $ancestor ) .'"> 
	<span itemprop="name">'. get_cat_name( $ancestor ) .'</span></a><meta itemprop="position" content="'. $i++ .'" /></li>'. PHP_EOL; 
			} 
		} 
		$bread.= '<li>'. $cat -> name .'</li>'. PHP_EOL; 
	} elseif( is_date() ){ // 月別 
		if( get_query_var( 'monthnum' ) > 0 ) { 
			$bread.= '<li>'. get_query_var( 'year' ) .'年'. get_query_var('monthnum') .'月</li>'. PHP_EOL; } 
	} elseif( is_search() ){ // 検索結果 
		$bread.= '<li class="bcl-last">'. get_search_query() .' の検索結果</li>'. PHP_EOL;  
	} elseif( is_404() ) { // 404 Not found 
		$bread_crumb.= '<li class="bcl-last">Not found</li>'. PHP_EOL ;  
	} 
	$bread.= '</ol>'. PHP_EOL;  
} 
//書き出し 
echo $bread .'</nav>'. PHP_EOL ;  
 } }

スタイルシート

以下を style.css に貼り付けます

/* パンくず +++++++++++++++++++++++++++++++++++++++++++ */
.breadcrumb li {display: inline-block; margin-bottom: 5px; } 
.breadcrumb a {display: inline-block; margin-right: 3px; } 
.breadcrumb a:after {content: "\f105"; font-family: "FontAwesome"; color: #ccc; padding-left: 5px; } 
.breadcrumb .home a span {display: none;}

Font Awesome不使用時の修正方法

コードの修正

<li class="home" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> 
	<a itemprop="item" href="'. esc_url( home_url( '/' )) .'" title="'. get_bloginfo( 'name' ) .' トップページ"> 
	HOME 
	<span itemprop="name">'. get_bloginfo( 'name' ) .'</span></a><meta itemprop="position" content="1" /></li>'. PHP_EOL;

8行目 <i class=”fa fa-home” aria-hidden=”true”></i> ⇒ HOME

に書き換えます。サイトタイトルなど、別の名称でもOK^^

スタイルシートの書き換え

4行目 content: “\f105”; font-family: “FontAwesome”; ⇒ content: “>”;

に書き換えます。

パンくずリストの使い方

テンプレートの表示したい場所に

<?php mybreadcrumb(); ?>

と記載すればOKです^^

【WordPress SEO対策】マークアップ付パンくずリスト(コピペ可)