お教えいたします。
こんにちは！運営者のatsumruです。
今回はJIN使用者にも対応したWordPressのプラグインであるBreadcrumb NavXTを使用したパンくずリストの表示方法を紹介していきます。
この記事の内容
WordPressのプラグインBreadcrumb NavXTの大まかな役割を解説
Breadcrumb NavXTの設定方法と使用方法を画像を多用して解説
この記事を読むべき人
Breadcrumb NavXTの設定方法や使用方法を知りたい人
テーマにJINを使用していてパンくずリストをページ上にも表示させたい人
結論から言うと、Breadcrumb NavXTでパンくずリストを作成しておくことは、ユーザー利便性の観点から重要な要素となり得ます。
さらに、設定方法や使用方法は非常に簡単で設定は3分で終わります！
この記事を読んでサクっと使えるようにしていきましょう！！
目次(タップでジャンプ)
「パンくずリストってなんぞ？」
ということですが、下の画像を見てみてください。
この画像のように、ユーザーが今自分のいるページを把握し迷子にならないように「ブログの階層をリンクで示したもの」のことをパンくずリストと言います。
みなさんもWebページなどで一度は目にしたことがあるかもしれません。
パンくずリストを設置することの重要性は以下のようなことが挙げられます。
ユーザーの利便性を確保
ユーザーがパンくずリストとのリンクを利用して戻りたいページに戻ることができたり、自分のいる階層を把握できたりするなど
Googleなどの検索エンジンがブログ内をクロールしやすくなる
パンくずリストでリンクを作成してあげる事でクローラー(=ロボット)がブログ内を巡回しやすくなる
→「クローラーが巡回しやすいサイト＝ユーザーにとっても巡回しやすいサイト」といえるのでブログ評価がプラスに働きやすい
などがあります。
つまり、ユーザー＆検索エンジン(=ロボット)の利便性どちらにも良い影響を与えられるということですね。
ぜひBreadcrumb NavXTでパンくずリストを導入しましょう！！
念のためインストールから説明していきますよ～
①まずはWordPress管理画面の「プラグイン」をクリック
②右上にある「新規追加」クリック
③検索欄に「Breadcrumb NavXT」と入力
④上の画像のようなアイコンをみつけたら「今すぐインストール」をクリックした後、「有効化」をクリック
次に実際にBreadcrumb NavXTでパンくずリストを表示させるための設定を行っていきます。
⑤WordPress管理画面の「設定」にカーソルを置き「Breadcrumb NavXT」をクリック
一般タブの設定
Breadcrumb NavXTには4つの設定タブが存在します。
これからひとつずつ見ていきましょう！
まずは「一般」の設定からです。
パンくずリストの区切り
⑥デフォルトでは「＆gt;」と入力されていると思います。デフォルトのままだと各パンくずの間に”＜“の記号が表示されます。
僕の場合は”/“を入力しています。この場合は上の画像を見てみるとパンくずの間に”/“が表示されていることがわかります。
ここはお好みなのでデフォルトのままでよければそれでもOKです！！
ホームページのパンくず
⑦パンくずにホームページを含めるにチェック
ホームページのテンプレート
⑦上のピンクの下線が引いてある3つの箇所はデフォルトだと「%title%」や「Go to %title%」という表示になっていると思います。
この「%title%」などはパンくずリストの「ホームリンク」の見え方の設定です。
僕の場合は上の画像のようにすべて「ホーム」としていますが、お好みで「Home」や「ホームへ」などに変更していただいてOKです！
ここではいくつか設定項目がありますがすべてデフォルトのままでOKです！
⑧最後に下の方にある「設定を保存」をクリックしておきましょう。
投稿タイプタブの設定
次に「投稿タイプ」の設定に進んでいきましょう！
ここでの注目箇所はたった1つですよ～♪
投稿階層
⑨投稿階層で「カテゴリー」にチェックが入っているか確認してください
ここでカテゴリーにチェックを入れることで上の画像のようにパンくずリストの階層にカテゴリーが表示されるようになります。
もし別の階層を表示させたい場合はカテゴリー以外にチェックを入れてOKです！
タクソノミーとその他タブの設定
残り2つのタブの設定ですがこちらは特に何もいじらなくてOKです。
それでは、実際にパンくずリストを表示させていきましょう！！
Breadcrumb NavXTでパンくずリストを表示させる方法は一般的な方法とJINを利用している方向けに分けて説明させていただきます。
Breadcrumb NavXTの使用方法(タップでジャンプ可能)
1. 一般の方向け「header.php」を利用した使用方法
こちらではheader.phpを利用した場合の使用方法を説明していきます。
WordPress管理画面の「外観」から「テーマエディター」をクリック
テーマファイルから「テーマヘッダー(header.php」をクリック
ここからの設定は慎重に行ってください！
万一に備えてデータのバックアップを取っておくことをおすすめします。
左側にずらっーとコードが表示されると思います。
基本的には上の画像にあるような<head>タグと</head>タグの間に下のコードをコピペしてもらえればOKです！
1 2 3 4 5 6 | <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> |
わかりずらい！！という方は下の画像をご覧ください。
<head>タグと</head>タグの間ならどこでもいいのでとにかく</head>タグを見つけてください。
そして</head>タグのすぐ上に上の画像のような形でコピペしてください！
</head>タグは<body>タグのすぐ上にありますのでわかりやすいですよ。
貼り付けが終わったら「ファイルを更新」を忘れずクリック
次にWordPress管理画面の「外観」から「カスタマイズ」へ進みます
追加CSSという項目があると思いますので、入力欄の一番下に上の画像のように下のコードをコピペしてください。
1 2 3 4 | div.breadcrumbs { max-width: 1000px; margin:20px auto; } |
このコードをコピペしたら上の方にある「公開」をクリックです！
ここまで完了したら実際に何かしらの記事をクリックしてパンくずリストがちゃんと表示されているか確認してみてください。
ちなみに上のコードの「1000px」や「20px」は目安なのでこの数字を変更することでパンくずリストの大きさや表示位置を変更することが可能です。
お好みに合わせていじってみてくださいね！
以上で一般的なパンくずリストの表示は完了！！
お疲れ様でした！！
2. JIN使用者向け「ウィジット」を利用した使用方法
ここではJINを利用しているかた向けのパンくずリストの表示のさせ方を紹介していきます。
JINを利用している方は非常に設定が簡単ですよ～♪
WordPress管理画面の「ウィジット」をクリック
上のような画面が表示されると思います。
左上に「Breadcrumb NavXT」がありますね！
今回はページの上部にパンくずリストを表示させるための設定を行っていきます。
①まずは右の方にある「記事上部」のタブを開いておいてください。
②次に左上にある「Breadcrumb NavXT」をクリックしながら「記事上部」へ移動させます(=ドラッグ＆ドロップ)
③すると下のように「Breadcrumb NavXT」が「記事上部」に移動し、「Breadcrumb NavXT」のタブを開けるようになります。
④上の画像のように「パンくずをリンクにする」にチェックが入っていることを確認し下の「完了」をクリックして「保存」をクリックです
ここまで完了したら実際に何らかの記事を見てみてパンくずリストが表示されているか確認してくださいね♪
JINでページ下部にもパンくずリストを表示させる方法
ちなみにJINを使用している方でページの下にもパンくずリストを表示させたい方はテーマのJINデフォルトの設定で可能ですので下の手順位したがって進んでみてください！
WordPressの管理画面の「外観」から「カスタマイズ」に進みます。
「その他の設定」をクリック
その他の設定の中の「パンくずリストを表示」で「表示」にチェック
ここにチェックを入れると、下の図のようにページの下部にもパンくずリストが表示されるようになります。
こちらはBreadcrumb NavXTは関係なく、JINを使用している方ならだれでも表示可能なパンくずリストです！
まとめ
いかがでしたでしょうか？
プラグインBreadcrumb NavXTでパンくずリストを作成することで、ユーザーの利便性向上やGoogleのロボットの巡回しやすさの向上につながります。
見ていただく立場にあるブログに良い効果のあるものはどんどんとりいれていきたいものですね！
ちなみにテーマJINを利用している方に下の記事でおすすめのプラグインを紹介していますよ～
