Breadcrumb NavXTはパンクズリストを設置するプラグイン
Breadcrumb NavXTとは
Breadcrumb NavXTは、WordPressサイトにパンくずリスト(ブレッドクラム)を簡単に追加できる非常に人気のあるプラグインです。
パンくずリストとは?
パンくずリストとは、ウェブサイトを訪れたユーザーが今どのページにいるのか、そのページがサイト全体のどの位置にあるのかを示すナビゲーションリンクのことです。通常、ウェブサイトの上部(ヘッダーの下あたり)に表示され、以下のような形式が一般的です。
ホーム > カテゴリ名 > サブカテゴリ名 > 現在のページ名
Breadcrumb NavXTの主な機能と特徴:
- 自動生成: 投稿、固定ページ、カテゴリ、タグ、カスタム投稿タイプなど、WordPressのコンテンツタイプに基づいてパンくずリストを自動的に生成します。
- カスタマイズ性:
- パンくずリストの各項目(ホーム、セパレータなど)のテキストやリンクを細かく設定できます。
- 特定の投稿タイプやタクソノミーに対して、独自のテンプレートや表示ルールを設定できます。
- 階層表示の有無、表示する深さなどを調整できます。
- 構造化データ(Schema.org)対応: 生成されたパンくずリストにSchema.orgのパンくずリストマークアップを自動的に追加します。これにより、検索エンジンがサイトの構造を理解しやすくなり、SEO対策にも貢献します。
- 柔軟な出力:
- ウィジェットとしてサイドバーなどに配置できます。
- テーマのテンプレートファイルにショートコードやPHPコードを挿入して、任意の場所に表示できます。
- CSSで自由にスタイルを適用できます。
- 多言語対応: 多くの言語に対応しており、様々なWordPressサイトで利用されています。
Breadcrumb NavXTを使うメリット:
- ユーザーエクスペリエンスの向上: ユーザーがサイト内で迷子になるのを防ぎ、現在の位置を把握しやすくなります。
- サイトの視認性向上: ユーザーがサイトの構造を理解しやすくなり、回遊率の向上にもつながります。
- SEO対策: 構造化データに対応しているため、検索エンジンがサイト構造を正確に認識し、検索結果での表示向上に貢献する可能性があります。
利用方法:
- WordPressの管理画面から「プラグイン」>「新規追加」に進みます。
- 検索窓に「Breadcrumb NavXT」と入力して検索します。
- 表示されたら「今すぐインストール」をクリックし、有効化します。
- 有効化後、「設定」>「Breadcrumb NavXT」から各種設定を行います。
- テーマのテンプレートファイルに適切なコード(通常は
<?php if(function_exists('bcn_display')) { bcn_display(); } ?>
のようなもの)を挿入するか、ウィジェットとして配置します。
WordPressサイトにパンくずリストを導入したい場合、Breadcrumb NavXTは非常に強力で使いやすい選択肢となります。
利用数
WordPressプラグインBreadcrumb NavXTの有効インストール数は、90万件以上です。
これは、パンくずリスト(ウェブサイトの階層を示すナビゲーション)を生成するための、非常に人気のあるプラグインであることを示しています。
利用料
WordPressプラグインのBreadcrumb NavXTは、無料で利用できます。
WordPressの公式プラグインディレクトリから無料でダウンロード・インストールして使用することが可能です。
ただし、検索結果には「無料で利用できる」「プレミアム有料オプションもある」という記述も見られましたが、現在の公式情報や多くの紹介記事では無料プラグインとして紹介されています。
有料の「拡張機能 (Extensions)」が提供されている可能性はありますが、基本的なパンくずリスト(Breadcrumb)機能は無料で利用できます。
もし、より高度な機能が必要な場合は、開発元の情報やプラグインの説明を改めて確認することをおすすめします。
Breadcrumb NavXTの使い方
「Breadcrumb NavXT」は、WordPressサイトにパンくずリストを簡単に追加できる人気のプラグインです。SEO対策にも有効で、ユーザーのサイト内回遊を助ける役割も果たします。
以下に、Breadcrumb NavXTの基本的な使い方をステップバイステップで説明します。
1. プラグインのインストールと有効化
- WordPress管理画面にログインします。
- 左側のメニューから「プラグイン」→「新規追加」をクリックします。
- 右上の検索窓に「Breadcrumb NavXT」と入力し、検索します。
- 検索結果に表示された「Breadcrumb NavXT」を見つけ、「今すぐインストール」をクリックします。
- インストールが完了したら、「有効化」をクリックします。
2. パンくずリストの表示設定
Breadcrumb NavXTを有効化したら、パンくずリストをサイトに表示させるための設定を行います。主に以下の2つの方法があります。
2.1. テーマファイルにPHPコードを記述する方法(推奨)
この方法が最も一般的で、パンくずリストをサイトの好きな場所に配置できます。
- WordPress管理画面の左側メニューから「外観」→「テーマファイルエディター」をクリックします。
- パンくずリストを表示したい場所(通常は
header.php
、single.php
、page.php
など)に対応するテーマファイルを開きます。サイトのレイアウトによって適切なファイルが異なります。- 投稿記事の個別ページ:
single.php
- 固定ページ:
page.php
- トップページやアーカイブページ:
index.php
、archive.php
、category.php
など
- 投稿記事の個別ページ:
- パンくずリストを表示したい場所に以下の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. ウィジェットを使用する方法(サイドバーなど)
サイドバーなどのウィジェットエリアにパンくずリストを表示したい場合に利用します。
- WordPress管理画面の左側メニューから「外観」→「ウィジェット」をクリックします。
- 利用可能なウィジェットの中に「Breadcrumb NavXT」があることを確認します。
- 「Breadcrumb NavXT」ウィジェットを、パンくずリストを表示したいウィジェットエリア(例: サイドバー)にドラッグ&ドロップします。
- ウィジェットのタイトルなどを設定し、「保存」をクリックします。
3. Breadcrumb NavXTの設定(詳細カスタマイズ)
Breadcrumb NavXTは、管理画面から細かく設定をカスタマイズできます。
- WordPress管理画面の左側メニューから「設定」→「Breadcrumb NavXT」をクリックします。
- 設定画面にはいくつかのタブがあります。
- 一般 (General):
- パンくずの区切り: パンくずリストの各項目の区切り文字(例:
>
、>>
、→
など)を変更できます。 - ホームページパンくず: パンくずリストの先頭に「ホーム」などのトップページへのリンクを含めるかどうかを設定します。「パンくずにホームページを含める。」にチェックを入れると表示されます。
- ホームページテンプレート: ホームページの表示名(デフォルトはサイトタイトル)を「ホーム」や「TOP」などに変更できます。
%htitle%
を任意のテキストに置き換えます。 - 現在の項目にリンク: 現在表示しているページ名をパンくずリストの最後の項目として表示し、それにリンクを付けるかどうかを設定します。
- パンくずの区切り: パンくずリストの各項目の区切り文字(例:
- 投稿タイプ (Post Types):
- 投稿、固定ページ、カスタム投稿タイプごとに、パンくずリストの表示方法(階層構造)を設定できます。例えば、投稿ページのパンくずリストにカテゴリーを含めるか、親ページを含めるかなどを選択できます。
- タクソノミー (Taxonomies):
- カテゴリーやタグなどのタクソノミーごとに、パンくずリストの表示設定ができます。
- その他 (Misc):
- サイトマップ、検索結果ページ、404エラーページなどのパンくずリストの表示を設定できます。
- 一般 (General):
- 変更を適用したら、必ず「変更を保存」をクリックしてください。
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を向上させることができます。インストール後は、特に設定項目をよく確認し、ご自身のサイトに合わせて調整することが重要です。
口コミ・評価
Googleで検索した結果、以下のような情報が見つかりました。
- 評価:WordPressの公式プラグインディレクトリでは、5つ星中4.6つ星と高い評価(108件の5つ星レビュー)を受けています。
- 特徴・利点:
- 詳細な設定が可能である。
- パンくずリストとして読み込むテンプレートに融通が利き、サイトの雰囲気を崩さずに導入できるため、おすすめとされている。
このプラグインは、多くのユーザーに利用され、設定の自由度が高く評価されているようです。
プラグインが最小でも魅力的なウェブサイトが作成できる
WordPressの有料テーマは、プラグインに関して有利になる点がいくつかあります。
主に、多機能性や開発者による配慮により、プラグインの数を減らしたり、特定の機能での競合や相性を気にしなくて済むという利点があります。
■有料テーマがプラグインで有利な点
1. 独自機能の搭載によるプラグイン削減
多くの有料テーマは、以下のようなブログ運営やサイト制作に必要な機能をテーマ自体に標準搭載しています。
- SEO対策機能(構造化データ対応、メタタグ設定など)
- 高速化機能(キャッシュ機能、CSS/JS最適化など)
- 装飾機能(ボックス、ボタン、アコーディオンなどの独自ブロックやショートコード)
- 広告管理機能
- SNS連携機能
これらの機能がテーマに含まれているため、個別のプラグインをインストールする必要がなくなります。結果として、サイトの表示速度向上や管理の簡素化につながります。
2. 独自プラグインとの連携・互換性の保証
一部の有料テーマは、テーマ専用の公式プラグインを提供している場合があります。これは、テーマの機能をさらに拡張しつつ、テーマとの互換性が保証されているため、機能の競合や不具合のリスクを最小限に抑えられます。
3. プラグインとの競合が起こりにくい設計
有料テーマは、一般的に主要な人気プラグイン(例:SEOプラグイン、セキュリティプラグイン、フォームプラグインなど)との互換性を考慮して設計・開発されています。そのため、無料テーマと比較して、テーマ側の機能とプラグイン側の機能が干渉し合って不具合が発生するリスクが低い傾向にあります。
4. サポート体制の充実
有料テーマの多くは購入者向けのサポート(フォーラムやメールサポートなど)が充実しています。プラグインを導入した際に不具合が発生した場合でも、開発元に相談できるため、問題解決がスムーズに進むことが多いです。
注意点もあります
- 機能の重複: テーマに標準搭載されている機能と同等の機能を持つプラグインをインストールすると、機能が競合してサイトが不安定になったり、表示が崩れたりする可能性があります。有料テーマを使用する際は、テーマの標準機能とプラグインの機能が重複しないか確認が必要です。
- テーマ依存の機能: テーマに含まれる機能は、テーマを切り替えると使えなくなることがあります。特に独自ブロックやショートコードで作成した部分は、テーマ変更時にレイアウトが崩れやすいので注意が必要です。
テーマ名 | 主な特徴・強み | 適したサイト |
ザ・トール (THE THOR) | 国内最高クラスのSEO最適化と高速表示 プロ仕様の美しいデザインを簡単に実現(着せ替え機能あり) アフィリエイトに役立つランキング作成機能やCTAが充実<記事装飾機能が豊富で、読みやすいコンテンツ作成を支援 | アフィリエイトブログ、本格的なメディアサイト、集客を重視するビジネスサイト |
エマノン (Emanon) | Web集客・ビジネス利用に特化した機能が豊富 CTA(行動喚起)、LP(ランディングページ)、メルマガ専用ページなどを簡単に作成 企業サイト、オウンドメディアに適したデザイン WooCommerce対応でネットショップにも利用可能(Premium) | コーポレートサイト、企業ブログ、オウンドメディア、リード獲得を目的としたビジネスサイト |
ストークSE (STORK SE) | 「誰が使っても美しいデザイン」を追求したモバイルファースト設計 シングルカラム(1カラム)レイアウトに特化し、コンテンツへの集中度が高い ブロックエディタに最適化され、直感的な操作が可能 シンプルかつ洗練されたデザインで、汎用性が高い | 商品・サービスのブランディングサイト、ミニマルな企業サイト、シンプルで美しいブログ |
リキッドプレス (LIQUID PRESS) | 用途別に豊富なテーマ(マガジン、コーポレートなど)が用意されている 高いSEO対策と構造化データ対応 多言語対応機能(LIQUID CORPORATEなど) カスタマイザーでの直感的な編集が可能 | メディアサイト(ブログ)、多言語対応が必要な企業サイト、目的に合わせたテーマを選びたいサイト |
補足情報
- ザ・トール: SEOと収益化を最重視する設計で、アフィリエイターやブロガーに人気が高いテーマです。
- エマノン: 特にBtoBやサービス業など、Webからの顧客獲得(リードジェネレーション)を重視するビジネスサイト構築に適しています。
- ストークSE: モバイルでの見やすさに徹底的にこだわり、余計な装飾を排したデザインが特徴です。商品の魅力を際立たせたいサイトにも向いています。
- リキッドプレス: 豊富なラインナップの中から目的特化型のテーマを選べるのが大きなメリットです。例えば、ニュースサイトならLIQUID MAGAZINE、企業サイトならLIQUID CORPORATEなどがあります。