ありふれた名前ではあるものの、パンくずリストは、サイトのユーザーエクスペリエンス（UX）と 検索エンジン最適化（SEO） を助ける非常に便利なツールです。プラグインやちょっとしたカスタムコードで簡単に実装できます。
今回の記事では、WordPressのパンくずリストに迫り、その仕組みをご説明します。次に、サイトに追加する方法、スタイルを設定する方法、削除する方法も網羅します。扱う内容は盛りだくさん。早速始めましょう！
WordPressパンくずリストとは？
パンくずリストとは、WordPress（または任意のサイト）に関連し、投稿またはページの上部に表示されるナビゲーションリンクです。ユーザーに、現在表示しているコンテンツとつながった上層のカテゴリを表示し、以前に表示したページに簡単に戻る手段を提供します。
例えば、以下の例を考えてみましょう。
左側、ヘッダーのすぐ下に、「ホーム」>「リソースセンター」>「Kinstaブログ」という文字があります。それぞれが、現在の投稿から対応するページに戻るリンクになっています。これで、ブログ読者は、当社ウェブサイトで、「戻る」ボタン、メニュー、または検索機能を使用することなく、ワンクリックで主要なコンテンツに移動できます。
これこそが、パンくずリストの名前の由来です。ユーザーが「家」に戻る道を作ってくれるのです。ブログやオンラインストアなどで、訪問者が個々の投稿、製品ページ、類似のコンテンツの間を行ったり来たりする際に便利です。
WordPressパンくずリストの仕組み
WordPressパンくずリストには3つのタイプがあります。上述のナビゲーションリンクがすべてに組み込まれていますが、その形式はそれぞれ少し異なります。
- 階層ベース：このパンくずリストは、上の例のように、ユーザーがサイトの構造においてどこにいるかを示します。
- 属性ベース：主にeコマースサイトで使用されるこのパンくずリストには、ユーザーが検索した属性が表示され、現在閲覧中の製品につながっています。
- 履歴ベース：ユーザーがサイト内のページ間を移動するのと連動して、このパンくずリストには、前のページに戻るためのリンクが表示されます。
それぞれのパンくずリストが、異なる特定のケースで力を発揮しますが、すべてが、ナビゲーションのサポートやUXの拡張に寄与します。
また、 SEOの改善にも役立ちます。パンくずリストは、サイト上のさまざまなコンテンツ間の関係を明確に示します。このようにして、検索エンジンのクローラー、つまり「ボット」がサイトの構造を理解しやすくなるのです。
結果として、ボットはサイトのページを正確にインデックスします。検索エンジンの結果にパンくずリストが含まれることもあり、ユーザーは探している情報に関連するサイト上のコンテンツを包括的に確認できるようになります。
WordPressパンくずリストをサイトに追加する方法（4つのやり方）
コーディングの達人でもWordPress初心者でも、ちょっとした手順でサイトにパンくずリストをすばやく簡単に追加できます。4つの方法を以下にご紹介します。
1. Yoast SEOでパンくずリストを有効にする
Yoast SEOは、WordPressサイト上で検索エンジンとの相性を改善し、それに応じてコンテンツを最適化するための人気のプラグインです。これには、パンくずリストなど、サイトの可視性を高める他の機能もいくつか搭載されています。
まだの場合は、WordPressダッシュボードから、プラグインをインストール、有効化してしてください。
次に、こちらのコードスニペットをテーマに追加します。
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>具体的にどこに追加するかは、あなた次第です。投稿にパンくずリストを表示するには、single.phpテンプレートファイルに追加してください。
もしくは、header.phpファイルの最後に貼り付けると、サイト全体にパンくずリストが追加されます。
ちなみにら、テーマの更新により、このカスタムコードが上書きされる可能性があることに注意してください。この問題を回避する方法については、テーマ開発者に問い合わせるのがベストでしょう。または単に子テーマを使用することもできます。スニペットを貼り付けたら、ダッシュボードから「SEO」> 「検索の外観/Search Appearance」> 「パンくずリスト」に移動します。
「パンくずリストの設定」項目にあるスイッチを「有効」に切り替えます。次に、サイトをプレビューしてチェックしましょう。
これで、コードスニペットを追加した場所に基づいて、サイトの任意の場所にパンくずリストが表示されます。
2. WordPressのプラグインでパンくずリストを追加する
Yoastでのパンくずリスト追加は、SEOの観点からこのプラグインを既に使用している場合には便利です。ただし、コンテンツ最適化をしたいだけであれば、賢いやり方とは言えないでしょう。ここで朗報です。WordPressには、パンくずリストの追加に特化したプラグインがいくつかあります。
Breadcrumb NavXT
Yoastとは別に、WordPressにパンくずリストを追加できる人気のプラグインがBreadcrumb NavXTです。
このプラグインにはウィジェット機能があり、サイドバーやフッターなど、テーマで対応しているウィジェット領域にパンくずリストを追加できます。高度にカスタマイズ可能で、表示するページとカテゴリの調整も思いのまま。Breadcrumbs NavXTには、SEO向上に寄与するスキーママークアップも含まれています。
このプラグインを使用してパンくずリストを追加するには、「外観」> 「ウィジェット」に移動します。するとBreadcrumb NavXTウィジェットが表示されます。このウィジェットを表示したい領域にドラッグしてください。
ドロップダウンの矢印をクリックしてウィジェット設定を開き、必要なフィールドに情報を入力します。
パンくずリストにリンクを追加したり、順序を決定したり、フロントページで非表示にたり、キャッシュを無視したり…必要に応じチェックボックスを選択。完了したら、「保存」ボタンをクリックして、サイトのフロントエンドを確認しましょう。
選択した領域に、パンくずリストが表示されているばずです。
Flexy Breadcrumb
その他の選択肢として、Flexy Breadcrumbも、高い人気を博しています。
このプラグインをインストール、有効化したら、ショートコード[flexy_breadcrumb]を使用して、パンくずリストを表示することができます。この仕組みから、表示場所の柔軟性が高まっています。また、フォントサイズ、色、アイコンなどの調整も可能です。
Flexy Breadcrumbsをインストールしたら、ダッシュボードのサイドバーに新しいアイテムが表示されます。
設定もしておきましょう。「General」タブでは、テキストとアイコンを変更し、文字数制限を設定し、階層を調整できます。
「Typography」タブでは、パンくずリストのフォントの色とサイズも調整できます。
カスタマイズが終わったらパンくずリストを表示したい場所に[flexy_breadcrumb]ショートコードを追加します。サイトで公開する個々の投稿ごとにこれを行うことができますが、ショートコードをWordPressのウィジェットエリアに追加する方が効率的です。
サイトのフロントエンドを確認すると、ショートコードを追加した場所にパンくずリストが表示されます。
WooCommerce Breadcrumb
オンラインストア運営者にとって、WooCommerce Breadcrumbsは製品ページにナビゲーションリンクを追加する簡単な手段です。
人気のあるプラグインWooCommerceを使用してオンラインストアを運営している場合、これが最適なオプションです。サイトでの顧客のナビゲーションを改善するために、製品ページのパンくずリストを作成することができます。
インストールと有効化の後、「設定」> 「WC Breadcrumbs」に移動して、パンくずリストをカスタマイズしましょう。
最も重要な設定は、「Enable breadcrumbs」チェックボックスです。パンくずリストを表示するには、これを選択してください。次に、製品ページを確認します。
パンくずリストがページの上部に表示されるはずです。
Breadcrumb
最後に、ご紹介するのがこちら。Breadcrumbは、ショートコードを使用してサイトの任意の場所にパンくずリストを追加できる軽量なプラグインです。
このプラグインは、今回のリストの中でも最も幅広い設定に対応しています。WordPressダッシュボードのサイドバーから、Breadcrumbをクリックして、設定画面にアクセスできます。
最初のタブには「Options」というラベルが付いており、カスタムテキスト、セパレータ、文字制限などの一般的な設定が操作できます。
スタイリング専用のタブもあります。フォントサイズと色だけでなく、矢印ボタンを選ぶこともできます。
コーディングスキルがあり、スタイルを詳細に制御したい場合は、「Custom CSS」タブを使用することもできます。
最後に、パンくずリストをサイトに追加するには、「Shortcode」タブに移動してください。
ショートコードは、ここでご紹介している他のプラグインと同様に、サイトのどこでも使用できます。ただし、Breadcrumbには、テンプレートファイルに追加して、ヘッダー、フッター、その他の場所に組み込むことができるコードスニペットも用意されています。
3.パンくずリストが搭載されたテーマを使用する
WordPressのテーマは通常、サイトの外観を制御するという文脈で語られますが、ウェブサイトの機能にも影響を与えることができます。その一つが、ページへのパンくずリスト追加です。
WordPressテーマを使用して既存のWordPressサイトにパンくずリストを追加することの欠点は、サイトの外観も変更する必要があることです。ブランドとサイトのアイデンティティを確立している場合には、これは推奨されるソリューションではありません。プラグインを使用する方がいいでしょう。
ただし、新しくWordPressサイトを開始する場合、またはサイトの再設計をする際には、パンくずリストの組み込まれたテーマを選択するのが便利です。 WordPressテーマディレクトリには無料で利用できるオプションがあります。
OceanWP
OceanWPは、非常に人気のある多目的WordPressテーマです。
パンくずリストをページに簡単に組み込めるショートコードが含まれています。また、パンくずリストを組み込んだOceanWPで使用できるいくつかのデモもあります。ショートコードを使用するには、[oceanwp_breadcrumb]を投稿、ページ、またはテキストウィジェットに追加するだけです。
以下のパラメーターを使用して、パンくずリストをカスタマイズできます。
- クラス：カスタムCSSクラスを組み込みます。
- 色：テキストの色を変更します。
- ホバーカラー：ユーザーがパンくずリストにカーソルを合わせたときにテキストの色を変更します。
これらのパラメーターのいずれかまたはすべてをショートコードブラケットに追加するだけでOKです。
これで、関連するページにパンくずリストが表示されます。
Astra
同様に、Astraを使えば、サイトにパンくずリストを簡単に追加することができます。
Astraでパンくずリストを作成する最も簡単な方法は、カスタマイザーを使用することです。テーマをインストール、有効化した後で、「外観」>「カスタマイザー」に移動します。
次に「パンくずリスト/Breadcrumb」タブを選択します。
ここには、ページのパンくずリストを表示する場所を選択できるドロップダウンがあります。
選択すると、スタイル設定オプションも表示されます。
カスタマイザーの「公開」ボタンをクリックして、変更を保存してください。
4. パンくずリストを手動で追加する
WordPressをユーザーフレンドリーで使いこなしやすいプラットフォームにするものの一つが、プラグインとテーマです。ただし、一部の上級ユーザーや開発者は、これにより制限を感じることもあるでしょう。コードは創造的な仕上がりを可能にし、独自のパンくずリストを自由に作成できることは、大きな魅力です。
パンくずリストを手動で表示するには、2つのことを行う必要があります。まず、有効にするために関数をfunctions.phpファイルに追加する必要があります。使用できるコードの一例は以下の通りです。
function get_breadcrumb() {
echo ‘<a href="”’.home_url().’”" rel="”nofollow”">Home</a>’;
if (is_category() || is_single()){
echo “ » ”;
the_category (‘ • ‘);
if (is_single()) {
echo “ » ”;
the_title();
}
} elseif (is_page()) {
echo “ » ”;
echo the_title();
} elseif (is_search()) {
echo “ » ”;Search Results for…
echo ‘“<em>’;
echo the_search_query();
echo ‘</em>”’;
}
}
関数を追加したら、今度は、パンくずリストを表示するテンプレートファイルで関数を呼び出す必要があります。single.phpで関数を呼び出すと、投稿にパンくずリストが表示され、header.phpで呼び出すと、ヘッダーが表示されるすべての場所に表示されます。
そのために使うコードは以下のようになります。
<div class="breadcrumb"><?php get_breadcrumb(); ?></div>
これらのファイルを編集することで、パンくずリストがサイトに表示されますが、デザインに合わせてスタイルを設定することはできません。そのためには、CSSを扱う必要があります。
WordPressパンくずリストのスタイル設定方法
自分でパンくずリストをコーディングするとなると、パンくずリストのスタイル設定が必要です。ただ、プラグインまたはテーマを使用して追加する場合にも、このステップは役立ちます。というのも、既存のツールで生成されるデフォルトのスタイルは、サイトのデザインに適さないことがあります。そんな時には、一貫性を維持するために微調整してみましょう。
テーマのスタイルシート（style.css）やカスタマイザーにある追加CSSエリアを使って、カスタムCSSを追加し、パンくずリストのスタイルを設定できます。
フォント、サイズ、色を調整するなど、パンくずリストをサイトのデザインに合わせて調整する方法はいくつもあります。また、マージン、パディング、ボーダー、アイコンなどの要素も考慮するといいでしょう。
パンくずリストのスタイル設定に使用できるCSSの例を、ご紹介します。
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb a {
color: #428bca;
text-decoration: none;
}
CSSには無限の可能性があります。そのため、パンくずリストを希望どおりに正確に表示するには、ある程度の試行錯誤が必要になることもあるでしょう。
WordPressパンくずリストをサイトから削除する方法
サイトにパンくずリストを追加することには、多くのメリットがありますが、必ずしもすべての人に適しているとは言えません。一部のケースでは、混乱を招いたり、サイトに乱雑な印象を与えることも。
WordPressサイトからパンくずリストを削除するには、最初にそれを追加した方法に基づいて、順序立てて修正を施しましょう。たとえば、パンくずリストをカスタムコードで追加した場合は、テーマのファイルからそのコードを簡単に削除できます。
プラグインでパンくずリストを追加している場合、通常、プラグインを無効にするだけでOKです。Yoast SEOのケースでは、「Search Appearance」設定の「パンくずリスト」タブに移動し、スイッチを「無効」に切り替えます。
設定やWordPressショートコードを介してパンくずリストを有効にするテーマにも、同じことが言えます。ただし、デフォルトでパンくずリストを内包するテーマもあり、これの場合、話は別です。特にコードの経験が浅い状態で、それをむやみに削除するのは…注意が必要です。
もし、あなたがそんな状況に陥っているなら、サイトのheader.phpファイルの編集が必要になります。そこで、コマンドを使い「breadcrumb」を検索します。これで、パンくずリストをサイトに追加する関数を呼び出すコードがハイライトされるはずです（このファイルに存在する場合）。
サイトからパンくずリストを削除するには、該当するコードを削除します。適切なコードが見つからなかった場合には、single.php、page.phpファイルでこのプロセスを繰り返して、いずれかで関数が呼び出されているかどうか確認しましょう。
どれを行なっても上手くいかない、という場合には、テーマの開発者にサポートを依頼してください。WordPressのテーマを更新すると、ファイルに加えた変更が上書きされる場合があります。このため、カスタマイズを無期限に保持するために、 子テーマの使用をお勧めします。
まとめ
強力なUXとSEOは、どちらもウェブサイト成功の鍵です。WordPressパンくずリストを有効にすると、訪問者がサイト全体を簡単に移動し、さらに検索エンジンがその構造を理解してページを正確にインデックスできるようになります。
今回の記事では、WordPressサイトにパンくずリストを追加する4つの方法をご紹介しました。
- Yoast SEOを使ってパンくずリスト機能を有効にする
- WordPressパンくずリスト追加プラグインをインストール、設定する
- パンくずリストを含むテーマを使う
- コードを記述し手動でパンくずリストを追加する
WordPressのパンくずリストそのものについて、または、これの使用方法について、何かご質問はございますか？下のコメント欄からお知らせください！
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
コメントを残す