あつ森動画随時UPしてます!
ブログ運営初心者

Breadcrumb NavXTの設定方法と使用方法を解説【JIN使用者にも対応】

記事説明用画像
ブロガーくん
ブロガーくん
プラグインのBreadcrumb NavXTを使えばパンくずリストを表示できるって聞いたんだけど設定方法と使用方法がわからない、、、誰かわかりやすく教えてくれないかな?

お教えいたします。

 

えもまる
えもまる

こんにちは!運営者のatsumruです。

今回はJIN使用者にも対応したWordPressのプラグインであるBreadcrumb NavXTを使用したパンくずリストの表示方法を紹介していきます。

 

この記事の内容

WordPressのプラグインBreadcrumb NavXTの大まかな役割を解説

Breadcrumb NavXTの設定方法と使用方法を画像を多用して解説

この記事を読むべき人

Breadcrumb NavXTの設定方法や使用方法を知りたい人

テーマにJINを使用していてパンくずリストをページ上にも表示させたい人

 

結論から言うと、Breadcrumb NavXTでパンくずリストを作成しておくことは、ユーザー利便性の観点から重要な要素となり得ます。

さらに、設定方法や使用方法は非常に簡単で設定は3分で終わります

この記事を読んでサクっと使えるようにしていきましょう!!

そもそもBreadcrumb NavXTとは

えもまる
えもまる

Breadcrumb NavXTを一言で言うと、

パンくずリストを自動生成してくれる便利プラグインだよ!!

「パンくずリストってなんぞ?」

ということですが、下の画像を見てみてください。

プラグイン説明用画像2

この画像のように、ユーザーが今自分のいるページを把握し迷子にならないように「ブログの階層をリンクで示したもの」のことをパンくずリストと言います。

みなさんもWebページなどで一度は目にしたことがあるかもしれません。

えもまる
えもまる
ちなみ、「自分がたどってきた通り道を忘れないようにパンくず置いていく」というヘンゼルとグレーテルの描写からパンくずリストという名前が付いたみたいだよ

 

パンくずリストを設置することの重要性は以下のようなことが挙げられます。

ユーザーの利便性を確保

ユーザーがパンくずリストとのリンクを利用して戻りたいページに戻ることができたり、自分のいる階層を把握できたりするなど

Googleなどの検索エンジンがブログ内をクロールしやすくなる

パンくずリストでリンクを作成してあげる事でクローラー(=ロボット)がブログ内を巡回しやすくなる

→「クローラーが巡回しやすいサイト=ユーザーにとっても巡回しやすいサイト」といえるのでブログ評価がプラスに働きやすい

などがあります。

つまり、ユーザー&検索エンジン(=ロボット)の利便性どちらにも良い影響を与えられるということですね。

ぜひBreadcrumb NavXTでパンくずリストを導入しましょう!!

Breadcrumb NavXTのインストール方法

念のためインストールから説明していきますよ~

Pluginインストール説明画像1

①まずはWordPress管理画面の「プラグイン」をクリック

Pluginインストール説明画像2

②右上にある「新規追加」クリック

Breadcrumb NavXT説明画像1

③検索欄に「Breadcrumb NavXT」と入力

④上の画像のようなアイコンをみつけたら「今すぐインストール」をクリックした後、「有効化」をクリック

えもまる
えもまる
まずはBreadcrumb NavXTのインストールが完了!

Breadcrumb NavXTの設定方法

次に実際にBreadcrumb NavXTでパンくずリストを表示させるための設定を行っていきます。

Breadcrumb NavXT説明画像2

⑤WordPress管理画面の「設定」にカーソルを置き「Breadcrumb NavXT」をクリック

 

一般タブの設定

Breadcrumb NavXTには4つの設定タブが存在します。

これからひとつずつ見ていきましょう!

Breadcrumb NavXT説明画像3

まずは「一般」の設定からです。

Breadcrumb NavXT説明画像4

パンくずリストの区切り

⑥デフォルトでは「>」と入力されていると思います。デフォルトのままだと各パンくずの間に”“の記号が表示されます。

僕の場合は”/“を入力しています。この場合は上の画像を見てみるとパンくずの間に”/“が表示されていることがわかります。

ここはお好みなのでデフォルトのままでよければそれでもOKです!!

Breadcrumb NavXT説明画像5

ホームページのパンくず

⑦パンくずにホームページを含めるにチェック

ホームページのテンプレート

⑦上のピンクの下線が引いてある3つの箇所はデフォルトだと「%title%」や「Go to %title%」という表示になっていると思います。

この「%title%」などはパンくずリストの「ホームリンク」の見え方の設定です。

僕の場合は上の画像のようにすべて「ホーム」としていますが、お好みで「Home」や「ホームへ」などに変更していただいてOKです!

ここではいくつか設定項目がありますがすべてデフォルトのままでOKです!

⑧最後に下の方にある「設定を保存」をクリックしておきましょう。

 

投稿タイプタブの設定

次に「投稿タイプ」の設定に進んでいきましょう!

ここでの注目箇所はたった1つですよ~♪

Breadcrumb NavXT説明画像7

Breadcrumb NavXT説明画像8投稿階層

⑨投稿階層で「カテゴリー」にチェックが入っているか確認してください

ここでカテゴリーにチェックを入れることで上の画像のようにパンくずリストの階層にカテゴリーが表示されるようになります。

もし別の階層を表示させたい場合はカテゴリー以外にチェックを入れてOKです!

 

タクソノミーとその他タブの設定

残り2つのタブの設定ですがこちらは特に何もいじらなくてOKです。

Breadcrumb NavXT説明画像9

それでは、実際にパンくずリストを表示させていきましょう!!

Breadcrumb NavXTの使用方法

Breadcrumb NavXTでパンくずリストを表示させる方法は一般的な方法とJINを利用している方向けに分けて説明させていただきます。

Breadcrumb NavXTの使用方法(タップでジャンプ可能)

 

1. 一般の方向け「header.php」を利用した使用方法

こちらではheader.phpを利用した場合の使用方法を説明していきます。

Breadcrumb NavXT説明画像10

WordPress管理画面の「外観」から「テーマエディター」をクリック

Breadcrumb NavXT説明画像11

テーマファイルから「テーマヘッダー(header.php」をクリック

ここからの設定は慎重に行ってください!

万一に備えてデータのバックアップを取っておくことをおすすめします。

Breadcrumb NavXT説明画像12

左側にずらっーとコードが表示されると思います。

基本的には上の画像にあるような<head>タグと</head>タグの間に下のコードをコピペしてもらえればOKです!

 

わかりずらい!!という方は下の画像をご覧ください。

Breadcrumb NavXT説明画像13

<head>タグと</head>タグの間ならどこでもいいのでとにかく</head>タグを見つけてください。

そして</head>タグのすぐ上に上の画像のような形でコピペしてください!

</head>タグは<body>タグのすぐ上にありますのでわかりやすいですよ。

貼り付けが終わったら「ファイルを更新」を忘れずクリック

Breadcrumb NavXT説明画像14

次にWordPress管理画面の「外観」から「カスタマイズ」へ進みます

Breadcrumb NavXT説明画像15

追加CSSという項目があると思いますので、入力欄の一番下に上の画像のように下のコードをコピペしてください。

このコードをコピペしたら上の方にある「公開」をクリックです!

ここまで完了したら実際に何かしらの記事をクリックしてパンくずリストがちゃんと表示されているか確認してみてください。

ちなみに上のコードの「1000px」や「20px」は目安なのでこの数字を変更することでパンくずリストの大きさや表示位置を変更することが可能です。

お好みに合わせていじってみてくださいね!

えもまる
えもまる

以上で一般的なパンくずリストの表示は完了!!

お疲れ様でした!!

2. JIN使用者向け「ウィジット」を利用した使用方法

ここではJINを利用しているかた向けのパンくずリストの表示のさせ方を紹介していきます。

JINを利用している方は非常に設定が簡単ですよ~♪

Breadcrumb NavXT説明画像16

WordPress管理画面の「ウィジット」をクリック

Breadcrumb NavXT説明画像17

上のような画面が表示されると思います。

左上に「Breadcrumb NavXT」がありますね!

Breadcrumb NavXT説明画像18

今回はページの上部にパンくずリストを表示させるための設定を行っていきます。

①まずは右の方にある「記事上部」のタブを開いておいてください。

②次に左上にある「Breadcrumb NavXT」をクリックしながら「記事上部」へ移動させます(=ドラッグ&ドロップ)

③すると下のように「Breadcrumb NavXT」が「記事上部」に移動し、「Breadcrumb NavXT」のタブを開けるようになります。

Breadcrumb NavXT説明画像19

④上の画像のように「パンくずをリンクにする」にチェックが入っていることを確認し下の「完了」をクリックして「保存」をクリックです

ここまで完了したら実際に何らかの記事を見てみてパンくずリストが表示されているか確認してくださいね♪

えもまる
えもまる
これでJINを使用している方もパンくずリストの設定は終了♪

JINでページ下部にもパンくずリストを表示させる方法

ちなみにJINを使用している方でページの下にもパンくずリストを表示させたい方はテーマのJINデフォルトの設定で可能ですので下の手順位したがって進んでみてください!

Breadcrumb NavXT説明画像20

WordPressの管理画面の「外観」から「カスタマイズ」に進みます。

Breadcrumb NavXT説明画像21

「その他の設定」をクリック

Breadcrumb NavXT説明画像22

その他の設定の中の「パンくずリストを表示」で「表示」にチェック

ここにチェックを入れると、下の図のようにページの下部にもパンくずリストが表示されるようになります。

Breadcrumb NavXT説明画像23

こちらはBreadcrumb NavXTは関係なく、JINを使用している方ならだれでも表示可能なパンくずリストです!

えもまる
えもまる
これでJINを使用している方はページ上部と下部にパンくずリストを表示させることができているはずです♪

まとめ

いかがでしたでしょうか?

プラグインBreadcrumb NavXTでパンくずリストを作成することで、ユーザーの利便性向上やGoogleのロボットの巡回しやすさの向上につながります。

見ていただく立場にあるブログに良い効果のあるものはどんどんとりいれていきたいものですね!

ちなみにテーマJINを利用している方に下の記事でおすすめのプラグインを紹介していますよ~

記事説明用画像
【2020年版】テーマ「JIN」でおすすめなプラグイン17選JINの方向けのおすすめのプラグインを17個紹介しています。設定方法を紹介しているリンクも貼ってありますのでご参考にしてみてください!...