ブロギングライフ

ブログサイト運営関連、AdSenseについての情報などを発信しています。

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

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

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

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

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

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

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

Breadcrumb NavXT

プラグイン Breadcrumb NavXT

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

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

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

Breadcrumb NavXTの設定

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

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

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

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

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の場合、トップに大きな画像が表示されているので)スクロールダウンして個別記事を表示させます。(下の画像をご参照下さい。)

CSS カスタマイズのプレビュー表示

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

div.breadcrumbs {
margin-bottom:15px
}

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

CSSカスタマイズに入力してプレビューで確認しながら設定できます。

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

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

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

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

サイト名をホームに変更

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

Breadcrumb NabXT 設定ページ

ホームページテンプレートのコード部の赤字でハイライトしている”%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のホームアイコンを加えた記述です。

<span property=”itemListElement” typeof=”ListItem”><a property=”item” typeof=”WebPage” title=”%title%へ移動” href=”%link%” class=”%type%”><span property=”name”><i class=”fa fa-home”></i> ホーム</span></a><meta property=”position” content=”%position%”></span>

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

アイコンフォント付きのパンくずリスト表示

サイト名(「ブログ始めました」)から、アイコンフォント付きの「ホーム」に表示が変わりました。

リンクのない場合の表示コード、「ホームページテンプレート(リンクなし)」も同様に変更します。

カテゴリー名の前にアイコンフォントを追加することもできます。追加する場合は、Breadcrumb NavXTの設定の上部に表示される「タクソノミー」タブをクリックして、カテゴリやタブのテンプレートコード内の”%htitle%” の前にアイコンフォントのコードを追加します。

記事タイトルをパンくずリストで非表示に設定する

Breadcrumb NavXTの製作者が、表示中のページのタイトル(アイテム)をパンくずリストの階層リストから削除するミニプラグインをGitHubに公開しています。GitHubに公開されている拡張機能プラグインコードをコピーして、 functions.php に(貼り付けて)追加します。

コードをコピー後、WordPressのダッシュボードメニュー「外観」から「テーマの編集」をクリックして、右側の「テーマファイル」のリストの中から「テーマのための関数」(functions.php)を選択し、コード表示欄に拡張機能プラグインコードを貼り付けて、ファイルを保存します。

投稿ページを表示すると記事タイトルがパンくずリストから非表示になりました。

記事タイトルがパンくずリストで非表示になりました

サイトのタイトル下に、パンくずリストで「ホーム」 > 「カテゴリー」と続いて、その下に投稿記事のタイトルが表示されるようになりました。見た目もスッキリしていて、サイトの階層も分かりやすくなったと思います。

コメントを残す(承認後表示されます)

*
*
* (公開されません)

Return Top
error: Content is protected !!