【WordPress】クローラーにも親切なパンくずを付けたい人のためのスニペット

最近は仕事でSEOの勉強をする機会が多いです。
勉強したことは自分のブログにも反映させているのですが、そこそこ効果はあるようで。
「くろひつじ」で検索すると、１ページ目（下部ですが）に表示されるようになってきました。ヤッタネ！

［Ad］

Contents

『パンくず』ってやっぱり必要らしい
コピペOK！パンくずを表示するスニペット
- CSSはどうしてる？
自分の記事を探している人に届けるために

『パンくず』ってやっぱり必要らしい

勉強している中で「なるほどな〜」と思い、サイトにも反映させたのが『パンくず』です。

パンくずとは、サイトの構造をユーザーに分かりやすく表示するためのもの。
今見ているページは、何というカテゴリ内にあるのか、トップページはどこなのか、それらを明確にしたものです。
このページだと、記事の最後、関連記事の手前に表示しています。

パンくずはユーザーにも親切ですが、コレを正しく記述すれば、クローラーにも親切になります。

<!-- breadcrumb -->
<ul id="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="https://memo.ark-under.net" itemprop="url"><span itemprop="title">くろひつじのメモ帳</span></a>
	</li>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="https://memo.ark-under.net/category/memo" itemprop="url"><span itemprop="title">Memo</span></a>
	</li>
<li>【WordPress】クローラーにも親切なパンくずを付けたい人のためのスニペット</li>
</ul>
<!-- /breadcrumb -->

こう書くことで、クローラーが正しくそのページのサイト構造を認識してくれるんだそうです。

コピペOK！パンくずを表示するスニペット

しかし、wordpressでパンくずをつけるとなると、実は意外と面倒くさい。
なのでコピペで使えるスニペットとして作ってみました。
まず、以下をfunctions.phpに追加。

//現在のページ数の取得
function show_page_number($nl) {
	global $wp_query;
	$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
	$max_page = $wp_query->max_num_pages;
	if($nl=='false'){
		return $paged;
	}else{
		echo $paged;
	}
}

以下のコードだけをコピペした「mod-breadcrumb.php」というファイルを作ります。

<!-- breadcrumb -->
<ul id="breadcrumb">
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo home_url(); ?>" itemprop="url"><span itemprop="title"><?php bloginfo('name'); ?></span></a>
	</li>
<?php if(is_category()): //カテゴリページの場合 $catName = single_cat_title("", false); $catId = get_cat_ID( $catName ); $cats = get_category( $catId ); $parentCat = $cats->parent;
	$catSlug = $cats->slug;
	$parentLink = get_category_link( $catC->term_id );
	if($parentCat):
	$parent = get_category($parentCat);
	$parentLink = get_category_link( $parent->term_id );?>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php echo $parentLink; ?>" itemprop="url"><span itemprop="title"><?php echo $parent->cat_name; ?></span></a></li>
	<?php endif; ?>
<li><?php echo $catName; ?>（<?php show_page_number(''); ?>）</li>
<?php elseif(is_tag()): //タグページ $catName = single_cat_title("", false); ?>
<li><?php echo $catName; ?>（<?php show_page_number(''); ?>）</li>
<?php elseif(is_search()): //検索結果ページ ?>
<li>検索結果：<?php the_search_query(); ?>（<?php show_page_number(''); ?>）</li>
<?php elseif(is_archive()): //アーカイブページ ?>
<li><?php wp_title(''); ?>（<?php show_page_number(''); ?>）</li>
<?php elseif(is_single()): //記事ページの場合 $catCs = get_the_category($post->ID);	$cat = $catCs[0];
	$catLink = get_category_link( $cat->term_id );
	$catName = $catCs[0]->name;
	//親カテゴリーの取得
	$catParent = '';	$catParentLink = '';
	foreach($catCs as $catC){
		if($catC->parent > 0){ //親カテの情報があればセット
			$catParent = $catC->name;
			$catParentLink = get_category_link( $catC->term_id );
		}
	}?>
	<?php if($catParent): //親カテゴリーを表示 ?>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo $catParentLink; ?>" itemprop="url"><span itemprop="title"><?php echo $catParent; ?></span></a>
	</li>
	<?php endif; ?>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo $catLink; ?>" itemprop="url"><span itemprop="title"><?php echo $catName; ?></span></a>
	</li>
<li><?php the_title(); ?></li>
<?php elseif(is_page()): // 固定ページの場合 foreach ( array_reverse(get_post_ancestors($post->ID)) as $parid ): //親ページがあれば表示 ?>
<li itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
		<a href="<?php echo get_page_link( $parid );?>" itemprop="url"><span itemprop="title"><?php echo get_page($parid)->post_name; ?></span></a>
	</li>
<?php endforeach; ?>
<li><?php the_title(); ?></li>
<?php else: ?>
<li><?php the_title(); ?></li>
<?php endif; ?>
</ul>
<!-- /breadcrumb -->

あとは、テンプレートの好きな場所に、以下のモジュールファイルを呼び出すコードを追加します。
single.phpやpage.phpに追加する場合は、ループ内に入れてください。

<?php get_template_part('mod-breadcrumb'); ?>

「カテゴリ」「タグ」「検索結果」「アーカイブ」「記事ページ」「固定ページ」とほとんどのページで使用できますが、必要に応じて分岐を追加して使用してください。

CSSはどうしてる？

パンくずを追加することはできましたが、このままではただのリストです。
うちのブログはこんな感じでCSSを設定。悩みたくない人はicon_home.pngを用意して、以下をコピペでどうぞ。

/* パンくず */
#breadcrumb{
	width: 98%;
	margin: 0 auto 30px;
	color: #666666;
	font-size: 1.1rem;
	text-align: center;
}
main #breadcrumb{
	margin: 0 auto 18px;
	text-align: left;
}
main.archive #breadcrumb{
	margin: -10px auto 20px;
	text-align: center;
}
#breadcrumb li{
	display: inline;
}
#breadcrumb a{
	color: #666666;
	text-decoration: none;
}
#breadcrumb li:after{
	content: '>';
	display: inline;
	padding-right: 3px;
	padding-left: 3px;
}
#breadcrumb li:first-child a{
	display: inline-block;
	width: 20px;
	height: 16px;
	overflow: hidden;
	text-indent: -9999px;
	background-image: url(img/icon_home.png);
	background-repeat: no-repeat;
	background-size: 18px auto;
	background-position: left center;
	vertical-align: middle;
}
#breadcrumb li:first-child:after{
	padding-left: 0px;
}
#breadcrumb li:last-child:after{
	content: '';
}