サイトの中で自分が今どこにいるのかをユーザーに伝えることはユーザビリティの向上にもつながりますし、それによってGoogleのロボットがサイト内を移動しやすくすることはSEOで上位化を目指す為にも重要な内容になります。
この道しるべになるものを「パンくず」と呼びます。
テーマによっては最初からパンくずを表示する機能が入っているものもありますが、無料のテーマの中には表示がされないものも少なくありません。
今回はBreadcrumb NavXTというプラグインを使ってパンくずをサイト内に表示させる方法を見ていきましょう。
パンくずとは？
冒頭でも触れた通り、サイト内のどの位置に自分がいるのかをユーザーに指し示す地図になるのがパンくずです。
サイト内ではこのように表示されることが多く、上図を例に出すと「HOME」から「カテゴリー」内にある「記事その1」という場所を表示しているという事ですね。
これがある事で、ユーザーは今自分が見ている記事がどういった位置づけにあるのかがわかり、また一つ上の「カテゴリー」や「HOME」にも戻りやすくなる利点があります。
余談ですが、童話『ヘンゼルとグレーテル』で、森で迷子にならないように通り道にパンくずを置いていった、というお話がWEBのパンくずの由来となっています。
Breadcrumb NavXTのインストール方法
それではさっそくBreadcrumb NavXTをインストールしていきましょう。
管理画面左メニューの「プラグイン」⇒「新規追加」と進んでいき、Breadcrumb NavXTを検索します。
するとこのようにプラグインが出てくると思いますので、「今すぐインストール」⇒「有効化」でプラグインの準備は完了です。
＼より詳しいプラグインのインストール方法はこちらから／
パンくずリストの設置方法
プラグインが有効化できたらパンくずリストを実際にページに表示してみましょう。
表示のさせ方はBreadcrumb NavXTの公式サイトにヒントが記載されています。
表示させたい位置に
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>このようにコードを入れることでパンくずを表示させることが可能です。
header.phpに記載しておくことで全ページに適応されるので、挿入する位置に気を付けつつ上記のコードを入れましょう。
上手く表示されたらCSSでサイズや位置を調節して完成です！
なお、あまりコードを編集したことがないという方は、失敗しても大丈夫なように先にバックアップを取っておくことをお勧めします。
＼FTPツールを使ってWordPressのバックアップを取る方法はこちら／
特定ページにパンくずを表示させたくない場合
基本的に、パンくずはTOPを除く全てのページで表示させておいてよいかと思いますが、どうしてもこのページはパンくずを表示させたくない！という場合もあるかもしれません。
その際は上記のコードのif文に除外したいページを追加します。
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php
if(function_exists('bcn_display') && !is_page(1) && !is_page(2))
{
bcn_display();
}?>
</div>「&& !is_page(1) && !is_page(2)」だとIDが1か2の固定ページの場合はパンくずを表示しないといった形になります。
もしパンくずを出したくないページがありましたら、上記のコードを参考に対応を行ってください。
＜h2＞Breadcrumb NavXTの設定
基本的に入れたままの状態でも形は整っているのでわざわざ設定を変更する必要はないのですが、Breadcrumb NavXTの設定画面からパンくずの構造を変更する事も可能です。
管理画面左メニューの「設定」⇒「Breadcrumb NavXT」から設定を変更できますので、せっかくなので見ていきましょう。
長くなりますのでお暇な時にご確認ください。
設定は
・一般
・投稿タイプ
・タクソノミー
・その他
という項目に分けられています。
それぞれの項目の中身を見ていきましょう。
一般
まずは一般タブの中身を見ていきましょう。
一般
一般タブの中の一般タブです。
ここではパンくずの区切り文字を変更できます。
記号は特殊文字で記載する形になりますので、HTMLの特殊文字一覧などから括弧を探して入れましょう。
現在の項目
表示されているページに対する表示の仕方を変更できます。
・現在の項目にリンク
普通パンくずは上位ページに対するリンクになるので、画像で言う記事その1ページを表示している時には、記事その1のパンくずにはリンクはつきません。
この項目にチェックを付けておけば記事その1ページ表示中にもパンくずにリンクをつけることが可能です。
・分割ページパンくず
アーカイブなどでページが複数に分かれる時、通常であれば2ページ目も3ページ目もパンくずの表示は同じです。
こちらにチェックを入れておけばページ目にはパンくずの後ろに2、3といった形で数字がつくようになります。
・分割ページテンプレート
ここには分割ページが表示される時のソースを記入します。
ホームページパンくず
パンくずの先頭につくトップページへのリンクについて設定が可能です。
・ホームページパンくず
デフォルトでチェックが入っていますが、チェックを外すことでトップページへのリンクを削除できます。
ただパンくずとして機能させるのであればトップページへのリンクを削除する必要性はないのでそのままで良いでしょう。
・ホームページテンプレート
パンくずリストにホームページを表示させる時のソースが書いてあります。
基本的にはデフォルトで書かれている状態で構いません。
・ホームページテンプレート (リンクなし)
パンくずにリンクが存在しない時に使用されるソースです。
ブログを示すパンくず
・ブログを示すパンくず
公式サイトなどでフロントのページを固定ページで作り、その中にブログを用意しているといった場合はこちらの項目が適用されます。
最新の投稿がトップに表示されるブログサイトであれば使用されないのでクリックできなくなっています。
メインサイトのパンくず
・メインサイトのパンくず
サイトをマルチサイトで運用する時に使用する項目です。
複数サイトを一元管理する際はこちらの項目が適応されます。
・メインサイトのホームページテンプレート
マルチサイトでパンくず表示を行う際に使用されるソースです。
・メインサイトホームテンプレート (リンクなし)
マルチサイトでリンク無しのパンくず表示を行う際に使用されるソースです。
投稿タイプ
次に投稿タイプの中身を確認していきましょう。一般投稿や固定ページなどで適応されるパンくずの設定を行う事ができます。
投稿
・投稿テンプレート
パンくずに一般投稿を表示する際のソースが記入されています。
・投稿テンプレート (リンクなし)
同じくパンくずに一般投稿を表示する際のソースですが、こちらはリンクがつかない場合のソースです。
・投稿階層表示
投稿を階層化して表示します。
デフォルトでチェックが入っているのでこちらはそのままで構いません。
・Post Hierarchy Use Parent First
調査中です…
・投稿階層表示におけるリファラーページの考慮
チェックを入れることで、ユーザーが辿ってきたページを元にパンくずリストを生成させることができます。
例えば「WordPress」カテゴリーで「プラグイン」タグが付いた記事の場合、カテゴリーアーカイブ経由で記事を見た人に対してはTOP≫カテゴリー≫記事、タグアーカイブを経由して記事を見た人に対してはTOP≫タグ≫記事という形です。
・投稿階層
上記を使用しない場合、パンくずの階層の基準をどこにするかを決められます。
基本的にはカテゴリーのままで問題ありません。
固定ページ
・ページテンプレート
パンくずに固定ページを表示させる際のソースになります。
・ページテンプレート (リンクなし)
投稿の時と同じくパンくずに固定ページを表示させる際のソースですが、こちらはリンク無しで表示されるソースです。
添付ファイル
添付ファイル？となりますが、ここでいう添付ファイルとはメディアにアップロードした画像ファイルとかの事です。
記事に画像を挿入する際に、添付ファイルのリンクにアクセスできるのはご存知でしょうか？
その際にパンくずを表示させるかどうかの設定がこちらです。
・添付ファイルテンプレート
パンくずに添付ファイルを表示させる際のソースになります。
・添付ファイルテンプレート (リンクなし)
パンくずに添付ファイルを表示させる際のソースですが、こちらはリンク無しで表示されます。
タクソノミー
カテゴリやタグ、投稿フォーマットをパンくずで表示させる時の設定を行う場合はこちらです。
今までの流れで大体のイメージはつくかと思いますが、リンクありパターンとリンクなしパターンのソースが書かれています。
カスタム投稿があればその項目についても同様に表示されます。その場合は投稿フォーマットの下部にテンプレートが表示されますので混乱しないようにしましょう。
カテゴリー
・カテゴリーテンプレート
パンくずにカテゴリーを表示させる際のソースになります。
・カテゴリーテンプレート (リンクなし)
パンくずにカテゴリーを表示させる際のソースになりますが、こちらはリンク無しで表示されます。
タグ
・タグテンプレート
パンくずにタグを表示させる際のソースになります。
・タグテンプレート (リンクなし)
パンくずにタグを表示させる際のソースになりますが、こちらはリンク無しで表示されます。
投稿フォーマット
投稿フォーマットはバージョン3.1から導入された機能で、投稿の表示をカスタマイズする際に使えるメタ情報です。
全てのテーマで導入されているわけではないので見たことが無いという方もいらっしゃるかと思います。投稿画面の右（公開ボタンがあるエリア）に投稿フォーマットという欄がある場合に使用できるパンくずになりますので、ある場合にのみ関係してくる項目です。
・投稿フォーマットテンプレート
パンくずに投稿フォーマットを使用した投稿を表示させる際のソースになります。
・投稿フォーマットテンプレート (リンクなし)
パンくずに投稿フォーマットを使用した投稿を表示させる際のソースになりますが、こちらはリンク無しで表示されます。
その他の設定
投稿者アーカイブや日付アーカイブ、404ページなどのパンくず表示はその他の設定から設定します。
投稿者アーカイブ
・投稿者テンプレート
パンくずに投稿者アーカイブページを表示させる際のソースになります。
・投稿者テンプレート (リンクなし)
パンくずに投稿者アーカイブページを表示させる際のソースになりますが、こちらはリンク無しで表示されます。
・投稿者表示フォーマット
display_name、nick_name、first_name、last_nameから選択できます。
display_name → プロフィール設定で「ブログ上の表示名」に記載されている内容
nick_name → 「ニックネーム」に記載されている内容
first_name → 「名」に記載されている内容
last_name → 「姓」に記載されている内容
をパンくずに表示します。
・Author Root Page
固定ページから投稿者ルートページを選択できます。
投稿者のプロフィールなどがあれば設定する事が可能です。
その他
・日付テンプレート
パンくずに日付を表示させる際のソースになります。
・日付テンプレート (リンクなし)
パンくずに日付を表示させる際のソースになりますが、こちらはリンク無しで表示されます。
・検索テンプレート
パンくずに検索キーワードを表示させる際のソースになります。
・検索テンプレート (リンクなし)
パンくずに検索キーワードを表示させる際のソースになりますが、こちらはリンク無しで表示されます。
・404タイトル
404ページが表示されたときのタイトルを変更できます。
・404テンプレート
パンくずで404ページを表示する際のテンプレートになります。
基本的にリンク無しのソースが設定されています。
非推奨
非推奨ってなんだって感じですが…タイトルやカテゴリ名が長い場合、何文字以上になったら文字列を短縮させるかどうかの設定ができます。
チェックをつけ、タイトル文字数の上限の数字を変えることで変更できますが、プラグイン側ではCSSで調整する事を推奨しています。
まとめ
という事でBreadcrumb NavXTというパンくずを表示させるプラグインについてのまとめでした。
非常に長くなってしまいましたが、基本的には標準設定のままで問題ないので「インストール方法」と「パンくずの設置方法」をご確認いただければ大丈夫です。
パンくずをきちんとつけることでユーザビリティの向上だけでなく、正しいパンくず構造はSEOでも無視できない効果を生みます。
自分のサイトにパンくずがついていない！という方はこれを機会に導入する事をオススメします。
