JINカスタマイズ

JINでパンくずリストを表示させる&上に表示させる簡単な方法

パンくずリスト設定アイキャッチ

次世代タイトル下banner

JINカスタマイズで分からなかったら、とりあえずググる有川(@arikawa0812)です。

今日は

JINでパンくずリストを表示させる

上にパンくずリストを表示させる方法

をお届けします。

パンくずリストって何?

JIN使ってるけど、上には表示できないの?

というあなた!

ぜひ、御覧ください(*^^*)

ちなみに、
JIN「外観ーカスタマイズ」でブログ全体を整えたい場合は、↓こちら↓

customize
JINでブログをカスタマイズ!初心者でもわかりやすく画像つきで徹底解説JINのカスタマイズを画像つきで紹介!ヘッダー画像やディスクリプションなど1から10まで設定を解説します。...
↓ブログ運営に悩んでいるあなたはクリック!↓ 次世代アイキャッチ2

1.パンくずリストとは

パンくずリストとは、ページの下部や上部に表示され、

「その記事が、ブログ内でどの階層にあるか」を表示するものです。

パンくずリスト

上の画像でいくと

HOME(トップ)
 ┗その他乙女ゲーム(カテゴリ)
   ┗サイドキックス(作品名)
     ┗記事タイトル

という階層だとわかります。

なぜ設定するのかというと…

  • 読者にブログのどこにいるのか伝える
  • 検索エンジン(Googleなど)のロボット(クローラー)がブログ内を巡回しやすくする

という2つの役割のためです。

ですので、
特別な理由がない限りは表示していきましょう。

2.JINでパンくずリストを設定する方法

JINでパンくずリストを表示するのはとても簡単。1分で終わります。

  1. 「外観>カスタマイズ>その他設定」を開く
  2. パンくずリストを「表示」に設定する。
JINパンくずリスト

これで、記事の下に表示されるようになります。

JINパンくずリスト表示例ページ下部に表示されています

しかし、

「記事の下だと読者が見にくいのでは?」

そう感じたら、
上に表示させる設定をしてみましょう!

このまま下で説明していきます。

3.パンくずリストを上に表示させる方法

パンくずリストを上に表示させるには、プラグインを使います。

プラグイン設定後は↓こんな感じ↓になります。

パンくずリスト見本
このように上部に表示することはできるんですが…CSSでカスタマイズしないとどうにもダサいので、私はJINのデフォルトパンくずリストのみを使用しています。

 

で、今回使うプラグインは…

Breadcrumb NavXT

 

プラグイン画像

これをインストールして、有効化します。

有効化したあとは、

  1. パンくずリストの設定をする
  2. 表示させる

の2ステップでやっていきます。

パンくずリストの設定

まずは、パンくずリストの設定をするので、

「設定」>「Breadcrumb NavXT」をクリック。

設定の仕方1
パンくずの区切り

最初は「>」という文字(表示させると「>」という区切りが入る)が入っているので、これを消して任意の記号に変えます。

私はスラッシュ(/)だけにしました。

カテゴリの区切り
現在の項目にリンク

チェックを入れると、前の階層だけでなく、今見ているページにもリンクが貼られるようになります。

これは任意でOKです。私はチェックを入れてません。

ホームページパンくず

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

ホームページ=ブログのトップ画面なので、トップページに戻れるようになります。

また、最初の設定では「ホーム」という文字が「%title%」になっているので、下記の4か所を変えましょう。

ホームに変える

途中にある「Go to %title%」は「Go to」の部分も変えちゃいましょう。そのままでもいいですが・笑 

「ホームへ」 とかがいいですかね。

「ホーム」じゃなくても、トップやHomeなど、文字は読者が分かりやすければOKです。

では一番下にある「変更を保存」を押して、最後の項目へ行きます。

投稿階層
階層設定

パンくずリストに表示させる階層を選択できます。

初期設定で「カテゴリー」になっていると思いますが、確認しておきます。

 

以上で設定は終わりです!

あとは、記事上部に表示させる設定を行います。

表示させる

JINでは、ウィジェットを使って表示させます。

本来であれば、header.phpに下記コードを入力するのですが…

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

JINだと反映されなかったので(なにかわかればコメントなどで教えてください~)

ウィジェットを使います。

とはいえ、作業は簡単です。30秒もあれば終わります。

ウィジェットで追加
ウィジェット

「記事上部」にウィジェットのパーツ「Breadcrumb NavXT」をドラッグして入れてあげましょう。

これでパンくずリストを上部に表示することができました!

JINにもともと入ってるパンくずリストは?

このプラグインで、上部に表示させても、

JINの「外観」>「カスタマイズ」>「その他設定」でパンくず表示をONにしておけば、下にも表示されるようになります。

プラグイン設定の参考記事:https://techacademy.jp/magazine/7297

4.パンくずリストを設定するときの注意

最後に、パンくずリストについての注意点です。

注意点

  • ブログのカテゴリーをわかりやすくしておく
  • カテゴリにSEOキーワードが含まれるようにする

パンくずリストは、
読者にとって道案内と同じです。

パンくずリストで表示させているカテゴリーの名前がわかりにくいと、意味がありません。

「どんな記事があるカテゴリーなのか」

が、ひと目見て分かるようなカテゴリー名にしておきましょう。

そして、
カテゴリー自体にもキーワードを含めておくのが吉です。

5.まとめ

以上!

JINでパンくずリストを表示させる方法

上部に表示させる方法

でした。

こういう細かい設定は、やりだすとキリがないのでほどほどにね!

では、ここまでお読みくださりありがとうございました!

jisedai-cta

そんなあなたへ!

私が趣味ブログで

わずか2ヶ月

収益0→1万円になった秘訣を公開中★

↓ちょっとでも興味があったらLet’s クリック!↓

 

記事を購読する!
follow us in feedly

COMMENT

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

CAPTCHA