パンくずリストは、ユーザビリティーにも、SEOにも欠かせないものです。WordPressではプラグインを利用してパンくずを入れることも出来ますが、簡単なコードをコピペして設置するのがオススメです。
パンくずリスト設置用コード
パンくずリストのコードは色んな方が公開していますが、どうせなら、Googleさん推奨の仕様「リッチ スニペット – パンくずリスト」に則ったものがいいです。
私の使っているコードは以下の通りです。
タイトルの直ぐ上に設置する前提になっているため、そのページのタイトルを省いています。
single.phpやcategory.phpのタイトル直前に設置してください。
phpコード
<ul class="pankuzu">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php bloginfo('url'); ?>/">TOP</a></li>
<?php
if(is_single){$cates = get_the_category(); $cat = $cates[0];$the_cate=$cat->cat_ID;}
else if(is_category()){$the_cate=get_query_var('cat');}
$ancestors=get_ancestors($the_cate, 'category' );
$kosu=count($ancestors);
for ($i = 1; $i <= $kosu; $i++)
{
?>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php echo get_category_link($ancestors[$kosu-$i]); ?>"><?php echo get_cat_name($ancestors[$kosu-$i]); ?></a></li>
<?php
}
if(is_single())
{
?>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="<?php echo get_category_link($the_cate); ?>"><?php echo get_cat_name($the_cate); ?></a></li>
<?php
}
?>
</ul>
CSS
.pankuzu {
list-style-type:none;
}
.pankuzu li {
display:inline;
}
.pankuzu li:after {
content:"\0020\00bb\0020";
}
パンくずリスト設置プラグインではBreadcrumb NavXTがイチオシ
これはもう「Breadcrumb NavXT」プラグインがダントツで使いやすいです。
[img-link url=”http://www.adminweb.jp/wordpress-plugin/list/index16.html” title=”Breadcrumb NavXTプラグイン(パンくずリストの表示) – WordPressプラグインの一覧”]
ただ、パンくずは、プラグインが無くても装備可能なので、やはりコードコピペで設置するのが望ましいです。
WordPress SEO by yoastでもパンくずリスト設置可能
SEOプラグインWordPress SEO by yoastも、パンくずリストがとても簡単に設定できます。
インストールと設定
まずはWordPress管理画面左サイドバー【プラグイン】⇒【新規追加】からWordPress SEO by yoastをインストールします。
管理画面左サイドバーの【設定】の下に【SEO】という項目が現れるのでクリック。さらにその下に現れる【Internal link】をクリックすると以下の画面になります。
Enable Breadcrumbsにチェックを入れて、Taxonomy to show in breadcrumbs forで【カテゴリー】を選択します。
その後一番下までスクロールして【変更を保存】の青いボタンを押せば管理画面での設定は完了です。
テーマにコードをコピペ
次にテーマを弄ります。と言ってもコードをコピペするだけ。
さきほど押した青い【変更を保存】ボタンのすぐ上にある以下の部分から赤枠内のコードをコピー。
そしてテーマの中でパンくずを表示させたい部分にペーストします。
私の場合は、Twenty twelveテーマを使っているテストサイト(正確にはその子テーマを使っているサイト)で、カテゴリページと個別記事ページのタイトル直前にパンくずを表示させたかったので、categry.php、single.phpの<div id="content" role="main">
の直後に貼り付けました。
すると、個別記事ページとカテゴリページで次のようにパンくずリストが表示されました。
single.php
category.php
スタイル調整も簡単
これでは、ページのタイトルとパンくずリストが近づきすぎなので、パンくずを囲む#breadcrumbsに次のようなスタイルをあてて間隔をあけました。
#breadcrumbs{
margin-bottom:15px;
}
single.php
category.php
cssさえ弄れれば見た目を整えるのも楽ですが、PHPコードを貼り付けるので、それなら自作コード設置のほうがいいと思います。
余談・パンくずは1ページに一つだけがいい
パンくずは閲覧者に対して、サイト内のどの位置にいるかという情報を提供するナビゲーションです。
二つ以上のカテゴリーに属する投稿について、パンくずリストも二つ以上作ると言う考えもあるようですが、個人的には賛成できません。
例えば、奈良市役所のサイトではパンくずリストが13個もあるページが存在する(3個まで減ったようです。)のですが、却って迷子になりそうです。
[img-link url=”http://www.city.nara.lg.jp/www/contents/1377734641681/index.html” title=”委任状 – 奈良市”]
13個もパンくずリストがあれば、いろんなページへの導線は確保されますが、選択肢が多すぎて迷います。
パンくずは1ページに一つだけにしておいたほうが閲覧者に優しいと思います。