microdataでHTML5のパンくずリストを作成

2014-02-06 2021-06-17

R-web

Googleの検索結果画面に表示されるパンくずリストに対応したいと思い、WordPressにmicrodataでマークアップしたHTML5のパンくずリストを作成してみました。
※参考・パンくずリスト（リッチスニペットと構造化マークアップ）（Googleヘルプ）
http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=185417
購入した書籍にやり方が掲載されていたのですが、何故か固定ページ（複数階層）には対応していなかったので、メモとして掲載。
パンくずを入れたい各テンプレートファイルの部分に以下を記載します。

まずは、single.phpには以下のように記載

<!-- パンくずリスト -->
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo home_url(); ?>" itemprop="url">
		<span itemprop="title">HOME</span>
	</a> &rsaquo;
</div>
<?php $postcat = get_the_category(); ?>
<?php $catid = $postcat[0]->cat_ID; ?>
<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> &rsaquo;
</div>
<div><?php the_title(); ?></div>
</div>

次にcategory.phpには以下を記載

<!-- パンくずリスト -->
<div id="breadcrumb">
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
	<a href="<?php echo home_url(); ?>" itemprop="url">
		<span itemprop="title">HOME</span>
	</a> &rsaquo;
</div>
<div><?php single_cat_title(); ?></div>
</div>
<!-- パンくずリスト ここまで-->

最後に固定ページpage.phpには以下を記載

固定ページで親子関係を作っていてもちゃんと表示されました！

<!-- パンくずリスト -->
<div id="breadcrumb">
<?php if(!is_home()){ ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php echo get_option('home');?>" itemprop="url" role="home"><span itemprop="title">HOME</span></a> ></div>
<?php foreach(array_reverse(get_post_ancestors($post->ID)) as $ancestorid){ ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php echo get_page_link($ancestorid);?>" title="<?php echo get_page($ancestorid)->post_title; ?>" itemprop="url"><span itemprop="title">
<?php echo get_page($ancestorid)->post_title; ?></span></a> ></div>
<?php } ?>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php echo get_permalink();?>" itemprop="url"><span itemprop="title"><?php echo the_title('','', FALSE)."";?></span></a></div>
<?php } ?>
</div>

<div id="breadcrumb">の部分はCSSで適当にレイアウトして下さい。今までプラグインを使っていたけど、これの方が良いかも・・・・

※参考CSS （適当に書き換えてください）

div #breadcrumb div{
	font-size: 80%;
	display: inline;
	margin-top: 30px;
}
div #breadcrumb div a{
	text-decoration: underline;
	color: #960;
}
div #breadcrumb div a:hover{
	text-decoration: none;
	color: #999;
}

納品時にお客様へ渡すマニュアル作成が面倒な方や、初めてWordPressでブログを書く方へ

【印刷用】WordPres 6.5 記事投稿図解マニュアル