プラグイン

【WordPressプラグイン】パンくずリストの表示ができる「Breadcrumb NavXT」の設定方法

2020年4月19日

【WordPressプラグイン】パンくずリストの表示ができる「Breadcrumb NavXT」の設定方法

皆さんはウェブサイトに、パンくずリストを表示させていますか?

沢山のページがあっていくつもの階層に分かれているウェブサイトであれば、パンくずリストは、ユーザーが今どこにいるかを分かりやすくしてくれます。

また前の画面にスムーズにアクセスできたりユーザビリティの観点であったほうが良いと考えられています。

さらにSEO的にもパンくずリストは表示されていた方が良いと言われているので、WordPressで構築したウェブサイトであれば、Breadcrumb NavXTを利用してウェブサイトにパンくずリストを表示させましょう。

Breadcrumb NavXTとは

【WordPressプラグイン】パンくずリストの表示ができる「Breadcrumb NavXT」の設定方法

Breadcrumb NavXTの概要

Breadcrumb NavXTはユーザーがウェブサイトのどこにいるのか分かりやすくするパンくずリストの表示ができるプラグインです。表示する階層には、カテゴリーやタグを含めること設定も可能です。

Breadcrumb NavXTの特徴

  • ウェブサイトにパンくずリストの表示ができる

Breadcrumb NavXTのダウンロード先

【WordPress公式ページ】Breadcrumb NavXT
https://ja.wordpress.org/plugins/breadcrumb-navxt/

Breadcrumb NavXTの設定

テーマエディターにコードを追加する

まず最初に、現在利用しているテーマに、Breadcrumb NavXTで表示させるパンくずリストの専門コードを追加する必要があります。

Breadcrumb NavXTのWordPressメニュー

WordPressの左メニューから「外観」>「テーマエディター」を選択します。

WordPressのテーマエディター

「テーマエディター」の画面に遷移したら、右側のの「編集するテーマを選択」で利用しているテーマ名を選択します。選択後にその下に表示される、「テーマヘッダー(header.php)」をクリックします。

WordPressのテーマエディターでテーマファイルを選択

クリックすると左側の「テーマヘッダー(header.php)」のソースコードが切り替わります。

WordPressのテーマファイルにコード追加

「テーマヘッダー(header.php)」のソースコードの一番下までスクロールして、下記のソースコードを追加します。ソースコードの追加が完了したら、左下の「ファイルを更新」の青いボタンをクリックします。

<div class="breadcrumbs" typeof="BreadcrumbList" ">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>
Breadcrumb NavXTのプレビュー

ソースコードの追加が完了すると、ウェブサイトにパンくずリストが表示されています。

ただ、表示はされているもの思っていたのと違う、、、と感じられた方もいるのではないでしょうか。

単純にBreadcrumb NavXTのソースコードを追加しただけでは、デザイン的に微妙ですので、デザインを調整するCSSをカスタマイズする必要があります。

パンくずリストの表示をCSSで調整する

WordPressの外観のカスタマイズ

WordPressの左メニューから「外観」>「カスタマイズ」を選択します。

WordPressカスタマイズ画面

カスタマイズでは、WordPressで利用しているテーマのデザインや機能などを設定することができます。設定できる範囲は、利用しているテーマによって制限があります。

今回はデザインを調整するため、「追加CSS」を選択します。

WordPressカスタマイズの追加CSSの編集

追加CSSに下記のソースコードを追加します。パンくずリストの最大の横幅と左右上下のマージンを追加するCSSになります。

CSSを追加すると、ウェブサイトに反映される前に、画面右側にプレビューが表示されるので、調整しながら作業を進めましょう。

追加後は、画面上部の「公開」の青いボタンをクリックして、ウェブサイトに反映させてください。

div.breadcrumbs {
  max-width: 1000px;
  margin:20px auto;
}

WordPress管理画面でBreadcrumb NavXTの設定変更

テーマエディターにソースコードを追加してCSSを調整すれば、基本的に設定は完了です。しかし、微妙に気になる部分をWordPressのBreadcrumb NavXTの設定画面から変更することができます。

Breadcrumb NavXTのWordPressメニュー

WordPressの左メニューから「設定」>「Breadcrumb NavXT」を選択します。

一般

Breadcrumb NavXTの一般設定

「パンくずの区切り」では、パンくずの区切っている文字を変更することができます。

デフォルトでは「%gt;」と入力されていて、「>」のマークがウェブサイトに表示されます。

Breadcrumb NavXTのホームページのパンくず設定

「ホームページパンくず」では、パンくずリストの一番左側にホームページの文字を含めるかを設定することができます。不要な方はチェックを外してください。

「ホームページテンプレート」「ホームページテンプレート(リンクなし)」では、パンくずリストの一番左の文字を任意の文字に変更することができます。デフォルトでは、サイトタイトルが表示されるように置き換え文字(%htitle%)が入っています。

「ホームページテンプレート」変更前

<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current>
<span property="name">%htitle%</span></a>
<meta property="position" content="%position%"></span>

「ホームページテンプレート」変更後

<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="Go to %title%." href="%link%" class="%type%" bcn-aria-current>
<span property="name">TOP</span></a>
<meta property="position" content="%position%"></span>

「ホームページテンプレート(リンクなし)」変更前

<span class="%type%">%htitle%</span>

「ホームページテンプレート(リンクなし)」変更後

<span class="%type%">TOP</span>

投稿タイプ

Breadcrumb NavXTの投稿タイプ設定

「投稿テンプレート」「投稿テンプレート(リンクなし)」も「ホームページテンプレート」「ホームページテンプレート(リンクなし)」と同じように、パンくずリストの一番左の文字を任意の文字に変更することができます。

「投稿階層」では、パンくずリストの中に「カテゴリー」「日付」などを含めるかを設定することができます。

Breadcrumb NavXTの固定ページ・メディアのパンくず設定

「ページテンプレート」「ページテンプレート(リンクなし)」「メディアテンプレート」「メディアテンプレート(リンクなし)」も「ホームページテンプレート」「ホームページテンプレート(リンクなし)」と同じように、パンくずリストの一番左の文字を任意の文字に変更することができます。

「メディア階層」では、メディアのパンくずリストの階層に「親投稿」か「日付」のどちらかを選択することができます。

タクソノミー

Breadcrumb NavXTのカテゴリー・タグ・投稿フォーマットのパンくず設定

「カテゴリーテンプレート」「カテゴリーテンプレート(リンクなし)」「タグテンプレート」「タグテンプレート(リンクなし)」「投稿フォーマットテンプレート」「投稿フォーマットテンプレート(リンクなし)」も「ホームページテンプレート」「ホームページテンプレート(リンクなし)」と同じように、パンくずリストの一番左の文字を任意の文字に変更することができます。

その他

Breadcrumb NavXTの投稿者のパンくず設定

「投稿者テンプレート」「投稿者テンプレート(リンクなし)」も「ホームページテンプレート」「ホームページテンプレート(リンクなし)」と同じように、パンくずリストの一番左の文字を任意の文字に変更することができます。

Breadcrumb NavXTの日付・404・検索のパンくず設定

「日付テンプレート」「日付テンプレート(リンクなし)」「検索テンプレート」「検索テンプレート(リンクなし)」も「ホームページテンプレート」「ホームページテンプレート(リンクなし)」と同じように、パンくずリストの一番左の文字を任意の文字に変更することができます。

Breadcrumb NavXTの使い方

Breadcrumb NavXTのプレビュー

Breadcrumb NavXTは設定が完了すれば、ウェブサイトに思ったようにパンくずリストを表示できます。

当サイトで申込みが多いプログラミングスクール・教室はこちら!

【1位】ポテパンキャンプ:Webエンジニア輩出率No1

【2位】CodeCamp:満足度96.6%のプログラミングレッスン

【3位】DMM WEBCAMP:プログラマー転職成功率98%

【4位】TechAcademy:プログラミングスクール受講者数No1

【5位】GEEK JOB:満足度・転職率が高い・20代社会人経験者向け

-プラグイン