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標準搭載のギャラリー機能でギャラリーを作成する

  2. JetPack タイルギャラリーの使い方

  3. WordPressのバックアップ

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

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

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

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

コメント

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

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

CAPTCHA


最近の記事

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

アーカイブ

制作実績一覧

  1. looplus 神戸の不動産買取・売却・リフォーム
  2. 12starz
  3. SOARist
  4. ダンスウェア ララック様
  5. デジタルイースト
  6. 西表島 シュノーケル・カヌーツアーcrossriver
  7. ハミング
  8. hearty
  9. An Rire