WordPressのウェブサイトにパンくずリストを追加する方法

公開: 2018-12-19

「パンくず」という用語は、（ヘンゼルとグレーテルが教えてくれたように）ウェブサイトの「ホーム」（またはホームページ）までのステップをたどるのに役立つ効率的なウェブサイトナビゲーションツールを指します。ユーザーは、ホームページに戻るリンク（またはラベル）のインライントラックを提供することにより、現在のページがサイト構造全体にどのように適合するかを確認できます。

ブレッドクラムのあるホームデポ製品ページ

ブレッドクラムは、実際には、WordPressWebサイトにとってあなたが思っているよりも重要です。ユーザーエクスペリエンスを向上させるだけでなく、サイトの検索ランキングを上げることもできます。グーグルはウェブサイトのこの構造要素が好きで、訪問者はあなたのページの1つに有機的につまずいたとき（あなたのバウンス率を下げる）に重要なナビゲーションの助けを得るでしょう。

このような統合されたネイティブシステムをWebサイトに追加するのは難しいと思うかもしれませんが、実際にはプラグインを使用すれば非常に簡単です。実際、Yoast SEOプラグインを使用している場合は、ブレッドクラム機能がすでにYoastに組み込まれているため、有利なスタートを切ることができます。そして、Yoastを介してパンくずリストを追加することは、間違いなく、そこにある好ましい方法の1つです。 Yoast SEOとは別に、プラグインBreadcrumb NavXTは、高度にカスタマイズ可能で、独自のDiviテーマでもうまく機能するもう1つの優れたオプションです。

私たちのYoutubeチャンネルを購読する

Yoastを使用してWordPressWebサイトにパンくずリストを追加する方法

YoastSEOを使用してWordPressWebサイトにパンくずリストを追加するには、次の3つの簡単な手順に取り組む必要があります。

YoastSEOプラグインをインストールしてアクティブ化する
BreadcrumbsコードスニペットをWordPressテーマに追加する
プラグイン設定でBreadcrumbsYoastBreadcrumbsを有効/構成します

YoastSEOプラグインをインストールしてアクティブ化する

Yoast SEOプラグインをインストールするには、WordPressダッシュボードに移動し、[プラグイン]> [新規追加]に移動します。次に、WordPressリポジトリで「yoast」を検索します。 Yoast SEOプラグインが表示されたら、クリックしてプラグインをインストールしてアクティブ化します。

パンくずリストワードプレス

ブレッドクラムコードスニペットをWordPressの子テーマに追加します

次に、WordPressテーマファイルに短いコードスニペットを追加する必要があります。したがって、まだ作成していない場合は、子テーマを作成することをお勧めします。この例では、パンくずリストのコードスニペットをデフォルトのTwentyNineteenWordPressテーマに追加する方法を紹介します。コードは任意のテーマファイル/テンプレートに追加できますが、ほとんどの場合、single.phpファイル（すべての投稿に表示される）、page.phpファイル（すべてのページに表示される）にコードを追加する必要があります。）、またはheader.phpファイル（サイト全体に表示するため）。

この例では、子テーマのheader.phpファイルにbreadcrumbsコードを追加します。親テーマからheader.phpファイルをコピーしたら、開いて、選択したコードエディターでファイルを編集します。

次に、header.phpファイルの一番下に、Yoastが提供する次のphpスニペットを追加して、Breadcrumbs機能をアクティブにします。

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

パンくずリストワードプレス

これにより、すべてのページのヘッダーのすぐ下にブレッドクラムが表示されます。これは、ブレッドクラムの一般的な配置です。

プラグイン設定でYoastブレッドクラムを有効にして構成します

コードスニペットがWordPressの子テーマに追加されたら、あとはYoastSEOプラグイン設定でブレッドクラムをアクティブ化するだけです。これを行うには、WordPressダッシュボードに移動し、[SEO]> [検索の外観]に移動して、[ブレッドクラム]タブをクリックします。ブレッドクラム設定で、オプションを「有効」に切り替えてブレッドクラムを有効にしてください。次に、必要に応じてブレッドクラム設定を構成できます。また、投稿のブレッドクラムに表示する分類法を選択することもできます。この例では、パンくずリストにカテゴリを表示するように投稿を設定します。

パンくずリストワードプレス

それでは、先に進んで、TwentyNineteenテーマで作成した投稿の1つでパンくずリストがどのように見えるかを確認しましょう。

ブレッドクラムを有効にする前の投稿は次のようになります。

パンくずリストワードプレス

ブレッドクラムを有効にした後の投稿は次のようになります。この特定の投稿の例には、ブレッドクラム設定で選択したブレッドクラムのカテゴリ分類を示すカテゴリ（「WordPress」）と親カテゴリ（「Webデザイン」）があります。

パンくずリストワードプレス

外部CSSを使用してブレッドクラムのスタイルを調整する必要がある場合があります。これを行うには、phpコードに含まれているCSSID「breadcrumbs」を使用できます。子テーマのstyle.cssファイルを開き（または、テーマカスタマイザーの[追加のCSS]の下に追加できます）、以下を追加します。

#breadcrumbs {

/*Add breadcrumb styling here*/

}

TwentyNineteenテーマの場合、次のカスタムCSSを追加して、ヘッダーテキストの余白を一致させたい場合があります。

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

パンくずリストワードプレス

ブレッドクラムの特定の場所をより細かく制御したい場合は、次のショートコードを使用して個々の投稿またはページに表示することもできます。

[wpseo_breadcrumb]

ブレッドクラムNavXTを使用してWordPressWebサイトにブレッドクラムを追加する

何らかの理由でYoastSEOをインストールしたくない場合、または別の簡単なオプションを探している場合は、BreadcrumbNavXTプラグインが最適です。

プラグインをインストールするには、WordPressダッシュボードに移動し、[プラグイン]> [新規追加]に移動します。次に、WordPressリポジトリで「パンくずリスト」を検索します。プラグインが表示されたら、クリックしてインストールしてアクティブ化します。

パンくずリストワードプレス

ブレッドクラムを呼び出してWebサイトに表示するには、ウィジェットページにある組み込みのブレッドクラムNavXTウィジェットを使用できます。これにより、ウィジェットをテーマによって提供されるさまざまなウィジェット領域にドラッグできます。これを行うには、WordPressダッシュボードに移動し、[外観]> [ウィジェット]に移動します。次に、ウィジェットをウィジェット領域または選択した場所にドラッグして、ウィジェットの設定を更新します。

パンくずリストワードプレス

この例では、Diviテーマを使用して、サイドバーの上部にブレッドクラムを表示しています。投稿の内容は次のとおりです。

パンくずリストワードプレス

Yoast Breadcrumbの例と同様に、子テーマに必要なコードを追加することで、サイトへのブレッドクラムトレイルを呼び出すこともできます。これらが提供する、schema.orgのbreadcrumblistに準拠したコードは次のとおりです。

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

この例ではDiviテーマを使用しているので、Articleタグのすぐ上にあるDiviChildテーマのSingle.phpファイルにコードを追加します。これにより、すべての投稿の上部にブレッドクラムが表示されます。

パンくずリストワードプレス

コードを追加した後の投稿は次のようになります。

パンくずリストワードプレス

プラグイン設定を使用したブレッドクラムの構成

Breadcrumb NavXTプラグインには、ブレッドクラムを構成するための強力なオプションがいくつかあります。ブレッドクラムのテンプレート全体を、さまざまな分類法などに合わせてカスタマイズできます。 [設定]> [パンくずリスト]に移動すると、WordPressダッシュボードからこれらの設定にアクセスできます。

パンくずリストワードプレス

ブレッドクラムのスタイリング

ブレッドクラムのスタイルを設定する場合は、コードに含まれている「ブレッドクラム」と呼ばれるクラスをターゲットにできます。

次のCSSを子テーマのstyle.cssファイルまたはテーマカスタマイザーの追加CSSに追加するだけです。

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Diviテーマでブレッドクラムウィジェットを使用する場合は、Diviのサイドバーモジュールを使用して、DiviBuilder内のブレッドクラムにスタイルを追加することもできます。

最終的な考え

ブレッドクラムは、使いやすさとSEOの両方にとってWebサイトの重要な部分です。したがって、WordPressサイトにブレッドクラムを追加することを検討している場合は、この記事に記載されているプラグイン（YoastSEOおよびBreadcrumbNavXT）によって提供されるメソッドから始めることをお勧めします。すでにSEOプラグインを利用している場合は、Yoastブレッドクラムを使用するのが最も理にかなっています。これは、すでに自由に使用できるためです。ただし、BreadcrumbNavXTも高度にカスタマイズ可能なオプションです。もちろん、テーマファイルにアクセスする必要があるかもしれませんが、全体として、プロセスは単純なものです。どちらかといえば、これがあなた自身のWordPressサイトでパンくずリストを取得する苦痛を和らげるのに役立つことを願っています。

コメントでお返事をお待ちしております。

乾杯！