プラグイン Breadcrumb NavXT パンくずリストの設置と表示カスタマイズ方法

ウェブページを表示すると記事タイトルの上などに、”ホーム > WordPress > プラグイン” などのように階層を示すような表示は、パンくずリストと呼ばれています。パンくずリストは、訪問したユーザーやクローラーに、そのページとサイトの階層構造を示す道標の役割を持っています。

パンくずリストを設置することによって、そのページのサイト内の位置づけ、属するカテゴリーなどをユーザーに分かりやすく伝えることができます。検索結果にもパンくずリストは表示されることが多いです。

WordPressの標準テーマでは、パンくずリストの表示機能は含まれていませんが、プラグインを使用することで簡単にパンくずリストを設置することができます。

お勧めのWordPressのパンくずリスト表示プラグイン

WordPressは、プラグインを使用することで簡単に機能を拡張することができます。パンくずリストの表示を行うプラグインも多数あります。プラグインを選ぶ場合、利用者の数が多く、実績があり、評判も高いものを選ぶのが基本です。また、まめに更新されて、最新のWordPressに対応しているものがお勧めです。

Breadcrumb NavXT

Breadcrumb NavXTは、この記事を書いている時点で有効インストール数が70万を超える人気プラグインです。更新も比較的最近行われ、最新のWordPress バージョンと互換性もあり、レーティングも高いので信頼度は高いと思います。

Breadcrumb NavXTのインストールと有効化

WordPressのダッシュボードから「プラグイン」-「新規追加」をクリックします。キーワードに“Breadcrumb”と入力して検索するとBreadcrumb NavXTが一番に表示されます。（左 or 上のリンクをクリックすると、検索結果のページが表示されます。）「今すぐインストール」ボタンを押して、インストール後、「有効」ボタンを押します。

Breadcrumb NavXTの設定

パンくずリスト表示コードの設置

Breadcrumb NavXTは、パンくずリストを表示させたい場所に以下のコードを設置することで機能します。

パンくずリストの設置位置は、サイト運営者が任意に選ぶことができます。ページのタイトルの上などが一般的な設置場所です。上のコードをコピーして、テンプレートファイルのヘッダー部などに貼り付けます。

WordPress 標準テーマ Twenty Seventeenでの設置例

WordPress ダッシュボードの「外観」から「テーマの編集」をクリックします。ページ右側に表示されているテーマファイルのリストの中から、”個別投稿（single.php）”をクリックするとソースコードが表示されます。

以下の様に記載されているコード箇所を探します。

/* Start the Loop */
While ( have_posts( ) ) :
the_post( );

the_post( ); の下に以下のコードをコピーして、貼り付け挿入します。

?>
<div class=”breadcrumbs” typeof=”BreadcrumbList” vocab=”https://schema.org/”>
<?php if(function_exists(‘bcn_display’))
{
bcn_display();
}?>
</div>
<?php

設置する場所などでphpのクロージングとオープニングタグが必要になる場合があります。上のコードは、Twenty Seventeenのsingle.php内に設置する場合のコードです。

「ファイルを更新」ボタンを押して、設定を保存します。続いて、サイトの投稿ページを表示します。設定が適切に行われていれば、投稿記事タイトル上の日付の上にパンくずリストが表示されます。（以下の画像をご参照下さい。）

パンくずリストは無事に追加されて表示されるようになりました。続いて、表示位置の調整と表示のカスタマイズなどを行います。

表示位置の調整

パンくずリストと投稿日の間が少し詰まっている感じなので、少し間隔を空けます。

WordPress ダッシュボードの「外観」から「カスタマイズ」をクリックします。表示されるアイテムリストの「追加 CSS」を選択します。右側にサイトのホームページがプレビューで表示されています。（Twenty Seventeenの場合、トップに大きな画像が表示されているので）スクロールダウンして個別記事を表示させます。（下の画像をご参照下さい。）

左下の入力欄に以下の様な記述を追加します。

div.breadcrumbs {
margin-bottom:15px
}

追加CSSの欄にカスタマイズ表示の記述を加えるとプレビューに変更がリアルタイムで反映表示されます。変更内容を確認しながら調整できるのでとても便利です。例えば、下マージンの数値を15pxから大きな数字にするとマージンが広がり、数値を小さくするとマージンが狭くなります。

プレビューで確認した上で、「公開」ボタンを押してCSSカスタマイズ設定を保存し、公開します。

パンくずリストの表示内容のカスタマイズ

Breadcrumb NavXTのデフォルトで表示されるパンくずリストは、「サイト名 > カテゴリー > 記事タイトル」の形式で表示されます。サイト名が表示されるのは少し違和感があります。また、パンくずリストに記事タイトルが表示されて、その下に記事タイトルが表示されるのはかなり違和感を感じる場合が多いように思います。

サイト名を非表示にすることもできます。しかし、パンくずリストの特徴の一つはサイトの階層を表示することです。「ホーム」> 「カテゴリー」の形式で表示される方が、ユーザーにとって階層が分かりやすいと思います。

サイト名をホームに変更

WordPress ダッシュボードメニュー「設定」からBreadcrumb NavXT をクリックすると、設定ページが表示されます。「ホームページパンくず」の下にある「ホームページテンプレート」のコードを編集します。

ホームページテンプレートのコード部の赤字でハイライトしている”%htitle%”の部分を変更します。

<span property=”itemListElement” typeof=”ListItem”><a property=”item” typeof=”WebPage” title=”%title%へ移動” href=”%link%” class=”%type%”><span property=”name”>%htitle%</span></a><meta property=”position” content=”%position%”></span>

「ホーム」や「Home」または「HOME」などお好みの文言に変更して下さい。フォントアイコンを合わせて使うこともできます。

以下はFontAwesomeのホームアイコンを加えた記述です。

上のコード変更を加えて設定を保存した後、ページを表示すると以下の様にパンくずリストが表示されます。