PR

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{

 }

のみで指定できます

 

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

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

コメント

【DaVinci Resolve】Speed Editorが「DaVinci Control Panels」には認識されるけどダヴィンチリゾルブ側で認識されない場合の対処方法!
アドセンスのお支払い情報画面に「お支払いが遅れることなく、税金の源泉徴収も適切に行われるようにするために、できる限り早急にシンガポールの税務情報をご提出ください。」と表示された?!(対処方法)
auスマホ・タブレットのSIMロックを無料で解除する方法(auスマホで格安MVMO SIMが使えるようになる!)
Windows11で高速スタートアップを無効にする方法(稀にハードウエア不具合を招くことも!?)
DaVinci Resolveの課金有料版「DaVinci Resolve Studio」をポイントも合わせてなるべくお得に購入する方法(実際に買ってみた)
【ライティング】キーボードなどのライティング設定を邪魔してくるWindws機能「動的ライティング」の切り方(無効にする方法)
【100均】ペン型セラミックカッターが便利すぎるのに100円で買える!?
【AI】初めてChatGPTに登録して聞いてみた(AI初体験)
入院時の暇つぶし最強アイテムは家でも使っているアレ!
容量は増えていくけどたまに必要になる中容量のSDカード(32GB)を購入したのでベンチマークしてみた
2024年10月
 123456
78910111213
14151617181920
21222324252627
28293031  
タイトルとURLをコピーしました