ありふれた名前にもかかわらず、ブレッドクラムはサイトのユーザーエクスペリエンス(UX)を改善するための非常に便利なツールです。 検索エンジン最適化(SEO)。それらを有効にするのは、プラグインまたは小さなカスタムコードの助けを借りて簡単です。

この投稿では、あなたを紹介します WordPressのパンくずリスト そしてそれらがどのように機能するかを説明します。次に、それらをサイトに追加し、スタイルを設定し、削除する方法を説明します。カバーすることがたくさんあるので、始めましょう!

WordPressブレッドクラムとは何ですか?

ブレッドクラムは、WordPress(または任意のWebサイト)に関連しているため、投稿またはページの上部に表示されるナビゲーションリンクです。彼らはユーザーに 上位レベルのカテゴリ これにより、現在表示しているコンテンツに移動し、以前に表示したページに簡単に戻ることができます。

たとえば、次の例について考えてみます。

kinsta breadcrumbs example

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

左側のヘッダーのすぐ下に、単語が表示されます ホーム>リソースセンター> Kinstaブログ。それぞれは、現在の投稿から対応するページに戻るリンクです。これにより、読者は 私たちのブログで を使用する代わりに、シングルクリックでこれらの主要なコンテンツ領域のいずれかに移動します バック ボタン、 メニュー、または検索機能。

それがブレッドクラムの名前の由来です。パンくずリストは、ユーザーを「家」に戻すための道を作ります。ブログやブログなどのサイトに特に役立ちます オンラインストア、訪問者が個々の投稿間を移動したい場合、 製品ページ、および類似のコンテンツを見つけることができるカテゴリアーカイブ。

WordPressブレッドクラムはどのように機能しますか?

WordPressブレッドクラムには3つの異なるタイプがあります。上記のようにすべてにナビゲーションリンクが組み込まれていますが、方法が少し異なります。

  • 階層ベース: これらのブレッドクラムは、上記の例のように、サイトの構造内のどこにいるかをユーザーに示します。
  • 属性ベース: これらのブレッドクラムは主にeコマースサイトで使用され、ユーザーが検索した属性を表示して、現在表示している製品に導きました。
  • 履歴ベース: ユーザーがサイト全体でページ間を移動すると、これらのパンくずリストは元の場所に戻ります。

ブレッドクラムの各種類は、さまざまな目的に役立ちます。しかし、すべてができます ナビゲーションを改善する そして拡張機能UX。

彼らはまた SEOの目的に有益。ブレッドクラムは、サイト上のさまざまなコンテンツ間の関係を明確に示します。このようにして、検索エンジンのクローラーまたは「ボット」がサイトの構造を理解しやすくなります。

これにより、これらのボットはサイトのページをより正確にインデックスに登録できます。検索エンジンはまたあなたを表示するかもしれません 結果リストのブレッドクラム、ユーザーが探している情報に関連するサイト上の追加コンテンツを表示できるようにします。

WordPressブレッドクラムをサイトに追加する方法(4つの方法)

コーディングの専門家でもWordPressの初心者でも、わずか数ステップでサイトにパンくずリストをすばやく簡単に追加できます。このタスクを実行する4つの異なる方法があります。

1. YoastSEOでブレッドクラムを有効にする

Yoast SEO は、WordPressユーザーが検索エンジンのランキングを概算し、それに応じてコンテンツを最適化するのに役立つ人気のあるプラグインです。また、ブレッドクラムなど、サイトの可視性を高めるためのその他の機能もいくつか含まれています。

まだインストールしていない場合は、プラグインをインストールしてアクティブ化します WordPressダッシュボード:

install yoast seo

YoastSEOプラグインのインストール

次に、追加する必要があります このコードスニペット あなたのテーマに:


 '、'

'); }?>

具体的には、どこに追加するかはあなた次第です。ブログ投稿でブレッドクラムを使用したい場合は、それを single.php テンプレートファイル。

または、最後に貼り付けます header.php ファイルはサイト全体にブレッドクラムを追加します。

edit header php

Yoastブレッドクラムアクティベーションコードの追加

将来のテーマの更新により、このカスタムコードが上書きされる可能性があることに注意してください。この問題を回避する方法については、テーマ開発者に問い合わせる必要があります。 子テーマを使用する。スニペットを配置したら、に移動します SEO>検索の外観>ブレッドクラム ダッシュボード:

yoast breadcrumbs settings

YoastSEOブレッドクラム設定

トグル ブレッドクラムの設定 切り替える 有効。 次に、サイトをプレビューします。

live breadcrumbs example

YoastSEOで追加されたライブブレッドクラム

これで、コードスニペットを追加した場所に基づいて、サイトの関連部分にブレッドクラムが表示されます。

2.WordPressブレッドクラムプラグインでブレッドクラムを有効にする

Yoastでブレッドクラムを追加することは、SEOの目的でそのプラグインをすでに使用している場合に特に便利です。ただし、別のプラグインが必要な場合 コンテンツの最適化、上記のアプローチはあまり役に立ちません。幸い、WordPressにブレッドクラムを追加することを特に目的としたプラグインが他にもいくつかあります。

パンくずリストNavXT

Yoast以外にWordPressにパンくずリストを追加するための最も人気のあるプラグインは パンくずリストNavXT:

breadcrumb navxt

BreadcrumbNavXTプラグイン

このプラグインは、サイドバーやフッターなど、テーマが提供するウィジェット領域に追加できるブレッドクラムウィジェットを提供します。高度にカスタマイズ可能で、トレイルに表示するページとカテゴリを選択できます。ブレッドクラムNavXTには、SEOを改善するためのスキーママークアップも含まれています。

このプラグインを使用してブレッドクラムを追加するには、に移動します 外観>ウィジェット。あなたは新しいを見るでしょう パンくずリストNavXT ウィジェット。表示したいウィジェット領域にドラッグします。

breadcrumb navxt widget

ブレッドクラムNavXTウィジェットをフッター領域に追加する

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

breadcrumb navxt fields

BreadcrumbNavXTウィジェットオプション

ブレッドクラムへのリンクを追加し、それらの順序を決定し、フロントページで非表示にし、キャッシュを無視するには、必要に応じてチェックボックスを選択してください。終了したら、をクリックします 保存する ボタンをクリックしてから、サイトのフロントエンドを確認します。

breadcrumb navxt live

ブレッドクラムNavXTウィジェットで作成されたブレッドクラム

これで、パンくずリストは、選択したウィジェット領域に表示されます。

フレキシブレッドクラム

別の方法として、 フレキシブレッドクラム WordPressにブレッドクラムを追加するための最も評価の高いプラグインです。

flexy breadcrumb

FlexyBreadcrumbプラグイン

このプラグインをインストールしてアクティブ化すると、[flexy_breadcrumb]ショートコードを使用してサイトにブレッドクラムを追加できます。これにより、トレイルが表示される場所に関してもう少し柔軟性が得られます。また、次のようなスタイリングコンポーネントをより細かく制御できます。 フォントサイズ、色、アイコン.

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

flexy breadcrumb dashboard

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

次に、構成するいくつかの設定があります。の中に 一般 タブでは、ホームページのテキストとアイコンを変更したり、文字数制限を設定したり、階層を決定したりできます。

flexy breadcrumb general

FlexyBreadcrumbの一般設定

の中に タイポグラフィ タブでは、パンくずリストのフォントの色とサイズを調整することもできます。

flexy breadcrumb typography

FlexyBreadcrumbタイポグラフィ設定

トレイルをカスタマイズしたら、ブレッドクラムを表示する場所に[flexy_breadcrumb]ショートコードを追加する必要があります。サイトに公開する個々の投稿でこれを行うことは可能ですが、ショートコードをに追加する方が効率的です。 WordPressウィジェット:

flexy breadcrumb live

フロントエンドのFlexyBreadcrumbトレイル

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

WooCommerceブレッドクラム

オンライン小売業者の場合、 WooCommerceブレッドクラム 製品ページにナビゲーションリンクを追加する簡単な方法です。

woocommerce breadcrumbs

WooCommerceBreadcrumbsプラグイン

人気のWooCommerceプラグインを使用してオンラインストアを運営している場合は、これが最適なオプションかもしれません。これにより、サイトでの顧客ナビゲーションを改善するために、製品ページのブレッドクラムをアクティブ化できます。

インストールとアクティベーションの後、次の場所に移動できます 設定> WCブレッドクラム パンくずリストをカスタマイズするには:

woocommerce breadcrumbs settings

WooCommerceブレッドクラム設定ページ

考慮すべき最も重要な設定は ブレッドクラムを有効にする チェックボックス。ブレッドクラムを表示するには、それが選択されていることを確認する必要があります。次に、製品ページの1つを確認します。

woocommerce breadcrumbs live

ブレッドクラムが有効になっているWooCommerce製品ページ

ブレッドクラムトレイルがページの上部に表示されます。

パンくず

最終的に、 パンくず は、ショートコードを使用してサイトのどこにでもブレッドクラムを追加できる軽量のプラグインです。

breadcrumb

Breadcrumbプラグイン

このプラグインには、この投稿にリストされているものの中で最も広範な設定があります。をクリックするとアクセスできます パンくず WordPressダッシュボードのサイドバー:

breadcrumb dashboard link

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

最初のタブにはラベルが付いています オプション、カスタムテキスト、区切り文字、文字数制限などの一般的な設定が含まれています。

breadcrumb general settings

Breadcrumbプラグイン設定ページ

スタイリングオプション専用のタブ全体もあります。フォントサイズと色だけでなく、選択できるいくつかの矢印ボタンがあります。

breadcrumb styling settings

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

コーディングスキルがあり、スタイリングをより細かく制御したい場合は、 カスタムCSS タブ:

breadcrumb custom css

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

最後に、訪問することが重要です ショートコード ブレッドクラムをサイトに追加するためのタブ:

breadcrumb shortcode options

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

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

3.パンくずリストを含むテーマを使用する

それらは通常、サイトの外観を制御するという文脈で考えられますが、WordPressテーマはWebサイトの機能にも影響を与える可能性があります。これを行う1つの方法は、ページにブレッドクラムを追加することです。

WordPressテーマを使用して既存のWordPressサイトにパンくずリストを追加することの欠点は、Webサイトの外観も変更する必要があることです。確立されたブランドとサイトのアイデンティティを持っている場合、これは実際には実用的な解決策ではなく、プラグインを使用したほうがよいでしょう。

ただし、 あなたは新しいWordPressサイトを始めています またはウェブサイトの再設計を実行している、 テーマの選択 ブレッドクラムを組み込むことは、それらをサイトに追加するための手間のかからない方法です。さらに、無料で利用できるいくつかのオプションがあります WordPressテーマディレクトリ.

OceanWP

OceanWP 最も人気のある多目的WordPressテーマの1つです。

oceanwp theme

OceanWPテーマ

これには、ページにブレッドクラムを簡単に適用するために使用できるショートコードが含まれています。いくつかあります 利用可能なデモ ブレッドクラムを組み込んだOceanWPで使用します。ショートコードを使用するには、投稿、ページ、またはテキストウィジェットに[oceanwp_breadcrumb]を追加するだけです。

add oceanwp shortcode

OceanWPブレッドクラムショートコードをテキストウィジェットに追加する

次のパラメータを使用して、ブレッドクラムをカスタマイズできます。

  • クラス:カスタムCSSクラスを組み込みます。
  • 色:テキストの色を変更します。
  • ホバーカラー:ユーザーがパンくずリストにカーソルを合わせたときのテキストの色を変更します。

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

ダウンタイムとWordPressの問題に苦しんでいますか? Kinstaは、パフォーマンスとセキュリティを念頭に置いて設計されたホスティングソリューションです。 私たちの計画をチェックしてください

oceanwp breadcrumb parameters

ショートコードパラメータを使用したOceanWPブレッドクラムのカスタマイズ

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

アストラ

同様に、 アストラ また、サイトにブレッドクラムを簡単に追加できます。

astra theme

アストラのテーマ

Astraでブレッドクラムを有効にする最も簡単な方法は、カスタマイザーを使用することです。テーマをインストールしてアクティブにした状態で、に移動します 外観>カスタマイズ:

astra access customizer

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

次に、 パンくず タブ:

astra customizer breadcrumbs

カスタマイザーのAstraブレッドクラムタブ

ここに、ページ上のブレッドクラムを表示する場所を選択できるドロップダウンが表示されます。

astra breadcrumb position

Astraテーマのブレッドクラム位置の選択

選択すると、いくつかのスタイリングオプションも表示されます。

astra breadcrumb styling

カスタマイザーのAstraブレッドクラムスタイリングオプション

必ずカスタマイザーをクリックしてください 公開する ボタンをクリックして変更を保存します。

4.ブレッドクラムを手動で追加します

プラグインとテーマは、WordPressをそのようなユーザーフレンドリーでアクセス可能なプラットフォームにするものの一部です。ただし、一部の上級ユーザーや開発者にとっては、制限を感じることがあります。コードは非常に創造的な媒体である可能性があり、独自のパンくずリストを自由に作成できることは魅力的かもしれません。

ブレッドクラムを手動で表示するには、2つのことを行う必要があります。まず、関数を追加する必要があります 関数.php それらを有効にするファイル。これが 使用する可能性のあるコードの:


function get_breadcrumb(){echo 'ホーム'; if(is_category()|| is_single()){echo“»”; the_category( '•'); if(is_single()){echo“»”;タイトル(); }} elseif(is_page()){echo“»”;エコーthe_title(); } elseif(is_search()){echo“»”;検索結果…echo '“ ';エコーthe_search_query();エコー ' ”'; }}

関数を追加したら、パンくずリストを表示するテンプレートファイルで関数を呼び出す必要があります。で関数を呼び出す single.php ブレッドクラムが投稿に表示され、 header.php ヘッダーが表示されるすべての場所にそれらを表示します。

使用するコードは次のようになります。



これらのファイルを変更すると、サイトにパンくずリストが表示されますが、デザインに一致するようにスタイルを設定することはできません。そのためには、CSSでも手を汚す必要があります。

WordPressブレッドクラムのスタイルを設定する方法

ブレッドクラムを自分でコーディングする場合は、ブレッドクラムのスタイリングが必要です。ただし、プラグインまたはテーマを使用してそれらを追加している場合にも役立ちます。これらのツールが提供するデフォルトのスタイルは、サイトに適していない場合があります。その場合は、一貫性を維持するためにツールを微調整することをお勧めします。

あなたはできる カスタムCSSを追加する テーマのスタイルシート(style.css)またはカスタマイザーの追加のCSS領域でブレッドクラムのスタイルを設定するには:

customizer additional css

カスタマイザーを介してブレッドクラムのスタイルを設定するための追加のCSSの組み込み

フォント、サイズ、色を微調整するなど、サイトのデザインに合わせてパンくずリストを調整する方法はたくさんあります。余白、パディング、境界線、アイコンなどの要素も検討してください。

ブレッドクラムのスタイル設定に使用できるCSSの例を次に示します。


.breadcrumb {パディング:8px 15px;マージンボトム:20px;リストスタイル:なし;背景色:#f5f5f5; border-radius:4px; } .breadcrumb a {color:#428bca;テキスト装飾:なし; }

がある CSSに関しては多くの可能性。そのため、パンくずリストを希望どおりに表示するには、ある程度の実験が必要になる場合があります。

あなたのサイトからWordPressブレッドクラムを削除する方法

あなたのサイトにパンくずリストを追加することには多くの利点がありますが、それはそれらがすべての人のためであるという意味ではありません。一部の人々は、彼らが混乱したり、サイトのページが乱雑になりすぎていると感じたりするかもしれません。

WordPressサイトからブレッドクラムを削除したい場合は、最初に追加した方法に基づいて意味のある方法を使用して削除できます。たとえば、ブレッドクラムをカスタムコーディングした場合は、テーマのファイルから追加したコードを簡単に削除できます。

プラグインで追加されたブレッドクラムを無効にすることは、通常、プラグインを非アクティブ化するのと同じくらい簡単です。 Yoast SEOの場合は、 パン粉 のタブ 検索の外観 設定を行い、関連するスイッチをに切り替えます 無効にする.

設定を介してブレッドクラムを有効にするテーマについても同じことが言えます。 WordPressのショートコード。ただし、デフォルトでブレッドクラムを追加するテーマがいくつかあります。これらを削除することは、特にコードの経験があまりない場合は、少し注意が必要です。

これがあなたの状況である場合、あなたはあなたのサイトにナビゲートする必要があります header.php ファイル。そこで、「パンくず」の検索コマンドを実行します。これにより、サイトにブレッドクラムを追加する関数を呼び出すコードが強調表示されます(ここに存在する場合)。

find breadcrumb code

テーマヘッダーテンプレートファイルでパンくずコードを見つける

このコード行を削除して、サイトからブレッドクラムを削除します。適切なコードが見つからなかった場合は、このプロセスをもう一度試すことができます。 single.php そして page.php 代わりに、これらのテンプレートの1つで関数が呼び出されるかどうかを確認します。

他のすべてが失敗した場合は、 テーマの開発者 サポートのための。ご了承ください WordPressテーマを更新する ファイルに加えた変更を上書きする場合があります。そのため、ベストプラクティスでは、 子テーマ このため、カスタマイズを無期限に保持するために。

/ *クリックしてツイート* /
body a.novashare-ctt {
表示ブロック;
背景:#00abf0;
マージン:30px自動;
パディング:20px 20px 20px 15px;
色:#ffffff;
テキスト装飾:なし!重要;
ボックスシャドウ:なし!重要;
-webkit-box-shadow:なし!重要;
-moz-box-shadow:なし!重要;
境界線:なし;
border-left:5px solid #00abf0;
}
body a.novashare-ctt:hover {
色:#ffffff;
border-left:5px solid #008cc4;
}
body a.novashare-ctt:visited {
色:#ffffff;
}
body a.novashare-ctt * {
ポインタイベント:なし;
}
body a.novashare-ctt .novashare-ctt-tweet {
表示ブロック;
フォントサイズ:18px;
行の高さ:27px;
マージンボトム:10px;
}
body a.novashare-ctt .novashare-ctt-cta-container {
表示ブロック;
オーバーフロー:非表示;
}
body a.novashare-ctt .novashare-ctt-cta {
フロート:右;
}
body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
フロート:左;
}
body a.novashare-ctt .novashare-ctt-cta-text {
フォントサイズ:16px;
行の高さ:16px;
垂直整列:中央;
}
body a.novashare-ctt .novashare-ctt-cta-icon {
マージン左:10px;
表示:インラインブロック;
垂直整列:中央;
}
body a.novashare-ctt .novashare-ctt-cta-icon svg {
垂直整列:中央;
高さ:18px;
}
/ *シンプル+シンプルな代替テーマ* /
body a.novashare-ctt.novashare-ctt-simple {
背景:なし;
パディング:10px 0px 10px 20px;
色:初期;
}
body a.novashare-ctt.novashare-ctt-simple-alt {
背景:#f9f9f9;
パディング:20px;
色:初期;
}
body a.novashare-ctt.novashare-ctt-simple:hover、body a.novashare-ctt.novashare-ctt-simple-alt:hover {
border-left:5px solid #008cc4;
}
body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta、body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
色:#00abf0;
}
body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta、body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta {
色:#008cc4;
}

概要

強力なUXとSEOは、どちらもWebサイトを成功させるための鍵です。 WordPressブレッドクラムを有効にすると、訪問者がサイト内を簡単にナビゲートできるようになると同時に、検索エンジンがその構造を理解してページに正確にインデックスを付けることができます。

この投稿では、WordPressサイトにブレッドクラムを追加するための4つの方法について説明しました。

  1. でパンくずをオンにします Yoast SEO.
  2. WordPressブレッドクラムプラグインをインストールして構成します。
  3. テーマを使用する パンくずリストが含まれます。
  4. コードを使用して手動でブレッドクラムを追加します。

WordPressのブレッドクラムやその使用方法について質問がありますか?以下のコメントセクションでお知らせください。