趣味

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

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

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

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

mirai
mirai
記事下だと見にくいから
パンくずリストの表示を
記事上にしたいな✨

と思い、プラグインを使って記事上に表示して
カスタマイズする方法を書いていきたいと思います( ˙꒳​˙ᐢ )

今回このブログではWordPressプラグインの
『Breadcrumb NavXT』を使ってカスタマイズしていきます。

Breadcrumb NavXTのインストール

まずはプラグインのインストールです。

  1. WordPressの管理画面から、[プラグイン][新規追加]をクリック。
  2. 検索ボックスにBreadcrumb NavXTと入力。
  3. 今すぐインストールをクリック。
  4. 有効化をクリック。

Breadcrumb NavXTの設定

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

一般

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

パンくずの区切り

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

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

このブログでもFont Awesomeを使っていて
CSSでカラーを変更しています。

現在の項目にリンク

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

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

ホームページパンくず

  1. パンくずにホームページを含めるにチェックを入れる。
  2. パンくずリストの1番最初をブログのトップページにするかの設定です。

  3. title="Go to %title%."を削除or変更。
  4. 個人的には特に必要ないので削除していますが、titleが必要であれば変更などしてそのままで。

  5. 2ヵ所の%title%を好きなものに変更。
  6. デフォルトではパンくずリストの先頭がブログのタイトルになっているため、[HOME]や[TOP]など、わかりやすいものに変更しちゃいましょう。
    Font Awesomeのアイコンも使えます。
    Font Awesome

投稿タイプ

ここでは投稿の階層の表示などを設定できます。

投稿テンプレート

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

このブログでは、投稿ページ(リンクなし)の先頭に<br>を入れて2行表示にしています。

投稿階層

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

タクソノミー

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

カテゴリーテンプレート

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

その他

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

Breadcrumb NavXTの表示方法

 PHP 
<?php
if ( function_exists( 'bcn_display' ) ) {
  bcn_display();
}
?>

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

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

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

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

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

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

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

だいぶ見やすくなりました。
ただ記事上にすると、パンくずリストと記事タイトルで同じ文が並んでうっとうしい感じもするので、その場合はパンくずリストの記事タイトルは表示しないようにした方がスッキリするかもしれません💦

ぜひパンくずリストを設置してブログの回遊率を高めましょう✨

COMMENT

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