• ホームページ
  • 記事
  • ガイド
  • WordPress にブレッドクラムを追加して、ユーザーが Web サイトをより適切にナビゲートできるようにする方法

WordPress にブレッドクラムを追加して、ユーザーが Web サイトをより適切にナビゲートできるようにする方法

公開: 2019-11-20

コンテンツが豊富な Web サイトを運営している場合、またはその方法を知りたい場合は、この記事が WordPress にブレッドクラムを追加する方法を学ぶのに役立ちます。

ドイツのおとぎ話「ヘンゼルとグレーテル」では、弟と妹が、邪悪な継母が森に捨てて自分たちで生きていこうとする計画を耳にし、パンを一切れ取り、パンくずの跡を残しました。両親が彼らを捨てた後、家に帰ります。

現代の出版では。 Web、ソフトウェア、またはドキュメントでは、パンくずリストは読者が家に帰る道を見つけるのを助けるために同様に使用されます. または、少なくとも、彼らがどこにいるかに基づいて、彼らの歩みをたどることができます.

ブレッドクラムは、訪問者の場所を示す、Web サイト上の二次的なナビゲーション要素です。

あなたはそれが何であるかを知っているので、この記事を読んでいます。

Galaxy S9+ iPhone X XS Max 用の Qi ワイヤレス高速充電器充電パッド スタンド ドックを見ているバイヤーは、それらがどこにあり、製品がリストされているさまざまなカテゴリを取得する方法を簡単に知ることができます。

この場合、ホームページに戻るリンクがあり、次に製品がリストされているメイン カテゴリ (携帯電話とアクセサリ)へのリンクがあり、その後にサブ カテゴリ (携帯電話アクセサリ) と別のサブカテゴリ (充電器とクレードル) が続きます。

イーベイ

WordPress Web サイトにブレッドクラムを追加する理由

上記の eBay の構造を見ると、層状または階層型の Web サイトでのユーザー エクスペリエンスにブレッドクラムがいかに優れているかがわかります。 訪問者は、サイトを閲覧しているときに、特定の時点で自分がどこにいるかを知っています。 表示している製品または記事がリストされている親カテゴリに移動する必要がある場合は、パンくずリストのリンクをクリックするだけです。

これは、ブレッドクラムを WordPress Web サイトに追加する別の利点につながります。ユーザーはブラウザーの戻るボタンをクリックする必要はなく、ブレッドクラムだけです。

ブレッドクラムは、Web サイトでのコンテンツの発見を可能にします。 検索エンジンまたは別の Web サイトのリンクから記事に送られた訪問者を考えてみましょう。 ユーザーが記事を読み終えると、ブレッドクラムは、より高いカテゴリに移動して同様のコンテンツを表示するためのより多くのオプションをユーザーに提供します。 ご想像のとおり、これはユーザーが Web サイトでより多くの時間を費やすことにつながり、直帰率の低下につながります。

ブレッドクラムは、ユーザーが Web サイトをナビゲートするのに役立つだけでなく、検索エンジンがサイトをナビゲートするのにも役立ちます。

ユーザー エクスペリエンスを向上させるもの、直帰率を下げるもの、検索エンジン ボットがサイトを簡単にクロールしてインデックスに登録できるものはすべて、サイトが検索エンジンの表彰を受けるのに役立ちます。

現状では、ブレッドクラムを追加することは、Web サイトの検索エンジン最適化の取り組みに役立ちます。

WordPress Web サイトにブレッドクラムを追加する方法

ほとんどの最新の WordPress テーマとほとんどすべての e コマース テーマには、設計上パンくず機能があります。

このようなテーマを使用して Web サイトにブレッドクラムを追加するには、テーマ オプションによくあるオプションを有効にするだけです。 疑問がある場合は、テーマのドキュメントまたはテーマ開発者に相談してください。

テーマを変更してブレッドクラムを有効にする

テーマがブレッドクラムをネイティブでサポートしていない場合は、ブレッドクラム プラグインを使用して簡単に追加できます。 Yoast などのほとんどの SEO WordPress プラグインを使用して、サイトにブレッドクラムを追加することもできます。

この記事では、無料の WordPress プラグイン – Breadcrumb NavXT を使用して WordPress にブレッドクラムを追加します。

ステップ 1: Breadcrumb NavXT WordPress プラグインをインストールします。

ブレッドクラム NavXT は、ユーザーの場所に基づいてブレッドクラムを生成します。 その後、トレイルを好みに合わせてカスタマイズできます。

Breadcrumb NavXT をインストールします。

WordPress にプラグインをインストールする方法がわからない場合は、簡単です。 ダッシュボードにログインし、プラグインの下の左側のメニューを下にスクロールし、[新規追加] をクリックします。

インストールするプラグイン – Breadcrumb NavXT – を検索ボックスに入力します。

1 ～ 2 秒で結果が返されます。 ここで、 [ Install Now ] をクリックし、その後、さらに 1 ～ 2 秒待ってから、[ Activate ] をクリックします。

ブレッドクラム NavXT をインストールする

ステップ 2: WordPress サイトでパンくずリスト NavXT パンくずリストを表示する。

ブレッドクラムは 2 つの方法で表示できます。

1. Breadcrumb NavXT が提供するウィジェットを使用する

メインメニューに行きます。 外観 > ウィジェット。

Breadcrumb NavXT を見つけて、パンくずリストが必要なサイドバーにドラッグします。

ブレッドクラム NavXT ウィジェットを表示する

次に、サイドバーが表示される任意の投稿またはページに移動すると、パンくずリストが表示されます。

ウィジェットでブレッドクラムを表示する

eBay の例のように、パンくずリストをサイドバー以外に配置したい場合は、手を汚してテーマを変更する必要があります。

2. テーマを変更する

変更が必要なファイルは次のとおりです。 home.php、single.php、page.php。 ブレッドクラムが必要な場合は、タクソノミーやその他のファイルを変更することもできます。

ただし、何かを行う前に、Web サイトをバックアップしてください。 当社独自の WPVivid バックアップ プラグインは、問題が発生した場合の時間と頭痛の種を節約します。

次に、子テーマに変更を加えることをお勧めします。 WordPress Web サイトの子テーマを作成する方法を正確に示す記事があります。

上記を実行したら、ブレッドクラムに表示するページに次のコードを追加します。

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">

<?php if(function_exists('bcn_display')) { bcn_display(); }?>

</div>

記事に表示する場合は、single.php ファイルを変更します。 記事タグにコードを貼り付けます。

テーマの単一ファイルを変更してブレッドクラムを表示する

変更を保存して、記事に移動します。

ブレッドクラムは、コードを配置した領域に配置する必要があります。

私の場合、記事の上にブレッドクラムがあることがわかります。

記事のブレッドクラムを表示

ブレッドクラムが正しく表示されない場合は、CSS でスタイルを設定する必要があります。

Breadcrumb NavXT は .breadcrumbs css クラスを使用します (これもテーマによって異なります)。 サイトの CSS コードを変更するか、WordPress カスタマイザーを使用してブレッドクラムのスタイルを設定できます。

 。パン粉 {

色: #000;

margin-bottom: 20px;

}

ステップ 3:ブレッドクラム NavXT ブレッドクラムのカスタマイズ。

ブレッドクラムを変更する必要がある場合は、WordPress ダッシュボードで行うことができます。

Breadcrumb NavXT 設定ページに移動します。 一般的な WordPress –設定>パンくずリスト NavXT –メニューの下にあります。

ブレッドクラムのカスタマイズ NavXT ブレッドクラム

これで、ブレッドクラムが WordPress サイトに正常に追加されたことを願っています。

Web サイトのジャングルで訪問者を失わないでください。 ブレッドクラムを Web サイトに追加します。

次に、Google カスタム検索を WordPress に追加して、オンサイトのナビゲーションを改善する方法も学びたいと思うかもしれません.