ブログ情報

JINでパンくずリストを記事上に綺麗に配置する方法【WordPress, Breadcrumb NavXT】

こんにちは、陽翔です。

本日はパンくずリスト記事タイトル上に綺麗に配置する方法をご紹介します!

似た内容のブログはありますが、
このブログの肝は記事内のタイトル上綺麗に配置する方法です。
またトップページには表示させないようにしています。

このブログと同じ構成になるようにご説明します。
私はWordPressのJINを使用しておりJINでの説明になりますが、他のテーマの方にも参考になると思います。

注意点:子テーマで実施してください。説明は割愛します。設定は下記を参照ください。
https://www.javadrive.jp/wordpress-theme/jin/index3.html

パンくずリストとは

百聞は一見に如かずということで、まずはこの記事のタイトル上を見てください。

ホーム > ブログの作り方 >  JINでパンくずリストを記事上に綺麗に配置する方法【WordPress, Breadcrumb NavXT】
となっているでしょう?

このように記事の階層を示し、クリックするとそのページに飛べるのがパンくずリストです。

パンくずリストのメリット

メリットは主に二点です。細かく説明しませんが、何か良さそうだと思っていただければ大丈夫です。

  • ユーザーがどのカテゴリのページを見ているかを把握できる。カテゴリに飛べる。(ユーザビリティの向上)
  • 検索エンジン(Googleなど)のクローラーがブログ内を巡回しやすくなり評価されやすくなる(SEOの向上)。

パンくずリストの設定の仕方

設定するだけならとても簡単です。

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

これでまずはブログの一番下に表示されます。SEO対策もひとまずOKです。

パンくずリストを編集する

Breadcrumb NavXT(無料)をインストール

まずプラグイン(無料)が必要になります。Breadcrumb NavXTをインストールして有効化してください。

Breadcrumb NavXTでパンくずリストを編集する

①ダッシュボードの「設定」>「Breadcrumb NavXT」をクリック。

(下の図参照)
②「パンくずの区切り」はデフォルトで「>」となっています。これは「>」を表していて、お好きな文字に変更可能です。全部消して文字だけ入力してください。

③「現在の項目にリンク」は今見ているページも含むようになります。お好きに設定してください。

④「分割ページパンくず」は複数ページにわたる投稿一覧やアーカイブ記事一覧の2ページ目以降を閲覧中であることを示すかどうかです。最初はチェック入れる必要はないと思います。

(下の図参照)
⑤「ホームページパンくず」は階層構造にトップページを含むかどうかです。入れておいたほうがいいと思います。
またその時「ホームページテンプレート」の「Go to %title%」を「ホームへ」に変え、「%htitle%」を「ホーム」等に変えると見やすいかなと思います(計3か所)。デフォルトではブログタイトルがそのまま出ます。「home」とか好きな言葉でもいいと思います。

⑥これより下はデフォルトでいいです。

⑦「投稿タイプ」タブへ移動します。デフォルトでいいですが、投稿階層が「カテゴリ」になっているかだけ確認してください。変更できますがカテゴリが一番わかりやすいと思います。

忘れずに一番下の「変更を保存」を押してください。

パンくずリストの設定は以上になります。

パンくずリストを記事タイトル上に綺麗に配置する
↑ここがポイント!

パンくずリストの位置を記事内のタイトルの上にする。

ここでは記事内のタイトルの上に配置する方法をお教えします。またトップページには表示させないようしています。

①親テーマから「single.php」をダウンロードし、子テーマにアップロードする。
手順は以下のサイトを参照ください。header.phpでの説明ですが、同じ操作方法です。
https://yuki-hirose.com/wordpress-add-file/

②ダッシュボードの「外観」>「テーマエディター」をクリック。右の「テーマファイル」から「個別投稿(single.php)」をクリック。
③15行目と16行目の間に以下のコードをコピー&ペーストする。
④一番下の「ファイルを更新」を忘れずにクリックする。

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

これで記事内のタイトルの上に表示することが出来ます!

綺麗に整える

①ダッシュボードの「外観」>「カスタマイズ」をクリック。「追加 CSS」をクリックする。
②以下のCSSを追加し、「公開」をクリック。

/* 子テーマ */
div.breadcrumbs  {
	 margin-top: -20px;
   margin-bottom: 10px;
	 font-size: 0.9rem;
} 

これで僕の記事と同じパンくずリストが表示されます。
後は調節してみてください。CSSで検索すれば出来ると思います。

まとめ

以上、お疲れ様でした!
いかがでしたでしょうか?上手くいきましたか?
もし何かご不明な点等ございましたら、コメント欄かお問い合わせからご連絡ください。

パンくずリストを設定しておくとSEOとしても有利ですし、
綺麗に上に配置すると見栄えがいいですよね。
何より少しレベルアップした気がするのでおすすめです!

皆さんぜひ実施してみてください!

そろそろアフィリエイトも登録してみませんか?
使いやすいオススメを以下にまとめました。

アフィリエイトサイトのおすすめまとめ(どんどん入れよう!)【ブログでのやり方/無料】今回は使用しているアフィリエイトの紹介をします。人によっては登録していないものもあると思います。会員費を取られることもないのでどんどん登録しましょう!...

COMMENT

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

CAPTCHA