プラグインでパンくずリスト(Breadcrumb)を検索してみると、Breadcrumb NavXTが圧倒的に多くの人に利用されているのがわかります。

他のプラグインも気になって、色々インストールして試してみたのですが、やはりBreadcrumb NavXTが一番細かな設定ができ、分かりやすくて使いやすかったです。

ただ、Breadcrumb NavXTは設定項目がたくさんあるので、一から設定するのは大変です。

そこで今回は、私が設定したBreadcrumb NavXTの設定内容について、備忘を兼ねてご紹介します。

これから説明する内容を設定すると、以下のような表示イメージになります。

Breadcrumb_01

スポンサーリンク



Breadcrumb NavXTのインストール

まずはプラグインをインストールします。

「プラグイン」「新規追加」からキーワードに「Breadcrumb NavXT」を入力して検索し、「今すぐインストール」を押下します。インストールが完了したら有効化しましょう。

Breadcrumb-NavXT _install_01

 

Breadcrumb NavXTの設定

設定は、「設定」メニューの中にある「Breadcrumb NavXT」から行います。

Breadcrumb-NavXT _set_000

 

私は以下のとおり設定を行いました。

一般タブ

パンくずリストの区切り

Breadcrumb-NavXT _set_01

以下の様に変更しています。

これに変更すると、区切り文字が[____]になります。( _は半角スペースです。)

 は、Font Awesomeというアイコンフォントを使用しています。この使用にはFont Awesome 4 Menus等のプラグインが必要ですので、あらかじめインストールし、有効化しておきましょう

ホームページテンプレート

Breadcrumb-NavXT _set_02

ホームページテンプレートは2箇所に修正を加えました。

まず、コードの中に、「title=”%title%へ移動”」という記述がありましたが、これを削除しました。

これがあると、トップページにリンクするパンくずリストにマウスを合わせると、「〇〇〇(サイトタイトル)へ移動」という吹き出しが表示されてしまいます。

不要なので消しています。

次に、サイトのトップページにリンクするパンくずリストの表示を[ HOME]に変更しました。

「%htitle%」という記述を以下のように変更すればOKです。

 

一般タブについて、残りの項目は初期値から変更していません。以下の内容のままです。

Breadcrumb-NavXT _set_03

 

投稿タイプタブ

投稿テンプレート(リンクなし)

Breadcrumb-NavXT _set_04

一般タブで投稿ページに対するリンクはしない設定にしているので、「投稿テンプレート(リンクなし)」のみ変更しました。

投稿ページを示すパンくずリストに対して、ページタイトルの前にというアイコンを追加しました。

「%htitle%」の前に以下のコードを追記すればOKです。

 

投稿タイプタブについて、残りの項目は初期値から変更していません。以下の内容のままです。

Breadcrumb-NavXT _set_05

 

タクソノミータブ

カテゴリーテンプレート

Breadcrumb-NavXT _set_06

ホームページテンプレートと同様に、2箇所に修正を加えました。

まず、コードの中に、「title=”%title%のカテゴリーアーカイブへ移動”」という記述がありましたが、これを削除しました。

これがあると、カテゴリーを示すパンくずリストにマウスを合わせると、吹き出しが表示されてしまうためです。

次に、カテゴリーを示すパンくずリストにのアイコンを追加しました。

「%htitle%」の前に以下のコードを追記すればOKです。

 

タクソノミータブについて、残りの項目は初期値から変更していません。

Breadcrumb-NavXT _set_07

 

その他タブ

その他タブについては、以下のとおりの設定内容で、全く変更を加えていません。

Breadcrumb-NavXT _set_08Breadcrumb-NavXT _set_09Breadcrumb-NavXT _set_10

 

コードを追加する

パンくずリストを表示するには、以下のコードをphpファイルに書き込む必要があります。

 

私は、テーマTwenty Seventeenを利用していますが、「single.php」にコードを追加しました。

追加すると、single.phpは以下の様になりました。最初だけちょっと抜粋します。

17行目から22行目までが追加したところですね。

なお、デザインについては、「style.css」で以下の様に変更しています。

私の場合は、文字のサイズを小さくし、後はパンくずリストのリンクについて、色を黒くするように変更しています。また、マウスオーバーすると黄緑色になるようにしています。

 

ページ全体の表示イメージとしては、以下の様になりました。

記事の上段に表示されるようになっています。

※アイキャッチ画像は、テーマTwenty Seventeenの当初の表示位置から変更しています。

Breadcrumb-NavXT _set_11

 

パンくずリストは、読者がどのサイトのどこの位置にあるページを読んでいるのか視覚的にわかりやすくするだけではなく、SEOの対策にも非常に有効です。

Breadcrumb NavXTは非常に簡単に導入できるプラグインです。みなさんも利用してみてはいかがでしょうか。

この記事をシェアする

“WordPressプラグイン「Breadcrumb NavXT」を使っておしゃれなパンくずリストを設置する方法” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です