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

関連記事

  1. WordPressのプラグイン「Contact Form 7」で画像を…

  2. ロリポップで「不正なアクセスを検知いたしました」とメールが来てWord…

  3. スマートフォン(レスポンシブ)対応のGoogleMap

  4. WordPressのバックアップ

    WordPressを「BackWPup」プラグインで定期的にバックアッ…

  5. WordPress標準搭載のギャラリー機能でギャラリーを作成する

  6. Jetpack スライドショーの背景色を変更する

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. WordPressのバックアップ
  2. 女性起業家の方へ

アーカイブ

制作実績一覧

  1. 芦屋気功療法院
  2. ホメオスタジア 敏感肌・乾燥肌用クレンジング&洗願ジェル
  3. office-aki
  4. looplus 神戸の不動産買取・売却・リフォーム
  5. 12starz
  6. SOARist
  7. ダンスウェア ララック様
  8. デジタルイースト
  9. 西表島 シュノーケル・カヌーツアーcrossriver