【wordpress】パンくずリスト表示にオススメなプラグインはコレ！【Breadcrumb NavXT】

パンくずリストの設置は必須。視覚的にユーザーが現在地を把握してもらうように！

ワードプレスでブログやウェブサイトを作成する際に「パンくずリスト」は必ずいれたいですよね…。
かくいう、このサイトもワードプレスで作っています！

HOME　＞　カテゴリー　＞　読んでる記事のタイトル

こんな感じで、ページの上部や下部に設置してあるリストの事です。現在いるページより上部の階層はテキストリンクになっていて、この例ですと、カテゴリー一覧やトップページ(HOME)へのリンクになっています。

SEO的に効果があるようですし、視覚的に今サイトのどの位置にいるのか読者(ユーザー)が把握できますし…。

パンくずリスト設置はプラグインを使うことにする

一応、ウェブ制作会社に勤めているので、プラグインに頼らずに自力でコードを描きたいな…。って感じで、ワードプレスだと、function.phpにちょちょっとコードを書けばすぐ出来るだろ…と思ったら、調べてみると、結構面倒くさい。

プラグインを入れすぎるとサイトが重くなっちゃうのが嫌だな…、という懸念もありますけど、ここはすんなり妥協して、パンくずリストくらいは、プラグインで設置してもいいかな…。

という事で、利用したプラグインが下記です。

Breadcrumb NavXT

だいたい、他の備忘録サイトやまとめサイトなどで紹介されているのがBreadcrumb NavXTです。
実際使ってみても、カスタムもある程度自由にできますし、オススメです。

まずはプラグイン画面からインストールする

ワードプレスの管理画面、プラグインページ「新規追加」から、プラグイン検索窓に「Breadcrumb NavXT」を入力。インストール完了後に有効化する。

「有効化」したら、パンくずリストを表示したい箇所に下記のコードを記述。

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

基本的には、

1. single.php
2. page.php
3. archive.php

くらいですかね？
当サイトの場合は、カスタム投稿タイプやタクソノミーページもあるので、そちらのテンプレにも挿入しています。

サイトの構造によっては、header.phpやfooter.phpに入れるだけで大丈夫な場合もあるかと思います。

テンプレートにコードを挿入して、表示するとこんな感じ…。

①サイトタイトル
②カテゴリー名
③記事タイトル(現在地)

となります。

ほんの少しだけ、CSSでスタイルを指定してみる。

適用スタイル
.breadcrumbs{
width: 100%;
margin: 0 0 1.0rem;
font-size: 0.9rem;
padding: 0.4rem 0.6rem;
box-sizing: border-box;
background-color: darkgray;
color: #FFFFFF;
}
.breadcrumbs a{
color: #FFFFFF;
text-decoration: underline;
}

本当にほんの少しだけですが、今回はこんな感じで。
Breadcrumb NavXTのカスタマイズ方法はまた次の機会に。

参考にしたサイト

Breadcrumb NavXT