プラグインを使わないで、パンくずリストを導入する

  • 投稿 : 2015-05-04

どんな感じになるのか?

■記事、カテゴリーページの場合
ホーム > [カテゴリ名] >
ホーム > [親カテゴリ名] > [子カテゴリ名] >

■年月アーカイブの場合
ホーム > [年] >
ホーム > [年] > [月] >

■タグページの場合
ホーム > [タグ名] >

見た目の表示は、上記のようになるようにしました。

schema.orgがバージョンアップ。パンくずの設定が従来よりも詳細に設定可能に。 | SEO対策 LYKAONエンジニアブログ

Googleの検索結果に反映されるためには、上記引用先のような構造にしなければなりません。

動作確認の方法

wp-breadcrumb01.png
Testing Tool — Google Developers

上記でURLを入力して、構造化データとしてきちんと認識されているかで期待通りになっているかどうかを確認できます。
画像のような感じになれば、きちんとできています。問題なければ、Googleの検索結果にも反映されるかと思います。

実際のサンプルコード

<!-- パンくず st 記事 -->
<?php if ( is_single() ) : ?>
<?php
?>
<div class="breadcrumb-area">
  <div id="breadcrumb">
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div>
    <?php $postcat = get_the_category(); ?>
    <?php $catid = $postcat[0]->cat_ID; ?>
    <?php $allcats = array($catid); ?>
    <?php 
		while(!$catid==0) {
		    $mycat = get_category($catid);
		    $catid = $mycat->parent;
		    array_push($allcats, $catid);
		}
		array_pop($allcats);
		$allcats = array_reverse($allcats);
	?>
    <?php foreach($allcats as $catid): ?>
    <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catid); ?>" itemprop="url"> <span itemprop="title"><?php echo get_cat_name($catid); ?></span> </a> > </div>
    <?php endforeach; ?>
  </div>
</div>
<?php endif; ?>
<!-- パンくず ed 記事 -->
<!-- パンくず st カテゴリ -->
<?php if(is_category()){ ?>
		<?php
			$catentry = get_category(get_query_var('cat'),false);
			$cat_slug = $catentry->slug; //ページのカテゴリースラッグ
			$cat_name = $catentry->name; //ページのカテゴリー名
			$cat_parentID = $catentry->parent; //ページの親カテゴリーID
			$cat_ID = $catentry->cat_ID; //ページのカテゴリーID
			
			if($cat_parentID){
				$parent_cat = get_category($cat_parentID);
			}
		?>
<div class="breadcrumb-area">
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div>
<?php if($cat_parentID){ ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($parent_cat->cat_ID); ?>" itemprop="url"> <span itemprop="title"><?php echo $parent_cat->name;?></span> </a> > </div>
<?php }?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_category_link($catentry->cat_ID); ?>" itemprop="url"> <span itemprop="title"><?php echo $cat_name;?></span> </a> > </div>
</div>
</div>
<?php } ?>
<!-- パンくず ed カテゴリ -->
<!-- パンくず st 年月 -->
<?php if(is_date()){ ?>
<div class="breadcrumb-area">
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_year_link( get_the_time('Y') ); ?>" itemprop="url"> <span itemprop="title"><?php echo get_the_time('Y')?>年</span> </a> > </div>
<?php if(is_month()){ ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo get_year_link( get_the_time('m') ); ?>" itemprop="url"> <span itemprop="title"><?php echo get_the_time('m')?>月</span> </a> > </div>
<?php }?>
</div>
</div>
<?php } ?>
<!-- パンくず ed 年月 -->
<!-- パンくず st タグ -->
<?php if(is_tag()){ ?>
		<?php
            $term_id = get_query_var('tag_id');
            $taxonomy = 'post_tag';
            $args ='include=' . $term_id;
            $terms = get_terms( $taxonomy, $args );
		?>
<div class="breadcrumb-area">
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php echo home_url(); ?>" itemprop="url"> <span itemprop="title">ホーム</span> </a> > </div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="<?php  echo esc_url(get_tag_link($terms[0]->term_id)); ?>" itemprop="url"> <span itemprop="title"><?php echo $terms[0]->name; ?></span> </a> > </div>
</div>
</div>
<?php } ?>
<!-- パンくず ed タグ -->
上記を「breadcrumb.php」という名前で保存してください。保存先は、テーマファイルと同一フォルダです。

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

パンくずリストを表示したいところで、上記のようなコードを配置してください。
breadcrumb.phpの中で、記事ページなのかカテゴリーページなのかを判断して表示するので、そのあたりは気にする必要がありません。

自分用に作成したので、
カテゴリーが階層になっているパターンには対応していません。
親子関係のあるカテゴリー2階層と、1階層のカテゴリーの場合しか対応していませんので、問題ある人はそのあたりのコードを書き換えて使ってください。

サンプルは検索を書ければ、日本語でも英語でもたくさん出てくるかと思います。

補足

記事:is_single()
カテゴリ:is_category()
年月:is_date()
タグ:is_tag()

if文で上記を使用して条件わけをしているので1か所で全て書くことが可能になっています。便利な方法なので使ってみてくださいね。

あと「get_template_part()」というWP標準関数が便利で、
get_template_part('breadcrumb')としていすると、breadcrumb.phpというテンプレートファイルをよんでその場所に挿入してくれます。

子テーマにもたいおうしていて、子テーマの場合は、子テーマのbreadcrumb.php->親テーマのbreadcrumb.phpという感じでさがして、最初に見つかったファイルが採用されます。

Wordpressのテンプレートを作成したい人にとってはかなり便利な関数だと思います。

参考:
[Я]パンくずリストをGoogle検索結果にも表示・反映させる方法 : りくまろぐ
WordPress custom breadcrumbs without plugin - Quality Tuts - Quality Tuts
WordPress: Creating Breadcrumbs without a Plugin | Articles | The Web Taylor

スタイルシート

.breadcrumb-area {
	font-size: 13px;
	padding-bottom: 0px;
}
.breadcrumb-area  a {
	color: #666;
	text-decoration: none;
}
div#breadcrumb div {
	display: inline;
}

CSSはこんな感じです。
スポンサーリンク