【WordPressのサイト】Breadcrumb NavXTでパンくずリストを設定する方法

WordPressのサイトにパンくずリストを設定したい！

どうも、Linです。ミスター、クイックリー。

WordPressのサイトを作ると、どうしても、

パンくずリストというものを作りたくなると思います。

詳しくはこちらの神サイトを確認していただきたいのですが、パンくずリストを導入すると、

ユーザーが迷いにくくなる
SEO効果がある（構造化スニペットに対応した場合）

などのメリットがあるみたいです。

サルワカ | サルでも分かる図解説明マガジン

パンくずリストとは？作り方とCSSデザインサンプル12選

https://saruwakakun.com/html-css/basic/breadcrumb

ウェブサイトやブログに設置する「パンくずリスト」について解説します。パンくずリストとは？から始まり、設置のメリット、設置方法、CSSデザインサンプルなどまで詳しく紹介します。

今日は、ようやくワードプレスにパンくずリストを導入する方法をマスターしたので、忘れないうちにメモしておきます。

執筆にあたり、こちらのサイトを参考にさせていただきました。

www.adminweb.jp

Breadcrumb NavXTプラグイン(パンくずリストの表示) - WordPressプラグインの一覧

https://www.adminweb.jp/wordpress-plugin/list/index16.html

Login Security SolutionプラグインはWordPress管理画面へのログインに関するセキュリティ強化を行うプラグインです。WordPressに対してはブルートフォースアタック(総当たり攻撃)など不正ログインに関する被害が増えています。このプラグインを導入することで一定回...

USEFuL NOTES

Breadcrumb NavXTでパンくずリストを構造化マークアップする方法

https://www.useful-notes.com/wordpress/breadcrumb-navxtrich/

ブログやウェブサイトにおいてパンくずは重要な役割をもちます。ウェブサイトの階層構造を示しどこをどうやってたどっ…

WordPressのサイトにパンくずリストを設定する方法

今回は、初心者でも簡単にパンくずリストを導入できる、

Breadcrumb NavXT

というプラグインを使っていきます。

Step1. プラグインインストール

まずは「Breadcrumb NavXT」というプラグインをインストールしましょう。

プラグイン＞新規追加と進んで、「Breadcrumb NavXT」と検索し、

一番上のプラグインをダウンロード。

ついでに有効化にしちゃってください。

Step2. 設定

構造化スニペットに対応するようにBreadcrumb NavXTの設定をしていきます。

設定からBreadcrumb NavXTを選択。

こちらのサイトを参照にしながら、

USEFuL NOTES

Breadcrumb NavXTでパンくずリストを構造化マークアップする方法

https://www.useful-notes.com/wordpress/breadcrumb-navxtrich/

ブログやウェブサイトにおいてパンくずは重要な役割をもちます。ウェブサイトの階層構造を示しどこをどうやってたどっ…

ホームページテンプレート
ホームページテンプレート（リンクなし）
投稿テンプレート
投稿テンプレート（リンクなし）
ページテンプレート
ページテンプレート（リンクなし）
カテゴリーテンプレート
カテゴリーテンプレート（リンクなし）

を編集していきます。

Step3. パンくずリスト表示コード挿入

あとは、パンくずリストのコードを挿入するだけです。

たいていのサイトでは、記事タイトルの上にパンくずリストを設置していますね。

ってことで、ぼくもそのような流儀でパンくずリストを設定してみました。

header.phpを編集し、サイトのコンテンツの直前に、

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

<?php if(function_exists('bcn_display'))

{

bcn_display();

}?>

</ol>

というコードを挿入。

これで無事にパンくずリストが表示されているはずです。

WordPressのサイトにパンくずリストを設定後にやるべき2つのこと

以上で、パンくずリスト設定は完了しましたが、あとは細々とやっておくべきことが2つほどあります。

その1. CSS編集

パンくずリストがありのままだと味気ないので、CSSを編集してカッコよくしましょう。

ぼくは、背景を黒にして、文字を白くして、クールな感じを醸し出してみました。

コードはこんな感じですね。

.breadcrumbs{
 margin-left: 0;
  padding-left: 0;
background: #161616;/*背景色*/
color:#fff;
}
 

.breadcrumbs a{
  display: inline-block;
    padding: 0 3px 0 7px;
    height: 28px;
    line-height: 28px;
    text-decoration: none;
    color:#fff;
    font-size: 13px;
}