【JIN/カスタマイズ】プラグイン『Breadcrumb NavXT』でパンくずリストを記事タイトル上に表示＆カスタマイズ方法。

このページはPRが含まれています。

URLをコピーしました！

mirai

こんにちわ🙂
mirai(@m__style33)です。

今回はJINの『パンくずリスト』をカスタマイズしたいと思います。

JINにはもともと簡単にパンくずリストを表示する機能がついているんですけど、表示が記事下なんですよね。

[jin-yohaku15]

[chat face=”mirai_002.png” name=”mirai” align=”left” border=”none” bg=”pink” style=”maru”]記事下だとサイトを見に来てくれたユーザーの目につきにくいからパンくずリストの表示を記事上にしたいな✨
それと区切りのマークも好きなものにしたい！
[/chat]

ということで、そんな条件を叶えてくれたWordPressのプラグイン『Breadcrumb NavXT』を使ってパンくずリストを記事タイトル上に表示する設定＋カスタマイズする方法を自分用の備忘録も兼ねて書いておきたいと思います( ˙꒳˙ᐢ )

Index

Breadcrumb NavXTのインストール

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

WordPressの管理画面から、［プラグイン］→［新規追加］をクリック。
検索ボックスに『Breadcrumb NavXT』と入力。
今すぐインストールをクリック。
有効化をクリック。

[jin-yohaku35]

これでインストールできました。
[jin-yohaku10]

Breadcrumb NavXTの設定

WordPressの管理画面から、［設定］→［Breadcrumb NavXT］に進んで細かい設定などカスタマイズしていきます。

一般

ここでは区切りやトップページなどの設定ができます。

パンくずの区切り

ここで区切りの文字の変更ができます。
デフォルトでは『>』という記号になってます。

Font Awesomeのアイコンを使うことも可能です。
Font Awesome

このブログでもFont Awesomeの『』（caret-right）を使っていてCSSでカラーとサイズを変更しています。

現在の項目にリンク

ここでは今現在開いてるページにもリンクを貼るか貼らないかの設定ができます。

このブログではチェックを外してます。

ホームページパンくず

[jin-yohaku10]

パンくずにホームページを含めるにチェックを入れる。

パンくずリストの１番最初をブログのトップページにするかの設定です。

title="Go to %title%."を削除or変更。

ホームページテンプレート欄のtitle="Go to %title%."を個人的には特に必要ないので削除していますが、titleが必要であれば変更などしてそのまま残しても大丈夫です。

２ヵ所の%title%を好きなものに変更。

ホームページテンプレート＆ホームページテンプレート（リンクなし）欄の%title%がデフォルトではブログのタイトルになっているため、［HOME］や［TOP］などわかりやすいものに変更しちゃいましょう。
もちろんそのままでも問題ありません。

Font Awesomeのアイコンを使えます。
Font Awesome

投稿タイプ

ここでは投稿の階層の表示など投稿タイトルのパンくずリストの設定ができます。

投稿テンプレート

投稿ページの記事タイトルの前にアイコンをつけたい場合、赤い部分(%htitle%の前)にコードを追加してください。

このブログでは、アイコンは入れずに投稿ページ（リンクなし）の先頭に<br>を入れて２行表示にしています。

投稿階層

投稿階層はカテゴリーのままでOKです。
好みがあれば他のに変えましょう。

タクソノミー

ここではカテゴリーやタグのパンくずリストの設定ができます。

カテゴリーテンプレート

カテゴリー名の前にアイコンをつけたい場合、赤い部分(%htitle%の前)にコードを追加してください。

その他

ここでは404ページなどのパンくずリストの設定ができます。
そのままでOKです。
[jin-yohaku10]

Breadcrumb NavXTの表示方法

[jin-fusen3 text=”　PHP　“]

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

[jin-yohaku10]
本来は、header.phpやsingle.phpに上のコードを追加するのがいいと思うんですが、今回はウィジェットを使って手っ取り早く設置する方法を書いていきたいと思います。

ウィジェットで設置する方法

[jin-yohaku10]

WordPressの管理画面から、［外観］→［ウィジェット］をクリック。
利用できるウィジェットにある［Breadcrumb NavXT］を右にある［記事上部］にドラッグ。
完了をクリック。

[jin-yohaku35]
これで設置は完了です✨
あっとゆう間に表示できちゃいます。

記事タイトルを非表示にする方法

[jin-yohaku10]
[chat face=”mirai_002.png” name=”mirai” align=”left” border=”none” bg=”pink” style=”maru”]パンくずリストを上に持ってきたら、パンくずリストと記事タイトルで同じ文が並んでうっとうしいから、パンくずリストの記事タイトルは表示しないようにしたいなー。[/chat]

これだと長いタイトルが二重に表示されるので、ちょっとしつこい感じがしちゃいますよね。
なのでパンくずリストの記事タイトルを非表示にしたいと思います。

[jin-fusen3 text=”　PHP　“]

function foo_pop($trail)
{
{
array_shift($trail->trail);
}
}
add_action('bcn_after_fill', 'foo_pop');

[jin-yohaku10]
WordPressの管理画面から、［外観］→［テーマエディター］に進んでこのコードを使用するテーマのfunctions.phpに追加してください。

[jin_icon_caution color=”#f13d54″ size=”23px”]

ミスがあるとサイトが表示されなくなるので必ずバックアップを取ってから行ってくださいね😌

[jin-yohaku25]

パンくずリストのカスタマイズ＆まとめ

このブログでのパンくずリストのカスタマイズはこちら。

パンくずリストの表示を記事上に。
区切りの記号をアイコンに変更。
HOMEとカテゴリー名の前にアイコンを追加。
記事タイトルを非表示に。

記事下にあるよりも記事上にあることで目にとまりやすくなりました！
ぜひパンくずリストを設置してブログの回遊率を高めましょう✨

［※追記］
この記事ではパンくずの区切りで区切りのマークを設定してますが、パンくずリストのタイトルを非表示にした場合、最後のカテゴリー名のあとに区切りが表示されなかったため、現在はホームページテンプレートとカテゴリーテンプレートの１番最後にアイコンを設定しています。

それから固定ページにもパンくずリストを表示したかったため、現在はウィジェットではなくsingle.phpとpage.phpに設置しています。

【JIN/カスタマイズ】プラグイン『Breadcrumb NavXT』でパンくずリストを記事タイトル上に表示＆カスタマイズ方法。

Breadcrumb NavXTのインストール

Breadcrumb NavXTの設定