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 3.8のアップデートで管理画面のアイコン画像が上手く表示されない時の対処方法

    先程、WordPress 3.8にアップデートしたら管理画面の上部バー…

  2. WordPress

    予約投稿をカレンダーで一覧管理できるWordPressプラグインEditorial Calendar…

    こちらの記事を見て予約投稿っていいなぁって思ったので初めて使ってみまし…

  3. WordPress

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

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

  4. Monsterrat

    WordPress

    ミニマルなポートフォリオに最適なWordPressテーマ「Monsterrat」

    ミニマルなデザインのポートフォリオを作りたい時に最適なWordPres…

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

    WordPress

    WordPressでランダム記事の一覧をプラグインを使わないで表示させるやり方

    先日、WordPressで最新記事の一覧をプラグインを使わないで表示さ…

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP