WordPressにシンプルなパンくずリストを追加するプラグイン

SEOのためにもパンくずリストがあったほうがいいと言われGoogleのクローラーも巡回しやすくなるという利点があるので入れない手はありません

そこで飾り気のないシンプルなパンくずリストを追加できるプラグインをご紹介、シンプルと言っても細かく設定することができるのでオススメ!

スポンサーリンク

プラグイン

プラグイン名:Breadcrumb NavXT

設置

設置方法は下記コードを表示したい部分に記述・・・コピペするだけで表示が可能

<div class="breadcrumbs">
 <?php if(function_exists('bcn_display'))
 {
 bcn_display();
 }?>
</div>

記述する場所はheader.phpやsingle.phpなどに記述するのが一般的です。

中央よせしてあるテンプレートなどの場合は単純に記述してしまうとその部分のみ左寄せになってしまうなどがあるので、中央寄せしてある要素の中に記述するようにしましょう。

表示カスタマイズ

PCとスマートフォンの表示を分けて指定する場合は wp_is_mobile() を使用するか

@media screenを使用してcssで画面幅を判断して表示するようにすると見やすくなります

記述例

wp_is_mobileの場合

上記コードの代わりにphpへ直接記述

<?php if (wp_is_mobile()) :?>

<!--ここにスマートフォン-->
<div class="breadcrumbs_sm">
 <?php if(function_exists('bcn_display'))
 {
 bcn_display();
 }?>
</div>

<?php else: ?>

<!--ここにPC-->
 <div class="breadcrumbs_pc">
 <?php if(function_exists('bcn_display'))
 {
 bcn_display();
 }?>
</div>

<?php endif; ?>

CSSはbreadcrumbs_smbreadcrumbs_pcで指定します

@media screenの場合

こちらはCSSに記述して判断します

@media screen and (max-width: 400px) {
breadcrumbs{
 /*ここにスマートフォンのCSS*/
 }
}

PC表示のCSSは

breadcrumbs{

 }

のみで指定できます

 

ここまでで設置は完了ですあとの細かい設定は各自違うと思うでここまでにしておきます

これを書いている時点では設定項目(わたしの環境では)が翻訳されているのでいじり倒してみてはいかがでしょうか

コメント