記事の現在地を示すパンくずリストを出す方法はいろいろあります。
所在ページごとに条件分けした厳密なコードで表示させてるサイトも見かけますが、うちの場合は実際に押されてる形跡がほとんどないので WordPressのテンプレートタグを呼び出しただけのお手軽コードで済ませています。
WordPressの get_category_parents() を使うとカテゴリベースのパンくずリストが2～3行で書けますね。
それに加えてGoogleのリッチスニペットに対応させるのも流行ってるということで、この一番シンプルなパンくずリストをちょっとだけ書き換えて microdata 対応にしてみました。
get_category_parentsを使ったパンくずリスト
ホーム ＞ 親カテゴリ ＞ 子カテゴリ
…というシンプルなパンくずリストをお手軽に実現するのが下記のコードです。
【single.php】
<?php $cat = get_the_category(); ?>
<a href="<?php echo home_url().'/'; ?>" title="<?php bloginfo('name'); ?>">home</a> ＞
<?php echo get_category_parents($cat[0]->term_id, TRUE, ' ＞ '); ?>
現在のカテゴリから上を表示したいときは get_category_parents お任せで簡単にできます。複雑なことをしているとエラーになるかも知れませんが、単純に single.php から呼び出す分には大変有り難いテンプレートタグです。
交ぜ書きが嫌いな方はこちらをどうぞ。
【single.php】
<?php
$cat = get_the_category();
echo '<a href="'. home_url() .'/" title="'. get_bloginfo('name', 'raw') .'">home</a> ＞'. get_category_parents($cat[0]->term_id, TRUE, ' ＞ ');
?>
これをGoogleの検索結果に反映させるには、さらにリッチスニペット対応すればいいことになります。
パンくずリストにmicrodata形式で階層構造を与える
パンくずリストのリッチスニペットについてはGoogleの開発情報を見に行くと色々書いてあります。
クローラーにHTML構造を伝えるためには一定の書式にしたがってマークアップする必要があります。その書式の一つが microdata 形式で、クローラーに正しく構造が伝わると検索結果にカテゴリ名が表示されるようになります。
Breadcrumbs – Google Developers
microdata形式によるマークアップ例
Googleが示す microdata形式に従うと、求められてる形はこんな感じになるでしょう。
【HTML】
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/" itemprop="url"><span itemprop="title">親階層</span></a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/category" itemprop="url"><span itemprop="title">カテゴリ</span></a> ›
</div>
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="http://www.example.com/category/sub-category" itemprop="url"><span itemprop="title">サブカテゴリ</span></a>
</div>
ちなみに「パンくずリスト」の語源(?)はヘンゼルとグレーテルですけど、階層構造が深いサイトの場合は見通しの良さより魔宮感が出ますよね。
|
ヘンゼルとグレーテル おそろし森の魔女 |
リッチスニペット対応のパンくずリストを作る
…ということで、先ほどの get_category_parents() によるコードをGoogleクローラーが理解出来る形に整えます。
get_category_parents()で実装するときの問題点
ただし最初の出力に microdata の記述を盛れば完了…とならないところが get_category_parents() を使う場合の面倒なところです。
get_category_parents() で表示するパンくずリストはとても手軽なんですけど、配列で格納されずリンクつきの完パケで出てくるんです。つまり後から手を加えるのが少し面倒くさい。
しかしせっかくここまで出来ているのだからどうにかなって欲しい…というか、します！( ・`д・´)
str_replace()で最終出力の直前に書き換えてしまいましょう。
WordPress4系統用パンくずリスト
【本章追記：2014/09/10】WordPress4.0から get_category_parents() の出力仕様が変わったようなのでコードを書き直しました。
【single.php】
<ol class="breadcrumb">
<?php $cat = get_the_category(); ?>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>/" title="<?php bloginfo('name'); ?>" itemprop="url"><span itemprop="title">home</span></a>
</li>
<?php
$string = get_category_parents($cat[0]->term_id, true, '</span></li>');
$stringBefore = array('<a href=', '/">');
$stringAfter = array('<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href=', '/" itemprop="url"><span itemprop="title">');
echo str_replace( $stringBefore, $stringAfter, $string );
?>
</ol>
category-template.php や WordPressのチェンジログをざっと見に行ったのですが、この件について言及されてなくない？
ちなみに、このコードがうまく動かないというコメントを頂いて仕様変更を知ったんですけど、前にコメント欄を改造したときにエンバグしててDBのテーブルが狂っちゃいました。申し訳ない…。
ご報告ありがとうございました。
WordPress3系統用パンくずリスト
【single.php】
<ol class="breadcrumb">
<?php $cat = get_the_category(); ?>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="<?php echo home_url(); ?>/" title="<?php bloginfo('name'); ?>" itemprop="url"><span itemprop="title">home</span></a>
</li>
<?php
$string = get_category_parents($cat[0]->term_id, true, '</span></li>');
$stringBefore = array('<a href=', 'すべて表示">');
$stringAfter = array('<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href=', 'すべて表示" itemprop="url"><span itemprop="title">');
echo str_replace( $stringBefore, $stringAfter, $string );
?>
</ol>
文字列置換の str_replace() が複数の領域を持てるので割とあっさりいけました。仕上げに区切り線と細かい表示をCSSで整えます。
【CSS】
.breadcrumb{
margin: 0;
padding-left: 1em;
list-style: none;
overflow : hidden;
}
.breadcrumb li{
margin-right: .4em;
float: left;
}
.breadcrumb li:after { content: " ＞ "; }
これで検索結果にカテゴリ名が認識されますね。
ちょっと強引ですけど get_category_parents派(?)の方はお試し下さいませ～。
それではまた！(・∀・)
|
PHP逆引きレシピ第2版(PROGRAMMER’S RECiPE) [ 鈴木憲治 ]【楽天】 / 【Amazon】
テンプレートタグだけだとあとちょっとで届かないときに。 |
コメントをどうぞ(´ω｀*)