プラグインでパンくずリスト（Breadcrumb）を検索してみると、Breadcrumb NavXTが圧倒的に多くの人に利用されているのがわかります。
他のプラグインも気になって、色々インストールして試してみたのですが、やはりBreadcrumb NavXTが一番細かな設定ができ、分かりやすくて使いやすかったです。
ただ、Breadcrumb NavXTは設定項目がたくさんあるので、一から設定するのは大変です。
そこで今回は、私が設定したBreadcrumb NavXTの設定内容について、備忘を兼ねてご紹介します。
これから説明する内容を設定すると、以下のような表示イメージになります。
Contents
まずはプラグインをインストールします。
「プラグイン」「新規追加」からキーワードに「Breadcrumb NavXT」を入力して検索し、「今すぐインストール」を押下します。インストールが完了したら有効化しましょう。
設定は、「設定」メニューの中にある「Breadcrumb NavXT」から行います。
私は以下のとおり設定を行いました。
一般タブ
パンくずリストの区切り
以下の様に変更しています。
|
1 |
<i class="fa fa-caret-right "></i> |
これに変更すると、区切り文字が[____]になります。（ _は半角スペースです。）
は、Font Awesomeというアイコンフォントを使用しています。この使用にはFont Awesome 4 Menus等のプラグインが必要ですので、あらかじめインストールし、有効化しておきましょう
ホームページテンプレート
ホームページテンプレートは２箇所に修正を加えました。
まず、コードの中に、「title=”%title%へ移動”」という記述がありましたが、これを削除しました。
これがあると、トップページにリンクするパンくずリストにマウスを合わせると、「〇〇〇（サイトタイトル）へ移動」という吹き出しが表示されてしまいます。
不要なので消しています。
次に、サイトのトップページにリンクするパンくずリストの表示を[ HOME]に変更しました。
「%htitle%」という記述を以下のように変更すればOKです。
|
1 |
<i class="fa fa-home"></i> HOME |
一般タブについて、残りの項目は初期値から変更していません。以下の内容のままです。
投稿タイプタブ
投稿テンプレート（リンクなし）
一般タブで投稿ページに対するリンクはしない設定にしているので、「投稿テンプレート（リンクなし）」のみ変更しました。
投稿ページを示すパンくずリストに対して、ページタイトルの前にというアイコンを追加しました。
「%htitle%」の前に以下のコードを追記すればOKです。
|
1 |
<i class="fa fa-file"></i> |
投稿タイプタブについて、残りの項目は初期値から変更していません。以下の内容のままです。
タクソノミータブ
カテゴリーテンプレート
ホームページテンプレートと同様に、２箇所に修正を加えました。
まず、コードの中に、「title=”%title%のカテゴリーアーカイブへ移動”」という記述がありましたが、これを削除しました。
これがあると、カテゴリーを示すパンくずリストにマウスを合わせると、吹き出しが表示されてしまうためです。
次に、カテゴリーを示すパンくずリストにのアイコンを追加しました。
「%htitle%」の前に以下のコードを追記すればOKです。
|
1 |
<i class="fa fa-folder"></i> |
タクソノミータブについて、残りの項目は初期値から変更していません。
その他タブ
その他タブについては、以下のとおりの設定内容で、全く変更を加えていません。
コードを追加する
パンくずリストを表示するには、以下のコードをphpファイルに書き込む必要があります。
|
1 2 3 4 5 6 |
<div class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> |
私は、テーマTwenty Seventeenを利用していますが、「single.php」にコードを追加しました。
追加すると、single.phpは以下の様になりました。最初だけちょっと抜粋します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php /** * The template for displaying all single posts * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ get_header(); ?> <div class="wrap"> <div class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> |
17行目から22行目までが追加したところですね。
なお、デザインについては、「style.css」で以下の様に変更しています。
私の場合は、文字のサイズを小さくし、後はパンくずリストのリンクについて、色を黒くするように変更しています。また、マウスオーバーすると黄緑色になるようにしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/* パンくずリスト */ .breadcrumbs { font-size: 0.6875rem; } a.home, a.taxonomy.category { color: #000;/*リンク文字色*/ } a.home:hover, a.home:active, a.taxonomy.category:hover, a.taxonomy.category:active { color: #32cd32;/*マウスオーバー時のリンク文字色*/ } |
ページ全体の表示イメージとしては、以下の様になりました。
記事の上段に表示されるようになっています。
※アイキャッチ画像は、テーマTwenty Seventeenの当初の表示位置から変更しています。
パンくずリストは、読者がどのサイトのどこの位置にあるページを読んでいるのか視覚的にわかりやすくするだけではなく、SEOの対策にも非常に有効です。
Breadcrumb NavXTは非常に簡単に導入できるプラグインです。みなさんも利用してみてはいかがでしょうか。
