Breadcrumb NavXTの設定【初期設定のナビ表示】

blog shotプラグイン

Breadcrumb NavXT(パンくずリスト)を表示させたい

『どうやってWordPressのページにわかりやすいパンくずリストを表示させるんだろう』と悩んでいませんか?

『せっかくブログを見てくれた読者にスムーズに別のページも見てもらいたい』と思っていませんか?

実は、この記事で紹介する『Breadcrumb NavXTの設定』を実践すると、誰でも簡単にわかりやすいパンくずリストを表示させることができます。

なぜなら、Breadcrumb NavXTというプラグインは最も多く使われているパンくずリスト用の代表的なプラグインで、誰にでもわかりやすく綺麗に表示してくれるからです。

この記事では、『Breadcrumb NavXTのインストールの仕方と設定の方法』を初心者にもわかりやすくご紹介します。

この記事を読み終えると、今後パンくずリストで悩むことは一切なく、ブログ作成に集中することができます。

それでは実際にやっていきましょう。

パンくずリストとは

パンくずリストとは、サイトのナビゲーション表示です。

パンくずは、ブログ記事の四隅近く(主に左上)に表示されていて、トップページからの階層を経て今のページが表示されています、という案内をします。

home>SEO>プラグイン(このような表示のものです)
一ツ柳天之介
一ツ柳天之介

ほとんどはカテゴリー別に区切られていて、これにより読者は同じカテゴリーの別のページを見つけやすくなりますし、Googleの検索クローラーが巡回するときもサイトを理解しやすくなります。

今回ご紹介するプラグイン「Breadcrumb NavXT」はパンくずリストをとても簡単に使用できるようになるプラグインです。

blog shot

※今お使いのテーマにパンくずリストがもともと装備されている場合は、よほど使いにくいとか日付設定用の欄がないなどの事情以外はこちらのプラグインをお使いになる必要はありません。

Breadcrumb NavXTのインストール

では実際にBreadcrumb NavXTをインストールしていきましょう。

  1. WordPressダッシュボード左メニュー『プラグイン』→『新規追加』をクリック

blog shot

・プラグイン追加画面になります

  • 右側のキーワード横の欄に「Breadcrumb NavXT」と入力
  • 画面下にプラグインが表示されるので『今すぐインストール』→『有効化』をクリック

blog shot

これでプラグインのインストールは完了です。

Breadcrumb NavXTの設定

ではインストールしたBreadcrumb NavXTの設定をしていきます。

  • WordPressダッシュボードの左メニュー『設定』→『Breadcrumb NavXT』をクリック

blog shot

・「Breadcrumb NavXT 設定」画面になります

  • 設定画面上部のタブ『一般』をクリック
  • ほとんどの設定はデフォルトのまま(画像と同じ)でOKです。

blog shot

特に問題がなければそのまま次の項目(コードを設定する)へ飛んでください。

追記

・投稿階層をカテゴリー別ではなく日付やタグ別に表示したい場合

  • 「Breadcrumb NavXT設定」画面の上部タブ『投稿タイプ』をクリック

「投稿階層」エリアより

  • カテゴリー
  • 日付
  • タグ
  • 親投稿

この中から表示したい項目を選び、丸印をクリックします。

タブ「タクソノミー(分類)」や、タブ「その他」なども特に変更の必要はありません。デフォルトのままで大丈夫です。

blog shot

最後に左下の『設定を保存』をクリック

Breadcrumb NavXTのコードを設定する

パンくずを表示されるには次のコードをヘッダー項目にコピー&ペーストする必要があります。

まずは下記のコードをコピーしましょう。

一ツ柳天之介
一ツ柳天之介

TOPページ以外の投稿ページ全てにパンくずリストを表示させるコードです

<?php if( !(is_home() || is_front_page() )): ?>
<div class="breadcrumb-area">
<?php
if ( function_exists( 'bcn_display' ) ) {
bcn_display();
}
?>
</div>
<?php endif; ?>

次にコピーしたコードを貼り付けます。

  • ダッシュボード『外観』→『テーマエディター』をクリック

blog shot

・「テーマ編集」画面になります

お使いのテーマに子テーマ(Child)がある場合は、右上部の「編集するテーマを選択」より、『〜Child』(子テーマ)を選択して『選択』をクリックください。

blog shot

  • 右側の「テーマファイル」エリアからテーマヘッダー項目(header.php)をクリック

※テーマによってファイル名の表記が若干異なりますが、「header.php」が含まれるファイルを探してください。

  • 本文内のソースの一番最後に先ほどコピーしたコードをペーストします。(青いエリアがペーストしたところです)
  • 左下の『ファイルを更新』をクリック

blog shot

ファイルの更新に成功しました、と出たら完了です。

blog shot

※ファイルエラーですと表示された場合には元のコードをきちんとコピーできていないか、コピーするページを間違っている可能性があります。一度コードを消して保存し直した後、やり直しましょう。

完了したら、ブログの投稿ページできちんと表示されているか確認してみましょう。

TOPページ以外の投稿ページ左上にパンくずリストが表示されていると思います。

blog shot

これでWordPressブログの投稿ページにパンくずリストを表示させることができました。

これによってあなたのブログを見に来た読者がページを迷うことなく希望するカテゴリーのページへスムーズに移行してくれます。

Googleの検索クローラーもブログの設計がわかりやすくなって巡回しやすくなったと思います。

あとがき

以上になります。いかがでしたでしょうか。

この記事『Breadcrumb NavXTの設定』によって、読者にわかりやすいパンくずを設置し、多くのかたがあなたのブログを楽しんでくれることでしょう。

 

一ツ柳天之介
一ツ柳天之介

ブログやサイトの基本的な設計に必要なプラグイン(初期からインストールしておくとすごく楽な設定)は、あといくつかあります。

ブログで使用する写真の取り扱いに関して意外と知られてない事や、SEO対策として必要不可欠なプラグインなど、初心者でも簡単に設定できるように記載してありますので時間があるときに確認してみてください。

それではまたお会いしましょう。

一ツ柳天之介でした。

link photo

 

car

blog shot

 

 

タイトルとURLをコピーしました