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

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

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

目次

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

  1. プラグインで Breadcrumb NavXT を検索してインストール。
  2. プラグインの有効化。
  3. パンくずリストを出したい場所に(大体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で装飾したパンくずリストが完成です!

参考にさせて頂いたサイト

WordPress Snippet | パンくずリストの使い方 Breadcrumb NavXT
CSS3 breadcrumbs

設定周りで悩んだら、お気軽にご相談ください。
問合せの際は「web担当者を見た」とお伝えください。

この記事を書いた人

デジタルマーケティングに16年間従事しているMITSUIです。Google AnalyticsとGoogle Tag Managerが大好きで、これらのツールを活用した情報提供を行っています。ブログではデジタルマーケティングに関する情報や最新のトレンド、ベストプラクティスを紹介しています。

コメント

コメントする

CAPTCHA


目次