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

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;
}

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

印刷用 WordPressマニュアル

初めてWordPressを使う方もこのマニュアルでブロックエディターの基本的な使い方が分かるように、必要な部分だけを濃縮してまとめました!
WordPressのブログ投稿の基本からちょっとした応用編まで。

私が納品時にお客様へお渡ししているものなので、個人でブログを書いている方はもちろん、制作会社様はフリーランスでWEB制作をされている方はお客様へお渡しいただいても大丈夫です!