HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

WordPressでパンくずリストを設置するコード・プラグインまとめ

2018-02-18_1000-wordpress
パンくずリストは、ユーザビリティーにも、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】をクリックすると以下の画面になります。
2014-10-25_1058

Enable Breadcrumbsにチェックを入れて、Taxonomy to show in breadcrumbs forで【カテゴリー】を選択します。

その後一番下までスクロールして【変更を保存】の青いボタンを押せば管理画面での設定は完了です。

テーマにコードをコピペ

次にテーマを弄ります。と言ってもコードをコピペするだけ。

さきほど押した青い【変更を保存】ボタンのすぐ上にある以下の部分から赤枠内のコードをコピー。
2014-10-25_1104

そしてテーマの中でパンくずを表示させたい部分にペーストします。

私の場合は、Twenty twelveテーマを使っているテストサイト(正確にはその子テーマを使っているサイト)で、カテゴリページと個別記事ページのタイトル直前にパンくずを表示させたかったので、categry.php、single.phpの<div id="content" role="main">の直後に貼り付けました。

すると、個別記事ページとカテゴリページで次のようにパンくずリストが表示されました。

single.php
2014-10-25_1156_001_001

category.php
2014-10-25_1158

スタイル調整も簡単

これでは、ページのタイトルとパンくずリストが近づきすぎなので、パンくずを囲む#breadcrumbsに次のようなスタイルをあてて間隔をあけました。

#breadcrumbs{
margin-bottom:15px;
}

single.php
2014-10-25_1210

category.php
2014-10-25_1210_001

cssさえ弄れれば見た目を整えるのも楽ですが、PHPコードを貼り付けるので、それなら自作コード設置のほうがいいと思います。

余談・パンくずは1ページに一つだけがいい

パンくずは閲覧者に対して、サイト内のどの位置にいるかという情報を提供するナビゲーションです。

二つ以上のカテゴリーに属する投稿について、パンくずリストも二つ以上作ると言う考えもあるようですが、個人的には賛成できません。

例えば、奈良市役所のサイトではパンくずリストが13個もあるページが存在する(3個まで減ったようです。)のですが、却って迷子になりそうです。

[img-link url=”http://www.city.nara.lg.jp/www/contents/1377734641681/index.html” title=”委任状 – 奈良市”]

13個もパンくずリストがあれば、いろんなページへの導線は確保されますが、選択肢が多すぎて迷います。

パンくずは1ページに一つだけにしておいたほうが閲覧者に優しいと思います。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: