WordPressのパンくずをカスタマイズする

2012.6.10

WordPressのパンくずは、プラグインを使ってやることが多いと思いますが、SEOを考慮したサイトのパンくずのhtmlソースを見た時に独特な方法だったため、プラグインでは実装できそうにありませんでした。どうにかして再現できないかと試行錯誤して作ってみたので、そのコードをメモ。

hタグの使い方

hタグはSEO的に重要だと言われているのはみなさんご存じだと思います。
SEOで有名な「パシのWP SEOブログ | WP SEOブログ」さんのソースコードを拝見させていただくと、以下のような作りになっていました。

• h1タグはパンくずの最後の項目に対して記述している。
• ブログのロゴはpタグなどを使用。ページによってタグを付け替えたりしていない。
• h2は常に記事タイトルに記述している。（アーカイブ、シングル共に）
  つまり、h1とh2は同じ内容が記述されている。
• h3〜h6は記事本文内で使う小見出しに使用されている。
• サイドメニューの見出しはh3で記述している。

私自身SEOは詳しくありませんが、SEO専門の方が行っている作りを真似しておくのが無難かなと思うんですｗ

ただこれらのルールを適用しようと思うと、パンくず部分がプラグインでは実装が難しくなります。そのため、すべて自分で実装する形をとりました。

確認環境

• WordPress3.1.3

コードの使い方

functions.phpに以下のコードを記述します。

%s'."n",home_url(), 'ホーム');
    if( is_home() || is_front_page() ){
        $html .= sprintf('
%s
'."n",get_bloginfo('name'));
    }elseif( is_page() ){
        $html .= sprintf('
%s
'."n",the_title('','',false));
    }elseif( is_category() ){
        $html .= sprintf('
%s
'."n",single_cat_title('',false));
    }elseif( is_tag() ){
        $html .= sprintf('
%s
'."n",single_tag_title('',false));
    }elseif( is_year() ){
        $html .= sprintf('
%s
'."n",get_the_time('Y年').' のアーカイブ');
    }elseif( is_month() ){
        $html .= sprintf('
%s
'."n",get_the_time('Y年n月').' のアーカイブ');
    }elseif( is_day() ){
        $html .= sprintf('
%s
'."n",get_the_time('Y年n月d日').' のアーカイブ');
    }elseif( is_search() ){
        $html .= sprintf('
%s
'."n",get_search_query().' の検索結果');
    }elseif( is_single() ){
        $c = get_the_category();
        $html .= sprintf('
%s
'."n".'
%s
'."n",get_category_link( $c[0]->term_id ), $c[0]->name, the_title('','',false) );
    }
    $html = sprintf('
'."n".'%s
', $html);
    echo $html;
}//end_function
?>

パンくずを記述

パンくずを表示したい箇所に以下のコードを記述します。あとはお好みでCSSを適用してください。