【超簡単】ワードプレスにCSSで装飾したパンくずリストを付ける方法　Breadcrumb NavXT

2023年1月23日2023年4月7日

ワードプレスでサイトを作成している際に、パンくずリストをつけて欲しいと言われました。

めんどくさいから、いらないでしょ！、とも言ったのですが、どうしても付けろとのことなので、簡単に終わる方法で対応しました。

以下の3STEPで完了します。

プラグインで　Breadcrumb NavXT　を検索してインストール。
プラグインの有効化。
パンくずリストを出したい場所に（大体header.phpのメニュー下＜/nav＞くらいかな？）下記のコードを挿入。

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

これだけで、下記のような素敵なパンくずリストが出来上がります。

WEB担当者の備忘録 > wordpress > 【超簡単】ワードプレスにパンくずリストを付ける方法

ただ、このままだとhome画面にも、ホームのパンくずが表示されてしまいます。

めんどくさいけれど、homeの場合はパンくずを出さないように、少し調整します。

<?php//front以外のページにパンくず出すよ
if (function_exists('bcn_display') && !is_front_page()) {
  echo '<ul class="breadcrumbs">';
    bcn_display();
  echo '</ul>';
}
?>

ここまで、やればOKです！

と思ったのですが、担当者からもう少し装飾をしてほしいとのこと。

上記のコードだと、リスト形式ではないので装飾しやすいリスト形式で出力されるように下記にように調整します。bcn_display();　を　bcn_display_list();に変更。

<?php
if (function_exists('bcn_display') && !is_front_page()) {
  echo '<ul class="breadcrumbs">';
    bcn_display_list();
  echo '</ul>';
}
?>

これで、リスト形式で出力されます。

あとはCSSで装飾です。下記をstyle.cssに貼り付ければOKです。

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumbs{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

.breadcrumbs li{
  float: left;
}

.breadcrumbs a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

.breadcrumbs li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

.breadcrumbs a:hover{
  background: #fff;
}

.breadcrumbs a::after,
.breadcrumbs a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

.breadcrumbs a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

.breadcrumbs a::before{
  border-left-color: #ccc;  
  right: -1.1em;
  z-index: 1; 
}

.breadcrumbs a:hover::after{
  border-left-color: #fff;
}

.breadcrumbs .current_item,
.breadcrumbs .current_item:hover{
  font-weight: bold;
  background: none;
}

.breadcrumbs .current_item::after,
.breadcrumbs .current_item::before{
  content: normal;  
}

デモページ

これでCSSで装飾したパンくずリストが完成です！