WordPress サイトにブレッドクラムを追加する方法
公開: 2023-02-12ナビゲーションはあらゆる Web サイトの重要な部分であり、それを提供する方法は複数あります。 Web サイトのメイン メニューは、ユーザーが必要なコンテンツに移動するための主要なナビゲーション ツールです。 ただし、顧客が現在 Web サイトのどこにいるかはわかりません。
ブレッドクラム メニューは、顧客がホームページのどこにいるのかを知らせるセカンダリ ナビゲーション システムです。 これにより、ユーザーは Web サイトのページを簡単にナビゲートし、迷子になるのを防ぐことができます。
この記事では、ブレッドクラムとは何か、そしてそれがあなたのウェブサイトにどのように役立つかを見ていきます. 次に、ブレッドクラムを WordPress Web サイトに追加する方法を示します。 始めましょう！
WordPressのブレッドクラムとは何ですか?
ブレッドクラムは、階層的なナビゲーション メニューを表すために使用される用語です。 この種のメニューには、ヘンゼルとグレーテルが残したパンくずリストとは異なり、リンクの跡が含まれます。
多くのユーザーはホームページから WordPress サイトにアクセスしないため、ブレッドクラム ナビゲーションはユーザーがどこにたどり着いたかを理解するのに役立ちます。 検索エンジンもパンくずリストを使用して、Web ページの階層をよりよく理解します。
ブレッドクラムを追加する利点
WordPress パンくずメニューを Web サイトに追加すると、いくつかの利点があります。 たとえば、Google はブレッドクラムが大好きなので、この機能は検索エンジン最適化 (SEO) を改善し、より多くの訪問者をサイトに呼び込むことができます。
ブレッドクラム メニューは、サイトのユーザー エクスペリエンス (UX) を向上させるため、直帰率を下げることもできます。 ユーザーが Web サイトを簡単にナビゲートできる場合、ユーザーは Web サイトに時間を費やす可能性が高くなります。
WordPressでブレッドクラムを追加する方法
ブレッドクラムを WordPress Web サイトに追加するには、2 つの方法があります。 最も簡単な方法は WordPress プラグインを使用することですが、ブレッドクラムをサイトのheader.phpファイルにコーディングすることもできます。 いずれかの方法を使用する前に、何か問題が発生した場合に備えて、Web サイトのバックアップを作成する必要があります。
方法 1: プラグインを使用する
ブレッドクラムを WordPress に追加する最も簡単な方法は、ブレッドクラム プラグインを使用することです。 Breadcrumb NavXT や Yoast SEO など、使用できるプラグインは多数あります。
Yoast SEO は、Web サイトで既に使用されているプラグインである可能性が高いため、多くの場合、最適なオプションです。
ステップ 1: Yoast SEO プラグインをダウンロードする
Yoast は SEO プラグインであるため、幅広い機能を提供します。 これには、ブレッドクラム ナビゲーションの作成とスタイリングが含まれます。
このプラグインを使用するには、WordPress プラグイン ディレクトリからダウンロードする必要があります。 サイトのプラグインページに移動し、「Yoast SEO」を検索して、他のプラグインと同じようにプラグインをインストールして有効にするだけです。
ステップ 2: 関数をheader.phpファイルに追加する
プラグインを有効にした後、サイトのheader.phpファイルに関数を追加する必要があります。 このファイルにアクセスするには、 [外観] > [テーマ エディター]に移動し、ファイルを選択して開きます。
次に、ブレッドクラム設定メニューを表示する場所に次のコードを追加します。
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p>','</p><p>' );
}
?>
通常、このコードはheader.phpファイルの最後に配置します。 ただし、サイトのフロント エンドをチェックして結果がどのように表示されるかを確認して、メニューの配置を試すことができます。
ブレッドクラム機能をページの他の場所に表示したい場合は、上記の機能をテーマのsingle.phpまたはpage.phpファイルに追加することもできます。 1 か所だけに追加するようにしてください。
ステップ 3: ブレッドクラムのサポートを有効にする
最後に、ブレッドクラムのサポートを有効にする必要があります。 Yoast SEO では、これはSEO > Search Appearance > Breadcrumbsに移動することを意味します。
スイッチを「有効」に切り替えるだけで、準備完了です。 WordPress のブレッドクラム メニューがセットアップされ、すぐに使用できるようになります。
方法 2: 独自のブレッドクラムをコーディングする
Web サイトのブレッドクラムの追加は、コーディングによって手動で行うこともできます。 パンくずリスト プラグインを使用したくない場合は、パンくずリストなしでパンくずリストを追加できます。 これを試す前に、WordPress パンくずリストの SEO の可能性を最大限に活用するために、microdata を読んでおくことをお勧めします。
ステップ 1: スケルトン関数を作成する
ブレッドクラムを手動で WordPress に追加するには、PHP 関数を作成する必要があります。 この関数を作成する最初のステップは、スケルトンを構築することです。 他の関数との競合を避けるために、スケルトン関数には一意の名前が必要です。
function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}
上記の関数はスケルトンで、残りのブレッドクラム コードは中括弧内に配置されます。
ステップ 2: 基本ルールを追加する
スケルトンを作成したら、関数にルールを追加する必要があります。 ルールはブレッドクラム セクションに配置する必要があります。
/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';
/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );
上記のルールは通常、変数を使用するため、後で変更できます。 最初の 2 つの変数はブール値を使用します。ここで、「0」は false、「1」は true です。
ステップ 3: ' if else ' ステートメントを追加する
変数の下に、'if else' ステートメントを追加する必要があります。 このステートメントは、ユーザーが Web サイトのホームページにアクセスしているかどうかを確認します。 この情報に基づいて、ステートメントはブレッドクラムを表示するかどうかを決定します。
/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;
/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';
$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';
/* Build breadcrumbs here */
$breadcrumbs .= '</ol>';
echo $breadcrumbs;
このステートメントが関数に追加されていない場合、パンくずリストの設定は、必要なときに表示される場合と表示されない場合があります。
ステップ 4: 関数をテーマ ヘッダーに追加する
ブレッドクラム機能が完成したら、それを Web サイトのheader.phpファイルに追加できます。 [外観] > [テーマ エディター]に移動してファイルを開き、関数を最後に追加します。
次に、変更を保存し、フロント エンドで新しい Web サイトのブレッドクラム メニューを確認します。 メニューが適切に表示されるまで、機能とその配置を調整し続けることができます (または、必要に応じてブレッドクラムを無効にします)。
WP Engine でサイトをカスタマイズする
ブレッドクラム ナビゲーション メニューは、サイトの訪問者が道を見つけるのに役立ちます。 また、検索エンジンが Web サイトの階層を理解しやすくなります。 Yoast SEO のようなプラグインは、ブレッドクラムを Web サイトに追加する最も簡単な方法ですが、手動でコーディングすることもできます。
適切な Web ホストを使用すると、Web サイトのパフォーマンスが保証され、開発と UX に集中する時間を確保できます。 WP Engine は、最高の管理された WordPress ホスティング プランと、素晴らしい Web サイト体験を作成するための最高のリソースを提供できます!