最も必要とされている時に、信頼できるWordPressチュートリアルを。
WordPress入門ガイド
WPBカップ
2500万人以上
当社のプラグインを使用しているウェブサイト
16+
WordPress経験年数
3000+
専門家によるWordPressチュートリアル

WooCommerceにパンくずリストを追加する方法(初心者ガイド)

広大な店舗をさまよっていて、どこから始めたのか、メイン通路に戻る方法がわからなくなったことはありませんか?大きなオンラインストアのナビゲーションも同じように感じることがあります。

パンくずリストは、ウェブサイト上でたどってきた経路を示す小さなナビゲーショントレイルであり、買い物客をWooCommerceストアに案内するのに役立つ標識のようなものです。

顧客がサイト内を移動しやすくなるだけでなく、検索エンジンもサイトの構造をより深く理解できるようになり、SEOの向上につながる可能性があります。

朗報は、WooCommerceストアにパンくずリストを追加するのは驚くほど簡単であるということです。この記事では、WooCommerceのパンくずリストをすぐに簡単に追加できる方法をいくつかご紹介します。

WooCommerceパンくずリストを追加する

💡クイックアンサー:WooCommerceのパンくずリストを追加する方法

お急ぎですか?このガイドで説明する2つの方法の簡単な概要を以下に示します。

  • 方法1:All in One SEO(推奨) – 検索ランキングを最大化するための最良の選択肢です。完全にカスタマイズ可能なパンくずリストを追加し、Google向けの正しいスキーママークアップを自動的に適用します。
  • 方法2:WooCommerce Breadcrumbs Plugin – シンプルで無料の代替手段です。基本的なビジュアルリンクのみが必要で、高度なSEOコントロールやスタイリングが必要ない場合に便利です。

なぜWooCommerceパンくずリストを追加する必要があるのですか?

パンくずリストとは、商品ページやブログ記事の上部に表示されるナビゲーションリンクのことです。これらのリンクは、訪問者が現在表示しているページにどのようにたどり着いたかを示します。

たとえば、衣類を販売するWooCommerceストアをお持ちの場合、パンくずリストメニューは次のようになります:ホーム » メンズファッション » シャツ&ポロ » フォーマルシャツ

WooCommerceパンくずリストの例

WooCommerceでパンくずリストを有効にすると、お客様はオンラインストアをより簡単にナビゲートし、探している商品を見つけることができます。商品属性やカテゴリをクリックして、関連商品を表示できます。

パンくずリストは、検索エンジンがeコマースストアのリンクの階層と構造を理解するのにも役立ちます。Googleのような検索エンジンは、検索結果にパンくずリストを表示することもあり、クリック率を向上させることができます。

それでは、WooCommerceストアでパンくずリストを有効にする方法を見ていきましょう。2つの方法を説明しますが、ほとんどのユーザーには最初の方法をお勧めします。

WooCommerceにパンくずリストを追加する最も簡単で強力な方法は、All in One SEOプラグインを使用することです。これは、ストア全体を検索エンジン向けに最適化するのに役立つ最高のWordPress SEOプラグインです。

クリックするだけで、SEOフレンドリーなパンくずリストを有効にできます。このプラグインは、技術的なスキルを必要とせずに、サイトマップからスキーママークアップまですべてを処理します。

WPBeginnerでは、All in One SEOをすべてのサイトで使用しています。市場で最も包括的なツールキットであり、数年前にYoastから乗り換えた理由です。

また、私たちの経験に関する詳細については、AIOSEOの全レビューもお読みください。

注意:このチュートリアルでは、パンくずリストのテンプレートが含まれ、カスタマイズのためのより多くのオプションを提供するAIOSEO Proバージョンを使用します。

パンくずリストが含まれていますが、パンくずリストのテンプレートは提供されない無料バージョンもあります。

まず、AIOSEOプラグインをウェブサイトにインストールして有効化する必要があります。WordPressプラグインのインストール方法については、ガイドを参照してください。

有効化後、All in One SEO » General Settingsに移動し、ライセンスキーを入力してください。キーはAIOSEOアカウントエリアで見つけることができます。

All in One SEO ライセンス

次に、セットアップウィザードを使用してWooCommerceストアでAIOSEOを設定する必要があります。ヘルプが必要な場合は、WordPress向けAll in One SEOの設定方法に関するガイドに従ってください。

ウェブサイトでプラグインを正しく設定したら、All in One SEO » 一般設定ページに移動し、「パンくずリスト」タブをクリックする必要があります。

All in One SEOでパンくずリストの表示を有効にする

その後、「パンくずリストを有効にする」スイッチを切り替えるだけです。これにより、サイトのコードに適切なコード(スキーママークアップと呼ばれる)が自動的に追加されます。

これは検索エンジンが構造を理解するのに役立ちますが、まだ人間にはリンクが表示されません。

次に、WooCommerceのパンくずリストをカスタマイズする必要があります。下にスクロールすると、オンラインストアにパンくずリストを追加するさまざまな方法が表示されます。

ショートコードまたはブロックを使用して、任意のページまたは投稿に手動で追加したり、ウィジェットエリアに追加したりできます。上級ユーザーは、PHPコードを使用してテーマのテンプレートファイルにパンくずリストを追加することもできます。

以下に、WooCommerceの商品にパンくずリストを追加する方法を説明しますが、その前にカスタマイズオプションを見てみましょう。

💡プロのヒント: 以下の方法を使用する前に、まずテーマの設定を確認することをお勧めします。

多くのモダンなテーマには、AIOSEOと連携するパンくずリストオプションが組み込まれています。これは、サイトのデザインに完全に一致するパンくずリストを追加する最も簡単な方法であることがよくあります。

パンくずリストの表示オプション

次に、パンくずリスト設定セクションまでスクロールすると、パンくずリストをカスタマイズするための複数の設定が表示されます。

たとえば、区切り記号を変更したり、ホームページリンクを有効にしたり、パンくずリストのプレフィックスを追加したり、フォーマットを変更したりできます。WooCommerceストアでのナビゲーションリンクの外観のプレビューを確認することもできます。

パンくずリストの設定

AIOSEO Proでは、パンくずリストのテンプレートにもアクセスできます。これらは、パンくずリストのナビゲーションパスがどのように構築されるかを定義する「レシピ」と考えてください。

これにより、商品ページ用の異なる構造、ブログ記事用の別の構造などを作成でき、サイト全体でナビゲーションを明確かつプロフェッショナルに保つことができます。

AIOSEO パンくずリストテンプレート

それだけでなく、WordPressプラグインはテンプレートをカスタマイズするためのさまざまなオプションも提供しています。

たとえば、「デフォルトテンプレートを使用する」オプションを無効にして、その他の設定を表示できます。

商品パンくずリストテンプレートをカスタマイズ

ホームページリンク、投稿タイプアーカイブリンク、タクソノミーリンクを表示するオプションがあり、テンプレートにタグを追加したり、カテゴリまたはタグタクソノミーを優先するかどうかを選択したりできます。

複数の商品の親カテゴリを設定している場合は、パンくずリストテンプレートエディタでカスタマイズすることもできます。

完了したら、変更を保存することを忘れないでください。

次に、WooCommerceの商品ページにパンくずリストを追加する必要があります。

AIOSEOは4つの異なる方法を表示しますが、最も簡単な方法は、オンラインストアにパンくずナビゲーションリンクを表示するためにショートコードを使用することです。

ショートコードを使用してパンくずリストを追加する

パンくずリストを表示したい場所に、次のショートコードを追加するだけです。

[aioseo_breadcrumbs]

これは、特定のページにのみパンくずリストを追加したい場合に最適なオプションです。

これを行うには、Products » All Productsに移動して商品ページを編集します。次に、WordPressエディターの「テキスト」ビューにショートコードを追加して、ページを更新します。

ただし、ほとんどのユーザーがすべてのページにパンくずリストを表示したい場合は、次に説明するサイドバーウィジェットの方法をお勧めします。これにより、ページを1つずつ編集する手間が省けます。

商品ページにショートコードを追加

これで、商品ページにアクセスして、パンくずリストナビゲーションリンクが機能していることを確認できます。

これは、テストウェブサイトでの表示例です。

パンくずリストの例

それに加えて、WooCommerceストアのサイドバーにパンくずリストを追加することもできます。これにより、ナビゲーションリンクを表示するために個々の商品ページを編集する必要がなくなります。

サイドバーにパンくずリストを表示するには、WordPress管理画面の外観 » ウィジェットに移動できます。

注意: ブロックベースのテーマを使用している場合、「ウィジェット」メニューが表示されないことがあります。代わりに、外観 » エディターを使用して、テンプレートにAIOSEOパンくずリストブロックを追加します。

左上にあるプラス記号アイコンをクリックし、「パンくずリスト」と検索して「AIOSEO – Breadcrumbs」ウィジェットを見つけます。サイドバーにドラッグアンドドロップするだけです。ナビゲーションリンクのタイトルを入力することもできます。

AIOSEOパンくずリストウィジェット

それが完了したら、「保存」ボタンをクリックできます。

次に、WooCommerce ストアを表示して、サイドバーにパンくずリストが表示されていることを確認してください。

WooCommerce サイドバー パンくずリスト

WooCommerceストアにパンくずリストを追加する他の方法を使用したい場合は、WordPressでパンくずナビゲーションリンクを表示する方法に関するガイドを確認してください。

複数のカテゴリにパンくずリストを追加する方法

WooCommerceストアに複数のカテゴリを持つ商品がありますか?

はいの場合、WordPressはお客様が商品ページにたどり着いた経路を記録しないため、パンくずリストを正しく設定するのは難しい場合があります。

ただし、AIOSEOは自動的にパンくずリストに最初のカテゴリを追加し、複数のカテゴリを持つ商品の正しいナビゲーションメニューを表示しやすくします。

このプラグインは、商品カテゴリなどのWordPressタクソノミー用にカスタマイズできるパンくずリストテンプレートも提供します。行う必要があるのは、All in One SEO » General Settingsに移動し、「Breadcrumbs」タブを選択することだけです。

次に、「パンくずリストテンプレート」セクションまでスクロールし、「分類」タブを選択します。デフォルトでは、プラグインはWooCommerceストアのパンくずリストに親アイテムのリンクを表示します。

パンくずリストに親カテゴリを表示する

「デフォルトテンプレートを使用する」オプションを無効にすると、「親アイテムリンクを表示する」が有効になります。これにより、ウェブサイト上のあらゆる商品に対して、プライマリカテゴリを簡単に表示できます。

例えば、オンライン靴店を経営していて、ある製品がスニーカーとトレーナーの両方のカテゴリに属しているとします。

製品には複数のカテゴリがあります

AIOSEOは自動的に最初のカテゴリを選択します。

次に、それをパンくずナビゲーションメニューに表示します。

複数のカテゴリのパンくずリストプレビュー

オプション2:WooCommerce Breadcrumbsプラグインを使用する(無料でシンプル)

WooCommerceでパンくずリストを有効にするもう1つの方法は、WooCommerce Breadcrumbsプラグインを使用することです。

これは、オンラインストアにパンくずリストを追加できる無料の WordPress プラグインです。このプラグインは使いやすいですが、AIOSEO にあるようなカスタマイズ機能は不足しています。

まず、WooCommerce Breadcrumbsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するチュートリアルを参照してください。

プラグインがアクティブになったら、WordPress管理エリアから設定 » WC Breadcrumbsに移動できます。その後、「パンくずリストを有効にする」のチェックボックスをクリックしてください。

WooCommerceパンくずリストを有効にする

次に、WooCommerceストアに表示されるナビゲーションリンクの外観を変更できます。

WooCommerceプラグインを使用すると、パンくずリストの前後にパンくずリストの区切り記号とHTMLタグを選択できます。

次に、下にスクロールすると、カスタマイズのためのさらに多くのオプションが見つかります。たとえば、ナビゲーションリンクに表示されるホームページのテキストとURLを変更できます。

その他のWooCommerceパンくずリスト設定

変更が完了したら、一番下にある「変更を保存」ボタンをクリックするのを忘れないでください。

WooCommerceでパンくずリストを追加することに関するよくある質問

WooCommerceにパンくずリストを追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

すべてのWordPressテーマはWooCommerceのパンくずリストをサポートしていますか?

多くのモダンなテーマ、特にWooCommerce用に構築されたテーマには、独自のパンくずリスト機能が含まれています。ただし、それらの外観と設定は制限される場合があります。

All in One SEOのような専用プラグインを使用すると、はるかに多くの制御が可能になります。また、Googleがサイト構造を適切にインデックスできるように、必要なスキーママークアップがコードに追加されることも保証します。

パンくずリストのスタイルと外観を変更できますか?

はい。AIOSEOのようなプラグインを使用すると、設定メニューから区切り文字、テキスト、プレフィックス、その他の表示オプションを簡単に変更できます。

より深い視覚的な変更のために、カスタムCSSを適用して、パンくずリストをサイトのブランディングとデザインに完全に一致させることもできます。

パンくずリストはSEOにとって重要ですか?

もちろんです。パンくずリストは内部リンクを作成し、Google のような検索エンジンがサイトの階層と構造を理解するのに役立ちます。

Googleは検索結果にパンくずリストを直接表示するため、リスティングの外観が向上し、クリック率が向上する可能性があります。

あなたが気に入るであろう、さらに多くのWooCommerceのヒント

この記事で、WooCommerceにパンくずリストを追加する方法を学べたことを願っています。WooCommerceに関連する他のガイドも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterFacebookでも私たちを見つけることができます。

開示: 当社のコンテンツは読者によってサポートされています。これは、一部のリンクをクリックすると、手数料が発生する可能性があることを意味します。WPBeginnerがどのように資金調達されているか、なぜそれが重要なのか、そしてどのように私たちをサポートできるかを確認してください。こちらが当社の編集プロセスです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

コメント

  1. おめでとうございます。この記事の最初のコメント者になる機会を得ました。
    質問や提案はありますか?コメントを残して、議論を開始してください。

Leave A Reply

コメントいただきありがとうございます。すべてのコメントは、コメントポリシーに従ってモデレーションされ、メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で意味のある会話をしましょう。