巨大な店舗を歩き回り、自分がどこからスタートしたのか、どうやってメイン通路に戻ればいいのかわからなくなったことはないだろうか。大きなオンラインストアをナビゲーションしていると、同じように感じることがあります。
パンくずリストとは、WooCommerceストアで買い物客を案内するための親切な看板のようなものです。
カスタマイザーがサイト内を探しやすくなるだけでなく、検索エンジンにサイトの構造を理解してもらい、SEO対策にもつながります。
パンくずリストをWooCommerceストアに追加するのは驚くほど簡単です。この投稿では、あなたのサイトにパンくずを設置する簡単な方法をご紹介します。
なぜWooCommerceにパンくずリストを追加する必要があるのか？
パンくずリストは、商品ページやブログ投稿の上部に外観されるナビゲーションリンクです。このリンクは、訪問者が現在表示しているページにどのようにしてたどり着いたかを示します。
例えば、洋服を販売するWooCommerceストアがある場合、パンくずリストは次のようになります：ホーム ” メンズファッション ” ワイシャツ・ポロシャツ ” フォーマルシャツ.
WooCommerceでパンくずリストを有効化すると、カスタマイザーがオンラインストアをナビゲートし、探している商品を見つけやすくなります。商品属性やカテゴリーをクリックして関連商品を簡単に表示することができます。
パンくずリストは、検索エンジンがあなたのeコマースストアのリンクの階層や構造を理解するのにも役立ちます。Googleのような検索エンジンは、検索結果にパンくずを表示することで、クリック率を高めることもできます。
それでは、WooCommerceストアでパンくずリストを有効化する方法を見ていきましょう。ここでは2つの方法を取り上げますが、ほとんどのユーザーには最初の方法をお勧めします：
方法1：AIOSEOを使ってWooCommerceにパンくずリストを追加する（推奨）
WooCommerceでパンくずリストを有効化する最も簡単な方法は、All In One SEO（AIOSEO）プラグインを使用することです。
市場で最高のWordPress SEOプラグインであり、ボタンをクリックするだけでWooCommerceにパンくずリストを追加することができます。また、このプラグインは、技術的なスキルがなくても検索エンジン向けにストアを最適化することができます。
このチュートリアルでは、パンくずリストが含まれ、カスタマイザーのオプションが豊富なAIOSEO Proバージョンを使用します。
パンくずリストを含む無料版もあるが、パンくずテンプレートは提供されていない。
まず、あなたのサイトにAIOSEOプラグインをインストールし、有効化する必要があります。WordPressプラグインのインストール方法については、こちらのガイドをご参照ください。
有効化した後、All In One SEO ” 一般設定に移動し、ライセンスキーを入力する必要があります。ライセンスキーはAIOSEOアカウントエリアにあります。
次に、セットアップウィザードを使ってWooCommerceストアにAIOSEOをセットアップする必要があります。もしヘルプが必要であれば、All In One SEO for WordPressの設定方法のガイドに従ってください。
サイト上でプラグインを正しく設定したら、All In One SEO ” 一般設定ページに行き、’パンくずリスト’タブをクリックする必要があります。
その後、「パンくずリストを有効化」オプションをオンにすると、AIOSEOが自動的にパンくずマークアップをWooCommerceストアのコードに追加します。
次に、パンくずリストの表示方法を選択します。下にスクロールすると、パンくずリストを追加するさまざまな方法が表示されます。
ショートコードやブロックを使って手動でページや投稿に追加したり、ウィジェットエリアに追加したりできます。上級ユーザーなら、PHPコードを使ってテーマのテンプレートファイルにパンくずリストを追加することもできる。
WooCommerceの商品にパンくずリストを追加する方法は後述しますが、まずはカスタマイズオプションを見てみましょう。
パンくずリスト設定セクションまでスクロールすると、パンくずをカスタマイズするための複数の設定が表示されます。
例えば、区切り記号の変更、ホームページリンクの有効化、パンくずリストのプレフィックスの追加、フォーマットの変更などが可能です。ナビゲーションリンクがWooCommerceストアにどのように表示されるかのプレビューを見ることもできます。
AIOSEO Proでは、パンくずリストテンプレートもご利用いただけます。
これらのテンプレートを使用すると、コンテンツタイプ、タクソノミー、アーカイブごとに、プロフェッショナルなパンくずリンクをサイトに表示できます。
それだけでなく、WordPressプラグインは、テンプレートをカスタマイズするためのさまざまなオプションを提供しています。
例えば、「初期設定を使用する」のオプションを無効化し、より多くの設定を表示することができます。
ホームページリンク、投稿タイプアーカイブリンク、タクソノミーリンクの表示、テンプレートへのタグの追加、カテゴリーを優先するかタクソノミータグを優先するかの設定オプションがある。
複数の商品に親カテゴリーを設定している場合は、パンくずテンプレートエディターでカスタマイズすることもできます。
終わったら、変更を保存するのを忘れないでください。
次に、WooCommerceの商品ページにパンくずリストを追加する必要があります。
AIOSEOは4つの異なる方法を示しますが、最も簡単な方法は、あなたのオンラインストアにパンくずナビゲーションのリンクを表示するためにショートコードを使用することです。
パンくずリストを表示したい場所に、次のショートコードを追加するだけです：
[aioseo_breadcrumbs]
Products ” All Productsにアクセスして、商品ページを編集してください。次に、WordPressエディターの「テキスト」表示でショートコードを追加し、ページを更新します。
パンくずリストナビゲーションリンクの動作を確認するために、製品ページにアクセスすることができます。
テストサイトではこんな感じだった。
そのほか、WooCommerceストアのサイドバーにパンくずリストを追加することもできます。この方法では、サイドバーにサイト全体に表示されるので、ナビゲーションリンクを表示するために個々の商品ページを編集する必要はありません。
サイドバーにパンくずリストを表示するには、WordPressの管理エリアから外観 ” ウィジェットにアクセスします。
左上のプラスマークのアイコンをクリックし、「パンくず」を検索すると、「AIOSEO – パンくずリスト」ウィジェットが見つかります。サイドバーにドラッグ＆ドロップしてください。ナビゲーションリンクのタイトルを入力することもできます。
それが完了したら、「保存」ボタンをクリックします。
その後、WooCommerceストアを表示すると、サイドバーにパンくずリストが表示されます。
WooCommerceストアにパンくずリストを追加する他の方法を使用したい場合は、WordPressでパンくずナビゲーションリンクを表示する方法のガイドをご覧ください。
複数のカテゴリーにパンくずリストを追加する方法
WooCommerceストアに複数のカテゴリーを持つ商品がありますか？
もしそうなら、パンくずリストを正しく設定するのは難しいかもしれません。なぜなら、WordPressはカスタマイザーが商品ページにたどり着くまでの経路を記録しないからです。
しかし、AIOSEOは自動的にパンくずリストに最初のカテゴリーを追加し、複数のカテゴリーを持つ商品の正しいナビゲーションメニューを簡単に表示することができます。
プラグインには、商品カテゴリーなどのWordPressタクソノミー用にカスタマイズできるパンくずテンプレートも用意されている。すべてAll In One SEO ” 一般設定に移動し、’パンくずリスト’タブを選択するだけです。
次に、「パンくずリストテンプレート」セクションまでスクロールダウンし、「タクソノミー」タブを選択します。初期設定では、プラグインはWooCommerceストアのパンくずリストに親項目のリンクを表示します。
初期設定のテンプレートを使用する」オプションを無効化すると、「親項目リンクを表示する」が有効化されていることがわかります。こうすることで、サイト上のあらゆる商品の主要カテゴリーを簡単に表示することができます。
例えば、あなたがオンラインシューズショップを運営していて、ある商品がスニーカーとトレーナーの両方のカテゴリーにあるとします。
AIOSEOは自動的に最初のカテゴリーを選ぶ。
そうすれば、パンくずリストナビゲーションメニューに表示される。
方法2：WooCommerceパンくずリストプラグインを使用してパンくずリストを追加する
WooCommerceでパンくずリストを有効化するもう一つの方法は、WooCommerce Breadcrumbsプラグインを使用することです。
パンくずリストをオンラインストアに追加できる無料のWordPressプラグインです。プラグインは使いやすいですが、AIOSEOのようなカスタマイズ機能はありません。
まず、WooCommerceパンくずリストプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法のチュートリアルをご参照ください。
プラグインを有効化したら、WordPressの管理エリアから設定 ” WCパンくずリストにアクセスしてください。その後、「パンくずリストを有効化」のチェックボックスをクリックしてください。
次に、WooCommerceストアに表示されるナビゲーションリンクの外観を変更することができます。
WooCommerceプラグインでは、パンくずリストの区切り記号とパンくずリストの前後のHTMLタグを選択することができます。
下へスクロールすると、カスタマイザーのオプションが表示されます。例えば、ナビゲーションリンクに表示されるホームページのテキストとURLを変更することができます。
変更が終わったら、一番下にある「変更を保存」ボタンを忘れずにクリックしてください。
WordPressとWooCommerceのナビゲーションに関するエキスパートガイド
この投稿がWooCommerceでパンくずリストを追加する方法を学ぶのにお役に立てば幸いです。WordPress と WooCommerce のナビゲーションに関する他のガイドもご覧ください：
- 用語集パンくずリスト
- WordPressでパンくずナビゲーション・リンクを表示する方法
- スマートなWooCommerce商品検索の作り方
- WordPressに矢印キーによるキーボードナビゲーションを追加する方法
- WordPressでナビゲーションメニューを追加する方法（初心者ガイド）
- WordPressテーマでカスタムナビゲーションメニューを追加する方法
- WordPressの特定のメニューにカスタム項目を追加する方法
- WordPressでドロップダウンメニューを作成する方法（初心者ガイド）
- WordPressでログイン中のユーザーに異なるメニューを表示する方法
- WordPressナビゲーションメニューのスタイリング方法
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
ご質問やご提案がおありですか？ディスカッションを始めるためにコメントを残してください。