WordPressで構築しているこのブログに、パンくずリストを設置してみました。せっかくですので、SEO対策を兼ねて構造化データに対応してみました。
以下のサイトをベースにしました。(ありがとうございました)
パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)
http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/
パンくずリスト – Gists
https://gist.github.com/wate/50a4186223f187128549
「functions.php」に以下の関数を追加します。
/** パンくずリスト ※SEO対策版(構造化データ対応) http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/ https://gist.github.com/wate/50a4186223f187128549 */ function breadcrumb($div_id='breadcrumb', $div_class='clearfix', $item_on=''){ global $post; $str =''; $b_scope = ' itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb"'; $b_url = ' itemprop="url"'; $b_title = ' itemprop="title"'; if($item_on=='no') { $b_scope = $b_url = $b_title = ''; } if(!is_admin()){ /* !is_admin は管理ページ以外という条件分岐 */ $tagAttribute = ($div_id) ? ' id="'.$div_id.'"' : ''; $tagAttribute .= ($div_class) ? ' class="'.$div_class.'"' : ''; $str.= '<div'. $tagAttribute .'>'; $str.= '<ul>'; $str.= '<li'.$b_scope.'><a href="'. home_url() .'/"'.$b_url.'><span'.$b_title.'>HOME</span></a></li>'; $str.= '<li>></li>'; if(is_home()) { //ホーム $str = strip_tags($str, "<div><ul><li><span>"); $str = str_replace("span","strong",$str); } elseif(is_category()) { //カテゴリーのアーカイブページ $cat = get_queried_object(); if($cat -> parent != 0){ $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' )); foreach($ancestors as $ancestor){ $str.='<li'.$b_scope.'><a href="'. get_category_link($ancestor) .'"'.$b_url.'><span'.$b_title.'>'. get_cat_name($ancestor) .'</span></a></li>'; $str.='<li>></li>'; } } $str.='<li><strong>'. $cat -> name . '</strong></li>'; } 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.='<li'.$b_scope.'><a href="'. get_category_link($ancestor).'"'.$b_url.'><span'.$b_title.'>'. get_cat_name($ancestor). '</span></a></li>'; $str.='<li>></li>'; } } $str.='<li'.$b_scope.'><a href="'. get_category_link($cat -> term_id). '"'.$b_url.'><span'.$b_title.'>'. $cat-> cat_name . '</span></a></li>'; $str.='<li>></li>'; $str.= '<li><strong>'. $post -> post_title .'</strong></li>'; } elseif(is_page()){ //固定ページ if($post -> post_parent != 0 ){ $ancestors = array_reverse(get_post_ancestors( $post->ID )); foreach($ancestors as $ancestor){ $str.='<li'.$b_scope.'><a href="'. get_permalink($ancestor).'"'.$b_url.'><span'.$b_title.'>'. get_the_title($ancestor) .'</span></a></li>'; $str.='<li>></li>'; } } $str.= '<li><strong>'. $post -> post_title .'</strong></li>'; } elseif(is_date()){ //日付ベースのアーカイブページ if(get_query_var('day') != 0){ //年別アーカイブ $str.='<li'.$b_scope.'><a href="'. get_year_link(get_query_var('year')). '"'.$b_url.'><span'.$b_title.'>' . get_query_var('year'). '年</span></a></li>'; $str.='<li>></li>'; $str.='<li'.$b_scope.'><a href="'. get_month_link(get_query_var('year'), get_query_var('monthnum')). '"'.$b_url.'><span'.$b_title.'>'. get_query_var('monthnum') .'月</span></a></li>'; $str.='<li>></li>'; $str.='<li><strong>'. get_query_var('day'). '日</strong></li>'; } elseif(get_query_var('monthnum') != 0){ //月別アーカイブ $str.='<li'.$b_scope.'><a href="'. get_year_link(get_query_var('year')) .'"'.$b_url.'><span'.$b_title.'>'. get_query_var('year') .'年</span></a></li>'; $str.='<li>></li>'; $str.='<li><strong>'. get_query_var('monthnum'). '月</strong></li>'; } else { //年別アーカイブ $str.='<li><strong>'. get_query_var('year') .'年</strong></li>'; } } elseif(is_search()) { //検索結果表示ページ $str.='<li><strong>「'. get_search_query() .'」で検索した結果</strong></li>'; } elseif(is_author()){ //投稿者のアーカイブページ $str .='<li><strong>投稿者 : '. get_the_author_meta('display_name', get_query_var('author')).'</strong></li>'; } elseif(is_tag()){ //タグのアーカイブページ $str.='<li><strong>タグ : '. single_tag_title( '' , false ). '</strong></li>'; } elseif(is_attachment()){ //添付ファイルページ $str.= '<li><strong>'. $post -> post_title .'</strong></li>'; } elseif(is_404()){ //404 Not Found ページ $str.='<li><strong>404 Not found</strong></li>'; } else{ //その他 $str.='<li><strong>'. wp_title('', true) .'</strong></li>'; } $str.='</ul>'; $str.='</div>'; } echo $str; }
スタイルシートに以下のコードを追加します。
.clearfix { padding: 3px 0px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .clearfix li { display:inline; padding: 1px; } .clearfix, .clearfix a { color: green; }
後は「header.php」等の好きな位置に、
<?php breadcrumb(); ?>
を追加すれば完成。
【追記開始】2014/03/03
「header.php」等の好きな位置に、
<?php breadcrumb('breadcrumb_non', 'clearfix', 'no'); ?>
を追加すると、「itemscope」「itemtype」等の構造化データ用タグが付いていないパンくずリストを設置することができます。
【追記終了】2014/03/03
と言っても、自分がやったことは、「itemscope」「itemtype」等の構造化データ用タグの埋め込みに過ぎません。ですが、この一手間をかけることにより、検索エンジンに構造化データとして認識させることができるので、効果的なSEO対策となります。
なお、ウエブマスターツールの「構造化データ テスト ツール」で、構造化データに対応したか否かが確認できます。
ところで、最近になってブログのSEO対策を開始しました。記事タイトルやサイト説明文、カテゴリー名などを、検索エンジン向けに最適化する作業です。その一環として、今回のパンくずリスト導入があります。
この先、「アフィリエイト収入」(現在:圏外)や「アフィリエイト収入 公開」(現在:40位)というキーワードで、どこまで順位が上昇するのか楽しみです。
【追記】2014/02/14
ウエブマスターツールの「検索のデータ」→「構造化データ」でエラーが出るので、「functions.php」に以下のコードを追記して応急処置しました。
/** 構造化データ updated エラー対策 http://it.trend-ai.com/?p=11931 */ function remove_hentry( $classes ) { $classes = array_diff($classes, array('hentry')); return $classes; } add_filter('post_class', 'remove_hentry');
ウェブマスターツールの構造化データ(hentry)のエラー対策を参考にしました。ありがとうございました。
【追記】2014/03/07
先ほどGoogleで検索順位を確認したところ、「アフィリエイト収入」が42位(2014/02/10では圏外)、「アフィリエイト収入 公開」が2位(2014/02/10では40位)でした。大幅にランクアップしていたので結構嬉しかったりします。
そろそろカテゴリーページのdescription最適化に取り組みたいな。