パンくずリストを自動生成!WordPressプラグイン「Breadcrumb NavXT」の使い方

パンくずリストを設置することで、「ユーザー満足度の向上」「検索順位の向上」に繋がります。
参考:『検索順位にも影響?パンくずリストの重要な役割と作成方法

しかし、パンくずリストを全てのページに設置するのは、面倒です。

もし、WordPressを使っているなら、「Breadcrumb NavXT」というプラグインを入れることで、パンくずリストを自動生成させることができます。

このページでは、パンくずリストを設置するのに便利なWordPressプラグイン「Breadcrumb NavXT」の使い方を紹介しています。

Breadcrumb NavXTの使い方

実際に、使い方を見ていきましょう。

1、準備

まずは、「Breadcrumb NavXT」をインストールします。
WordPress管理画面の左メニューからプラグイン>新規追加に進んでください。

wordpress-breadcrumb-navxt-plugin

次に、「Breadcrumb NavXT」を検索して、「いますぐインストール」をクリックします。

wordpress-breadcrumb-navxt-install

インストールが完了したら、「プラグインを有効化」をクリックしてください。

wordpress-breadcrumb-navxt-active

続いて、左メニューの設定から「Breadcrumb NavXT」に進んでください。

wordpress-breadcrumb-navxt-set

「Your settings are out of date. Migrate now.」という文章が表示されると思います。
「Migrate now」をクリックしてください。

wordpress-breadcrumb-navxt-migrate-now

これで、準備は完了です。

2、パンくずリストを設置しよう

パンくずリストを設置したい場所に、次のコードを記述をします。

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

例:ヘッダーにパンくずリストを設置する方法

例として、「ヘッダー」にパンくずリストを設置する方法を紹介します。
※Twenty Fourteenテーマを元に紹介しています。

まずは、左メニューから外観>テーマの編集に進んでください。

wordpress-breadcrumb-navxt-theme

ヘッダー (header.php)の編集画面を開きます。

wordpress-breadcrumb-navxt-header

次の写真のように、ヘッダー (header.php)の下部に、コードを貼り付けましょう。
最後に「ファイルを更新」ボタンをクリックします。

wordpress-breadcrumb-navxt-header2

これで、パンくずリストの設置は完了しました。
最後に、CSSでパンくずリストの位置を調整しましょう。

.breadcrumbs{
	margin: 10px 0 0 235px;
}

次のように、表示されていればOKです。

wordpress-breadcrumb-navxt-header3

3、設定

Breadcrumb NavXTは、初期設定のままでも使えますが、より良いパンくずリストになるように、設定を変更することをおすすめします。

設定を変更するには、左メニューの設定から「Breadcrumb NavXT」に進んでください。

wordpress-breadcrumb-navxt-set

Breadcrumb NavXTの設定画面

wordpress-breadcrumb-navxt-set2

パンくずリストの先頭を「サイト名」から「トップページ」に変更

初期設定では、パンくずリストの先頭が「サイト名」になっていると思います。

wordpress-breadcrumb-navxt-site-name

しかし、多くのWebサイトでは、「トップページ」や「ホーム」が一般的です。
そのため、パンくずリストの先頭を「サイト名」にしていると、トップページを探しているユーザーを悩ます可能性があります。

また、サイト名が長い場合、見栄えもよくありません。

パンくずリストの先頭を「サイト名」から「トップページ」に変更は、次の手順で行います。

1、「General(一般設定)」タブを選択

wordpress-breadcrumb-navxt-general

2、Home Templateの「%htitle%」を「トップページ」に変更

wordpress-breadcrumb-navxt-home-template

3、最後に「設定を保存」ボタンをクリックしてください

wordpress-breadcrumb-navxt-home-template-save

これで、設定は完了です。「サイト名」から「トップページ」に変わりました。

wordpress-breadcrumb-navxt-top-change

リンクにマウスのカーソルを重ねた時に表示される「吹き出し」を消す

初期設定では、リンクにマウスのカーソルを重ねた時、「吹き出し」が表示されます。

次の写真では、「未分類」にマウスのカーソルを重ねると、「Go to the 未分類 category archives.」という吹き出しが表示されています。

wordpress-breadcrumb-navxt-balloon

吹き出しは、リンクの内容を補足する目的などで設定しますが、今回は、必要ないので消したいと思います。

1、「General(一般設定)」タブの中にある「Home Template」を見てください

wordpress-breadcrumb-navxt-balloon2

次のように、記述されているのを確認してください。

<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to %title%." href="%link%" class="%type%">トップページ</a></span>

2、「title」属性を削除

吹き出しを表示させている記述は、「title」属性です。

ですから、この中にある「title=”Go to %title%.”」を削除してください。

削除後は、次の記述になります。

<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="%link%" class="%type%">トップページ</a></span>

3、最後に「設定を保存」ボタンをクリックしてください

wordpress-breadcrumb-navxt-home-template-save
これで、「トップページ」にマウスをカーソルを重ねた時、吹き出しが表示されなくなりました。

4、同様に、「カテゴリ」にマウスをカーソルを重ねた時の「吹き出し」も消す

先ほどは、パンくずリストの先頭(トップページ)の吹き出しを消しました。

同様に、「カテゴリ」にマウスのカーソルを重ねたときの「吹き出し」も消しましょう。

「Taxonomies(分類)」タブの中にある「Category Template」の「title」属性を削除します。

wordpress-breadcrumb-navxt-balloon3

これで、「カテゴリ」にマウスをカーソルを重ねた時、吹き出しが表示されなくなりました。

Webサイトによっては、まだ、吹き出しが表示される可能性があります。
そのときは、同様の手順で他の項目の「title」属性を削除してください。

Breadcrumb NavXTは、この他にも細かい設定ができますので、色々と試してください。

まとめ

「パンくずリストの設置は、Webサイトにメリットがある」と分かっていても、一つ一つパンくずリストを記述していくのは、面倒です。

Breadcrumb NavXTを使うことで、簡単にパンくずリストを設置することができます。

WordPress使っていて、使っているテーマにパンくずリストの自動生成機能がない場合は、是非、Breadcrumb NavXTを使ってください。

2 件のコメント

  •  有難うございます。
    私は、IT初心者ですが、ブログを作りたくて昨年の12月からWordPressを使って作り始めました。色々なブログやサイトを見ると、WPは簡単に作れると記してありました。でも、いざ始めてみると全く分からなくて、お手上げ状態でした。そんな時に貴方のブログを発見いたしました。分かる!!画像が多くて丁寧で初心者の私にも理解できました。本当に感謝しております。貴方のブログを参考にして、作り上げていきたいと思っております。
    今後もお世話になることが多いと思います。宜しくお願い致します。

    • 寺田孝章様
      嬉しいメッセージありがとうございます。
      私もWordPressを始めた頃は分からないことだらけで、色々なブログに目を通しながら、手探り状態で構築していきました。
      その経験から当ブログ(Webコミュ)では、「専門用語をできるだけ削り、初心者でも分かりやすい。」をモットーに記事をまとめています。
      今後も、多くの壁にぶつかると思いますが、お互いに最高のブログを作り上げていきましょう。
      私もできるだけ、WordPress関連の記事を充実させていきたいと考えていますので、今後ともよろしくお願いします。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    サラリーマンをしながら、当ブログを運営しています。今まで、数々のWebサイト・ブログを構築してきました。このブログでは、今までの経験で得た知識を活かし、Web制作・SEO関連を中心に、最新のIT関連ニュースを発信していきたいと思います。