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

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

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

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

スポンサーリンク

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

  1. プラグインで Breadcrumb NavXT を検索してインストール。
  2. プラグインの有効化。
  3. パンくずリストを出したい場所に(大体header.phpのメニュー下</nav>くらいかな?)下記のコードを挿入。

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

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

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

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

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

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

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

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

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

デモページ

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

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

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

シェアする