Breadcrumb NavXTはパンクズリストを設置するプラグイン

Breadcrumb NavXTとは

Breadcrumb NavXTは、WordPressサイトにパンくずリスト（ブレッドクラム）を簡単に追加できる非常に人気のあるプラグインです。

パンくずリストとは？

パンくずリストとは、ウェブサイトを訪れたユーザーが今どのページにいるのか、そのページがサイト全体のどの位置にあるのかを示すナビゲーションリンクのことです。通常、ウェブサイトの上部（ヘッダーの下あたり）に表示され、以下のような形式が一般的です。

ホーム > カテゴリ名 > サブカテゴリ名 > 現在のページ名

Breadcrumb NavXTの主な機能と特徴：

• 自動生成: 投稿、固定ページ、カテゴリ、タグ、カスタム投稿タイプなど、WordPressのコンテンツタイプに基づいてパンくずリストを自動的に生成します。
• カスタマイズ性:
  • パンくずリストの各項目（ホーム、セパレータなど）のテキストやリンクを細かく設定できます。
  • 特定の投稿タイプやタクソノミーに対して、独自のテンプレートや表示ルールを設定できます。
  • 階層表示の有無、表示する深さなどを調整できます。
• 構造化データ（Schema.org）対応: 生成されたパンくずリストにSchema.orgのパンくずリストマークアップを自動的に追加します。これにより、検索エンジンがサイトの構造を理解しやすくなり、SEO対策にも貢献します。
• 柔軟な出力:
  • ウィジェットとしてサイドバーなどに配置できます。
  • テーマのテンプレートファイルにショートコードやPHPコードを挿入して、任意の場所に表示できます。
  • CSSで自由にスタイルを適用できます。
• 多言語対応: 多くの言語に対応しており、様々なWordPressサイトで利用されています。

Breadcrumb NavXTを使うメリット：

• ユーザーエクスペリエンスの向上: ユーザーがサイト内で迷子になるのを防ぎ、現在の位置を把握しやすくなります。
• サイトの視認性向上: ユーザーがサイトの構造を理解しやすくなり、回遊率の向上にもつながります。
• SEO対策: 構造化データに対応しているため、検索エンジンがサイト構造を正確に認識し、検索結果での表示向上に貢献する可能性があります。

利用方法：

1. WordPressの管理画面から「プラグイン」>「新規追加」に進みます。
2. 検索窓に「Breadcrumb NavXT」と入力して検索します。
3. 表示されたら「今すぐインストール」をクリックし、有効化します。
4. 有効化後、「設定」>「Breadcrumb NavXT」から各種設定を行います。
5. テーマのテンプレートファイルに適切なコード（通常は<?php if(function_exists('bcn_display')) { bcn_display(); } ?>のようなもの）を挿入するか、ウィジェットとして配置します。

WordPressサイトにパンくずリストを導入したい場合、Breadcrumb NavXTは非常に強力で使いやすい選択肢となります。

※最新の情報を公式ページで確認ください

Breadcrumb NavXTの使い方

「Breadcrumb NavXT」は、WordPressサイトにパンくずリストを簡単に追加できる人気のプラグインです。SEO対策にも有効で、ユーザーのサイト内回遊を助ける役割も果たします。

以下に、Breadcrumb NavXTの基本的な使い方をステップバイステップで説明します。

1. プラグインのインストールと有効化

1. WordPress管理画面にログインします。
2. 左側のメニューから「プラグイン」→「新規追加」をクリックします。
3. 右上の検索窓に「Breadcrumb NavXT」と入力し、検索します。
4. 検索結果に表示された「Breadcrumb NavXT」を見つけ、「今すぐインストール」をクリックします。
5. インストールが完了したら、「有効化」をクリックします。

2. パンくずリストの表示設定

Breadcrumb NavXTを有効化したら、パンくずリストをサイトに表示させるための設定を行います。主に以下の2つの方法があります。

2.1. テーマファイルにPHPコードを記述する方法（推奨）

この方法が最も一般的で、パンくずリストをサイトの好きな場所に配置できます。

1. WordPress管理画面の左側メニューから「外観」→「テーマファイルエディター」をクリックします。
2. パンくずリストを表示したい場所（通常はheader.php、single.php、page.phpなど）に対応するテーマファイルを開きます。サイトのレイアウトによって適切なファイルが異なります。
   • 投稿記事の個別ページ: single.php
   • 固定ページ: page.php
   • トップページやアーカイブページ: index.php、archive.php、category.phpなど
3. パンくずリストを表示したい場所に以下のPHPコードを貼り付けます。

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

*divタグで囲むことで、CSSでのスタイリングがしやすくなります。typeofとvocabはSchema.orgのパンくずリスト構造を伝えるための記述です。

ファイルを保存し、サイトを確認します。

2.2. ウィジェットを使用する方法（サイドバーなど）

サイドバーなどのウィジェットエリアにパンくずリストを表示したい場合に利用します。

1. WordPress管理画面の左側メニューから「外観」→「ウィジェット」をクリックします。
2. 利用可能なウィジェットの中に「Breadcrumb NavXT」があることを確認します。
3. 「Breadcrumb NavXT」ウィジェットを、パンくずリストを表示したいウィジェットエリア（例: サイドバー）にドラッグ＆ドロップします。
4. ウィジェットのタイトルなどを設定し、「保存」をクリックします。

3. Breadcrumb NavXTの設定（詳細カスタマイズ）

Breadcrumb NavXTは、管理画面から細かく設定をカスタマイズできます。

1. WordPress管理画面の左側メニューから「設定」→「Breadcrumb NavXT」をクリックします。
2. 設定画面にはいくつかのタブがあります。
   • 一般 (General):
     • パンくずの区切り: パンくずリストの各項目の区切り文字（例: >、>>、→など）を変更できます。
     • ホームページパンくず: パンくずリストの先頭に「ホーム」などのトップページへのリンクを含めるかどうかを設定します。「パンくずにホームページを含める。」にチェックを入れると表示されます。
     • ホームページテンプレート: ホームページの表示名（デフォルトはサイトタイトル）を「ホーム」や「TOP」などに変更できます。%htitle%を任意のテキストに置き換えます。
     • 現在の項目にリンク: 現在表示しているページ名をパンくずリストの最後の項目として表示し、それにリンクを付けるかどうかを設定します。
   • 投稿タイプ (Post Types):
     • 投稿、固定ページ、カスタム投稿タイプごとに、パンくずリストの表示方法（階層構造）を設定できます。例えば、投稿ページのパンくずリストにカテゴリーを含めるか、親ページを含めるかなどを選択できます。
   • タクソノミー (Taxonomies):
     • カテゴリーやタグなどのタクソノミーごとに、パンくずリストの表示設定ができます。
   • その他 (Misc):
     • サイトマップ、検索結果ページ、404エラーページなどのパンくずリストの表示を設定できます。
3. 変更を適用したら、必ず「変更を保存」をクリックしてください。

4. CSSでのスタイリング

パンくずリストの見た目は、テーマのCSSファイルでカスタマイズできます。

上記でdivタグにbreadcrumbsクラスを追加したように、bcn_display()関数が出力するHTMLには、デフォルトでクラスが付与されています。これを利用してCSSでスタイルを設定します。

/* パンくずリスト全体のスタイル */
.breadcrumbs {
    font-size: 0.9em;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 5px;
}

/* 各パンくず項目のスタイル */
.breadcrumbs span {
    margin: 0 5px;
}

/* 区切り記号のスタイル */
.breadcrumbs span.separator {
    color: #999;
}

/* リンク付きパンくずのスタイル */
.breadcrumbs a {
    color: #337ab7;
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* 現在のページのスタイル（リンクなしの場合） */
.breadcrumbs span.current-item {
    font-weight: bold;
    color: #333;
}

これらのCSSを、テーマのstyle.cssファイルや、WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」に記述します。

よくある質問とトラブルシューティング

• パンくずリストが表示されない:
  • プラグインが有効化されているか確認してください。
  • PHPコードがテーマファイルの正しい場所に記述されているか確認してください。
  • キャッシュプラグインを使用している場合、キャッシュをクリアしてみてください。
• パンくずリストの階層がおかしい:
  • Breadcrumb NavXTの設定画面で、各投稿タイプやタクソノミーの階層設定を確認してください。
  • 親ページが正しく設定されているか確認してください（固定ページの場合）。

Breadcrumb NavXTは非常に柔軟なプラグインなので、これらの基本的な使い方を参考に、ご自身のサイトに合わせてカスタマイズしてみてください。

Breadcrumb NavXTの注意点

Breadcrumb NavXTは非常に人気があり、多機能なパンくずリスト生成プラグインですが、使用する上でいくつか注意点があります。以下に主なものを挙げます。

1. テーマとの互換性:

• Breadcrumb NavXTは、ほとんどのWordPressテーマで動作しますが、テーマによっては標準でパンくずリスト機能が内蔵されている場合があります。その場合、Breadcrumb NavXTとテーマのパンくずリスト機能が競合し、重複して表示されたり、どちらか一方が正しく機能しなかったりする可能性があります。
• 新しいテーマを導入したり、テーマをアップデートした際には、Breadcrumb NavXTが正しく動作するかどうか確認が必要です。場合によっては、テーマのパンくずリスト機能を無効にするか、Breadcrumb NavXTの設定を調整する必要があります。

2. 設定の複雑さ:

• Breadcrumb NavXTは非常に多くの設定項目を持っており、細かくカスタマイズできる反面、初心者には設定が少し複雑に感じられるかもしれません。
• 特に、投稿タイプ、タクソノミー、アーカイブページなど、それぞれのページタイプに応じたパンくずリストの表示ルールを設定する際には、WordPressの階層構造を理解しているとスムーズに進められます。
• 意図しない表示になった場合は、設定を見直すのに時間がかかることがあります。

3. SEOへの影響と構造化データ:

• パンくずリストはSEOに良い影響を与える要素の一つですが、Breadcrumb NavXTが生成するパンくずリストが適切に構造化データ（Schema.org）としてマークアップされているか確認することが重要です。
• 最新バージョンでは、Googleが推奨するJSON-LD形式での構造化データ出力に対応していますが、古いバージョンや設定によっては正しく出力されていない場合があります。Googleの構造化データテストツールなどで確認することをおすすめします。
• もし構造化データが正しくマークアップされていない場合、検索エンジンがパンくずリストの情報を適切に認識できず、検索結果での表示に影響が出る可能性があります。

4. パフォーマンスへの影響:

• 一般的にはパフォーマンスに大きな影響を与えることはありませんが、サイトの規模が非常に大きかったり、キャッシュプラグインとの組み合わせによっては、わずかながらロード時間に影響を与える可能性もゼロではありません。
• 特に多数のパンくずリストが生成されるような複雑なサイト構成の場合、注意が必要です。

5. 日本語環境での注意点:

• Breadcrumb NavXT自体は日本語に対応していますが、スラッグ名やカテゴリー名に日本語を使用している場合、パーマリンクの設定によってはパンくずリストのURLが正しく生成されないことがあります。
• WordPressのパーマリンク設定とパンくずリストの生成ルールが一致しているか確認しましょう。

6. ショートコードとウィジェットの利用:

• パンくずリストを表示する方法として、テーマファイルに直接コードを記述する方法が推奨されていますが、ウィジェットやショートコードを利用することも可能です。
• しかし、ウィジェットやショートコードの場合、表示場所やCSSの調整がテーマの構造によって制限されることがあります。可能であれば、テーマの適切な位置にコードを挿入することを検討しましょう。

7. 最新バージョンへのアップデート:

• セキュリティの脆弱性対策や新機能の追加、バグ修正のため、常に最新バージョンにアップデートすることをおすすめします。
• ただし、アップデート前には必ずバックアップを取り、アップデート後にサイトの表示や機能に問題がないか確認するようにしてください。

まとめ

Breadcrumb NavXTは非常に優れたプラグインですが、これらの注意点を理解し、適切に設定・管理することで、より効果的にパンくずリストを活用し、ユーザーエクスペリエンスとSEOを向上させることができます。インストール後は、特に設定項目をよく確認し、ご自身のサイトに合わせて調整することが重要です。