WordPressでmicrodataを使ったパンくずリスト

WordPress

WordPressでパンくずリストをmicrodataを使ってマークアップするやり方

そういえばこのサイトではまだパンくずリストを作成していなかったので今回新たに作ってみました。パンくずリストを作成することでGoogleの検索結果にも表示されるので、Webサイトを運営している人は作っておいて損はなさそうですね。

[ads_center]

リッチ スニペット

今までパンくずリストをしっかり作ったことがなかったので、どういう風にHTMLをマークアップしていけばいいのかわからなかったので少し調べてみました。

というのも、パンくずリストをただ作っても検索結果に表示されない場合があるみたいだからです。で、これについてはGoogleのウェブマスターツールのページで推奨されるやり方が書いてあったので、今回はこれに従って作っていくことにしました。

  • microdata
  • microformats
  • RDFa

上記の中で、Google推奨になっているものが「microdata」です。

リッチ スニペットと構造化データについて – ウェブマスター ツール ヘルプ

プラグインなしで作成

WordPressには便利なプラグインがあり、パンくずリストを表示させるプラグインもあるんですが、今回はプラグインを使わないで作成してみることにします。

まず、microdataを使った基本的なマークアップについてです。以下のようなパンくずリストを表示させたいとします。

ホーム >Web制作 >JavaScript

この場合、microdataを使用すると以下のようなマークアップになります。

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="○○○" itemprop="url">
        <span itemprop="title">ホーム</span>
    </a> &gt;
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="○○○" itemprop="url">
        <span itemprop="title">Web制作</span>
    </a> &gt;
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="○○○" itemprop="url">
        <span itemprop="title">JavaScript</span>
    </a>
</div>

href属性には各ページURLを入れて下さい。

  • divに囲まれたHTMLはパンくずであることを示す
  • itemscopeはdivのコンテンツがアイテムであることを示す
  • itemtypeはアイテムがパンくずであることを示す
  • itempropはアイテムのプロパティ(タイトル・URL)

これらを出力させるために、functions.phpにコードを記述していきます。

  • category.php
  • single.php
  • page.php
// パンくずリスト
function breadcrumb(){
	global $post;
	$str ='';
	if(!is_home()&&!is_admin()){
		$str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
		$str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> &gt;</div>';

		if(is_category()) {
			$cat = get_queried_object();
			if($cat -> parent != 0){
				$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
				foreach($ancestors as $ancestor){
					$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt;</div>';
				}
			}
		$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
		} elseif(is_page()){
			if($post -> post_parent != 0 ){
				$ancestors = array_reverse(get_post_ancestors( $post->ID ));
				foreach($ancestors as $ancestor){
					$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></div>';
				}
			}
		} elseif(is_single()){
			$categories = get_the_category($post->ID);
			$cat = $categories[0];
			if($cat -> parent != 0){
				$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
				foreach($ancestors as $ancestor){
					$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> &gt;</div>';
				}
			}
			$str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
		} else{
			$str.='<div>'. wp_title('', false) .'</div>';
		}
		$str.='</div>';
	}
	echo $str;
}

※実際に試す場合は、まずローカル環境でちゃんと出力されるかどうかを確認することをオススメします。

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)

そして表示させたい場所に関数を貼り付けます。

<?php breadcrumb(); ?>

これで、microdataでマークアップされたパンくずリストを出力させることができます。

構造化データをテストしてみる

最後に、テストツールを使ってパンくずリストを構造化したデータがGoogleにちゃんと読み取られるかどうかをテストします。ここでしっかりと認識させることができれば、とりあえずは完了です。

Google Structured Data Testing Tool

こんな感じで試したいURLを入力してプレビューを押します。

構造化データをテスト

試しに当サイトの記事ページを確認してみると、このようにちゃんと認識されていました。

構造化データを認識

これでひとまずは安心ですね。パンくずリストを作ってからどのくらいで検索結果に反映されるか分かりませんが、とりあえずはこれで気長に待ってみようかと思います。

リッチ スニペット – パンくずリスト – ウェブマスター ツール ヘルプ

また、microdataを使って作成したからといって検索結果の順位に影響があるということはないので、変に期待しない方がいいです。これについては最初に紹介したリンク先「リッチ スニペットと構造化データについて」に載っています。

リッチ スニペット用にデータをマークアップしても、検索結果でのページの掲載順位は変わりません。また、マークアップが必ず使用されるとは限りません。

ただ、どんなカテゴリー階層に入っているページなのかが分かりやすく表示されるので、ユーザーに選ばれやすくなるという傾向は少なからずあるんじゃないかなーと思っています。

WebデザインのためCSSエフェクトを実装できる5つのライブラリ前のページ

ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」次のページShine

関連記事

  1. WordPressのログイン時のツールバー

    WordPress

    WordPressで投稿スラッグを指定して特定の記事だけを表示させる関数を作ってみた

    意外と使う機会があるのでメモがてらご紹介します。WordPressで特…

  2. WordPressのログイン時のツールバー

    WordPress

    WordPressでアイキャッチ画像のサイズによって出力を振り分ける条件分岐のやり方

    WordPressでアイキャッチ画像をサイズ別で出力を振り分ける条件分…

  3. WordPress

    WordPressでマルチサイト化した時にアイキャッチ画像の設定が表示されない

    ローカル環境でWordPressをマルチサイト化してみたところダッシュ…

  4. WordPressで投稿IDを指定した記事をランダム表示

    WordPress

    WordPressで複数の投稿ID(記事ID)を指定した記事をランダムで表示させるやり方

    個人的にやってみたかったので備忘録。WordPressで自分が作った関…

  5. Last Updated Shortcode

    WordPress

    最後に更新された日付時間をショートコードで表示できるWordPressプラグイン「Last Upda…

    WordPressの記事内に最後に更新した日付時間を表示できるWord…

  6. WordPress

    WordPressでグーグルアナリティクスをフッターにadd_actionを使って表示させる

    WordPressにはadd_actionという便利な関数があります。…

最近の記事

  1. TR153
  2. cheero Flat 10000mAh with Power Delivery 18W CHE-112
  3. SV-S251
  4. スラウェシ トラジャ

アーカイブ

PAGE TOP