ありふれた名前ではあるものの、パンくずリストは、サイトのユーザーエクスペリエンス(UX)と 検索エンジン最適化(SEO) を助ける非常に便利なツールです。プラグインやちょっとしたカスタムコードで簡単に実装できます。

今回の記事では、WordPressのパンくずリストに迫り、その仕組みをご説明します。次に、サイトに追加する方法、スタイルを設定する方法、削除する方法も網羅します。扱う内容は盛りだくさん。早速始めましょう!

WordPressパンくずリストとは?

パンくずリストとは、WordPress(または任意のサイト)に関連し、投稿またはページの上部に表示されるナビゲーションリンクです。ユーザーに、現在表示しているコンテンツとつながった上層のカテゴリを表示し、以前に表示したページに簡単に戻る手段を提供します。

例えば、以下の例を考えてみましょう。

Kinstaブログのパンくずリスト

Kinstaブログのパンくずリスト

左側、ヘッダーのすぐ下に、「ホーム」>「リソースセンター」>「Kinstaブログ」という文字があります。それぞれが、現在の投稿から対応するページに戻るリンクになっています。これで、ブログ読者は、当社ウェブサイトで、「戻る」ボタン、メニュー、または検索機能を使用することなく、ワンクリックで主要なコンテンツに移動できます。

これこそが、パンくずリストの名前の由来です。ユーザーが「家」に戻る道を作ってくれるのです。ブログやオンラインストアなどで、訪問者が個々の投稿、製品ページ、類似のコンテンツの間を行ったり来たりする際に便利です。

WordPressパンくずリストの仕組み

WordPressパンくずリストには3つのタイプがあります。上述のナビゲーションリンクがすべてに組み込まれていますが、その形式はそれぞれ少し異なります。

それぞれのパンくずリストが、異なる特定のケースで力を発揮しますが、すべてが、ナビゲーションのサポートやUXの拡張に寄与します。

また、 SEOの改善にも役立ちます。パンくずリストは、サイト上のさまざまなコンテンツ間の関係を明確に示します。このようにして、検索エンジンのクローラー、つまり「ボット」がサイトの構造を理解しやすくなるのです。

結果として、ボットはサイトのページを正確にインデックスします。検索エンジンの結果にパンくずリストが含まれることもあり、ユーザーは探している情報に関連するサイト上のコンテンツを包括的に確認できるようになります。

WordPressパンくずリストをサイトに追加する方法(4つのやり方)

コーディングの達人でもWordPress初心者でも、ちょっとした手順でサイトにパンくずリストをすばやく簡単に追加できます。4つの方法を以下にご紹介します。

1. Yoast SEOでパンくずリストを有効にする

Yoast SEOは、WordPressサイト上で検索エンジンとの相性を改善し、それに応じてコンテンツを最適化するための人気のプラグインです。これには、パンくずリストなど、サイトの可視性を高める他の機能もいくつか搭載されています。

まだの場合は、WordPressダッシュボードから、プラグインをインストール、有効化してしてください。

Yoast SEOプラグインのインストール

Yoast SEOプラグインのインストール

次に、こちらのコードスニペットをテーマに追加します。


<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

具体的にどこに追加するかは、あなた次第です。投稿にパンくずリストを表示するには、single.phpテンプレートファイルに追加してください。

もしくは、header.phpファイルの最後に貼り付けると、サイト全体にパンくずリストが追加されます。

Yoastのパンくずリスト有効化コードを追加する

Yoastのパンくずリスト有効化コードを追加する

ちなみにら、テーマの更新により、このカスタムコードが上書きされる可能性があることに注意してください。この問題を回避する方法については、テーマ開発者に問い合わせるのがベストでしょう。または単に子テーマを使用することもできます。スニペットを貼り付けたら、ダッシュボードから「SEO」> 「検索の外観/Search Appearance」> 「パンくずリスト」に移動します。

Yoast SEOでパンくずリストを設定する

Yoast SEOでパンくずリストを設定する

「パンくずリストの設定」項目にあるスイッチを「有効」に切り替えます。次に、サイトをプレビューしてチェックしましょう。

Yoast SEOで追加したパンくずリスト

Yoast SEOで追加したパンくずリスト

これで、コードスニペットを追加した場所に基づいて、サイトの任意の場所にパンくずリストが表示されます。

2. WordPressのプラグインでパンくずリストを追加する

Yoastでのパンくずリスト追加は、SEOの観点からこのプラグインを既に使用している場合には便利です。ただし、コンテンツ最適化をしたいだけであれば、賢いやり方とは言えないでしょう。ここで朗報です。WordPressには、パンくずリストの追加に特化したプラグインがいくつかあります。

Breadcrumb NavXT

Yoastとは別に、WordPressにパンくずリストを追加できる人気のプラグインがBreadcrumb NavXTです。

プラグイン「Breadcrumb NavXT」

プラグイン「Breadcrumb NavXT」

このプラグインにはウィジェット機能があり、サイドバーやフッターなど、テーマで対応しているウィジェット領域にパンくずリストを追加できます。高度にカスタマイズ可能で、表示するページとカテゴリの調整も思いのまま。Breadcrumbs NavXTには、SEO向上に寄与するスキーママークアップも含まれています。

このプラグインを使用してパンくずリストを追加するには、「外観」> 「ウィジェット」に移動します。するとBreadcrumb NavXTウィジェットが表示されます。このウィジェットを表示したい領域にドラッグしてください。

Breadcrumb NavXTウィジェットをフッターエリアに追加

Breadcrumb NavXTウィジェットをフッターエリアに追加

ドロップダウンの矢印をクリックしてウィジェット設定を開き、必要なフィールドに情報を入力します。

Breadcrumb NavXTウィジェットのオプション

Breadcrumb NavXTウィジェットのオプション

パンくずリストにリンクを追加したり、順序を決定したり、フロントページで非表示にたり、キャッシュを無視したり…必要に応じチェックボックスを選択。完了したら、「保存」ボタンをクリックして、サイトのフロントエンドを確認しましょう。

Breadcrumb NavXTを使って作成したパンくずリストを確認

Breadcrumb NavXTを使って作成したパンくずリストを確認

選択した領域に、パンくずリストが表示されているばずです。

Flexy Breadcrumb

その他の選択肢として、Flexy Breadcrumbも、高い人気を博しています。

— プラグイン「Flexy Breadcrumb」

— プラグイン「Flexy Breadcrumb」

このプラグインをインストール、有効化したら、ショートコード[flexy_breadcrumb]を使用して、パンくずリストを表示することができます。この仕組みから、表示場所の柔軟性が高まっています。また、フォントサイズ、色、アイコンなどの調整も可能です。

Flexy Breadcrumbsをインストールしたら、ダッシュボードのサイドバーに新しいアイテムが表示されます。

WordPressダッシュボードサイドバーのFlexy Breadcrumbリンク

WordPressダッシュボードサイドバーのFlexy Breadcrumbリンク

設定もしておきましょう。「General」タブでは、テキストとアイコンを変更し、文字数制限を設定し、階層を調整できます。

Flexy Breadcrumbの一般設定

Flexy Breadcrumbの一般設定

Typography」タブでは、パンくずリストのフォントの色とサイズも調整できます。

Flexy Breadcrumbのタイポグラフィ設定

Flexy Breadcrumbのタイポグラフィ設定

カスタマイズが終わったらパンくずリストを表示したい場所に[flexy_breadcrumb]ショートコードを追加します。サイトで公開する個々の投稿ごとにこれを行うことができますが、ショートコードをWordPressのウィジェットエリアに追加する方が効率的です。

Flexy Breadcrumbをフロントエンドで確認

Flexy Breadcrumbをフロントエンドで確認

サイトのフロントエンドを確認すると、ショートコードを追加した場所にパンくずリストが表示されます。

WooCommerce Breadcrumb

オンラインストア運営者にとって、WooCommerce Breadcrumbsは製品ページにナビゲーションリンクを追加する簡単な手段です。

プラグイン「WooCommerce Breadcrumbs」

プラグイン「WooCommerce Breadcrumbs」

人気のあるプラグインWooCommerceを使用してオンラインストアを運営している場合、これが最適なオプションです。サイトでの顧客のナビゲーションを改善するために、製品ページのパンくずリストを作成することができます。

インストールと有効化の後、「設定」> 「WC Breadcrumbs」に移動して、パンくずリストをカスタマイズしましょう。

WooCommerce Breadcrumbs設定ページ

WooCommerce Breadcrumbs設定ページ

最も重要な設定は、「Enable breadcrumbs」チェックボックスです。パンくずリストを表示するには、これを選択してください。次に、製品ページを確認します。

パンくずリストを有効にしたWooCommerce製品ページ

パンくずリストを有効にしたWooCommerce製品ページ

パンくずリストがページの上部に表示されるはずです。

Breadcrumb

最後に、ご紹介するのがこちら。Breadcrumbは、ショートコードを使用してサイトの任意の場所にパンくずリストを追加できる軽量なプラグインです。

プラグイン「Breadcrumb」

プラグイン「Breadcrumb」

このプラグインは、今回のリストの中でも最も幅広い設定に対応しています。WordPressダッシュボードのサイドバーから、Breadcrumbをクリックして、設定画面にアクセスできます。

WordPressダッシュボードサイドバーのBreadcrumbリンク

WordPressダッシュボードサイドバーのBreadcrumbリンク

最初のタブには「Options」というラベルが付いており、カスタムテキスト、セパレータ、文字制限などの一般的な設定が操作できます。

Breadcrumbプラグイン設定ページ

Breadcrumbプラグイン設定ページ

スタイリング専用のタブもあります。フォントサイズと色だけでなく、矢印ボタンを選ぶこともできます。

Breadcrumbプラグインのスタイリングオプション

Breadcrumbプラグインのスタイリングオプション

コーディングスキルがあり、スタイルを詳細に制御したい場合は、「Custom CSS」タブを使用することもできます。

BreadcrumbプラグインのカスタムCSSフィールド

BreadcrumbプラグインのカスタムCSSフィールド

最後に、パンくずリストをサイトに追加するには、「Shortcode」タブに移動してください。

Breadcrumbプラグインのショートコードとスニペットオプション

Breadcrumbプラグインのショートコードとスニペットオプション

ショートコードは、ここでご紹介している他のプラグインと同様に、サイトのどこでも使用できます。ただし、Breadcrumbには、テンプレートファイルに追加して、ヘッダー、フッター、その他の場所に組み込むことができるコードスニペットも用意されています。

3.パンくずリストが搭載されたテーマを使用する

WordPressのテーマは通常、サイトの外観を制御するという文脈で語られますが、ウェブサイトの機能にも影響を与えることができます。その一つが、ページへのパンくずリスト追加です。

WordPressテーマを使用して既存のWordPressサイトにパンくずリストを追加することの欠点は、サイトの外観も変更する必要があることです。ブランドとサイトのアイデンティティを確立している場合には、これは推奨されるソリューションではありません。プラグインを使用する方がいいでしょう。

ただし、新しくWordPressサイトを開始する場合、またはサイトの再設計をする際には、パンくずリストの組み込まれたテーマを選択するのが便利です。 WordPressテーマディレクトリには無料で利用できるオプションがあります。

OceanWP

OceanWPは、​​非常に人気のある多目的WordPressテーマです。

OceanWPテーマ

OceanWPテーマ

パンくずリストをページに簡単に組み込めるショートコードが含まれています。また、パンくずリストを組み込んだOceanWPで使用できるいくつかのデモもあります。ショートコードを使用するには、[oceanwp_breadcrumb]を投稿、ページ、またはテキストウィジェットに追加するだけです。

OceanWPのパンくずリストショートコードをテキストウィジェットに追加

OceanWPのパンくずリストショートコードをテキストウィジェットに追加

以下のパラメーターを使用して、パンくずリストをカスタマイズできます。

これらのパラメーターのいずれかまたはすべてをショートコードブラケットに追加するだけでOKです。

ダウンタイムとWordPressの問題との戦い?Kinstaはパフォーマンスとセキュリティのために設計されたホスティングソリューションです!プラン一覧をご確認ください。

OceanWPのパンくずリストをショートコードパラメーターでカスタマイ

OceanWPのパンくずリストをショートコードパラメーターでカスタマイ

これで、関連するページにパンくずリストが表示されます。

Astra

同様に、Astraを使えば、サイトにパンくずリストを簡単に追加することができます。

— テーマ「Astra」

— テーマ「Astra」

Astraでパンくずリストを作成する最も簡単な方法は、カスタマイザーを使用することです。テーマをインストール、有効化した後で、「外観」>「カスタマイザー」に移動します。

WordPressダッシュボードからカスタマイザーにアクセス

WordPressダッシュボードからカスタマイザーにアクセス

次に「パンくずリスト/Breadcrumb」タブを選択します。

カスタマイザー内にあるAstraのパンくずリストタブ

カスタマイザー内にあるAstraのパンくずリストタブ

ここには、ページのパンくずリストを表示する場所を選択できるドロップダウンがあります。

Astraテーマでパンくずリストを表示する場所を選択

Astraテーマでパンくずリストを表示する場所を選択

選択すると、スタイル設定オプションも表示されます。

カスタマイザー内にあるAstraのパンくずリストスタイル設定

カスタマイザー内にあるAstraのパンくずリストスタイル設定

カスタマイザーの「公開」ボタンをクリックして、変更を保存してください。

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を用いてパンくずリストのスタイルを調整

カスタマイザーから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.phppage.phpファイルでこのプロセスを繰り返して、いずれかで関数が呼び出されているかどうか確認しましょう。

どれを行なっても上手くいかない、という場合には、テーマの開発者にサポートを依頼してください。WordPressのテーマを更新すると、ファイルに加えた変更が上書きされる場合があります。このため、カスタマイズを無期限に保持するために、 子テーマの使用をお勧めします。

Breadcrumbs are teeny-tiny elements with an enormous impact on your UX and SEO. Learn how to add them to your #WordPress site with this guide! 🍞👣Click to Tweet

まとめ

強力なUXとSEOは、どちらもウェブサイト成功の鍵です。WordPressパンくずリストを有効にすると、訪問者がサイト全体を簡単に移動し、さらに検索エンジンがその構造を理解してページを正確にインデックスできるようになります。

今回の記事では、WordPressサイトにパンくずリストを追加する4つの方法をご紹介しました。

  1. Yoast SEOを使ってパンくずリスト機能を有効にする
  2. WordPressパンくずリスト追加プラグインをインストール、設定する
  3. パンくずリストを含むテーマを使う
  4. コードを記述し手動でパンくずリストを追加する

WordPressのパンくずリストそのものについて、または、これの使用方法について、何かご質問はございますか?下のコメント欄からお知らせください!


この記事が面白いと思った方は、KinstaのWordPressホスティングプラットフォームも大好きでしょう。ウェブサイトをスピードアップし、当社のベテランのWordPressチームからの24時間365日のサポートを是非ご利用ください。Google Cloudを使用したインフラストラクチャは、自動スケーリング、パフォーマンス、およびセキュリティに重点を置いています。Kinstaの魅力をご案内させてください。当社のプランをご確認ください。