WooCommerce でカテゴリを検索する方法

公開: 2022-02-15

WooCommerce でカテゴリ別に検索する方法を知りたいですか?

多くの製品とカテゴリを備えたWordPress eコマースサイトがある場合に便利です. ただし、WooCommerce はデフォルトでその機能をサポートしていません。

この記事では、WooCommerce でカテゴリ検索を有効にする 2 つの方法を紹介します。

ナビゲートに役立つ目次を次に示します。

特定のカテゴリに限定した検索フォームを作成する方法
カテゴリ選択検索フォームの作成方法

WooCommerce でカテゴリ別に検索する理由

デフォルトでは、WooCommerce の検索結果には、既存のすべてのカテゴリの製品が表示されます。

商品数が少ないオンラインストアであれば問題ありません。

しかし、数千の商品と膨大な数のカテゴリを扱う巨大なストアになると、検索が面倒になる可能性があります。

特定の製品を検索したときに、探しているものが含まれていない膨大な数の検索結果が表示されたことはありませんか? そうすれば、これがどれほどイライラするかがわかります。

オンラインストアの訪問者が目的の商品を見つけられなかった場合、ほとんどの場合、すぐに離れてしまいます。

収入に影響するだけでなく、サイトの直帰率も上昇します。

直帰率は Google の重要なランキング要素の 1 つであるため、検索エンジンからのトラフィックを獲得したい場合は、直帰率をできるだけ低く保つことをお勧めします。

訪問者が WooCommerce カテゴリで検索できるようにする方法は 2 つあります。

1 つ目は、特定のカテゴリに限定した検索フォームを作成することです。 2 つ目は、訪問者が検索したいカテゴリを選択できる検索フォームを作成することです。

それぞれを順番に分解してみましょう。

方法 1: 特定のカテゴリに限定した検索フォームを作成する

特定の WooCommerce カテゴリを検索する検索バーを作成する最も簡単な方法は、SearchWP のようなプラグインを使用することです。

SearchWP logo

これは、世界中の 30,000 以上の Web サイトで信頼されている最高の WordPress 検索プラグインです。

WooCommerce カテゴリによる検索とは別に、SearchWP を使用すると、検索可能な製品属性、タグ、およびレビューを作成できます。

訪問者が必要な製品を見つけやすくなり、売上が増加し、ユーザーエクスペリエンスが向上します。

また、SearchWP にはシームレスな WooCommerce 統合があり、サイト上の既存の検索バーに自動的に統合されます。

SearchWP は、次の方法で WordPress 検索を強化することもできます。

PDF および Office ドキュメントのインデックス作成: デフォルトでは、WordPress はサイト上のドキュメント内のテキストをインデックス化しません。 SearchWP を使用すると、数回クリックするだけで PDF および Office ドキュメントを検索結果に含めることができます。
キーワードのステミング: ネイティブの WordPress 検索エンジンは、「hat」や「hats」などのさまざまなキーワードのバリエーションが本質的に同じ製品を指していることを理解していません。 SearchWP を使用すると、キーワードのステミングを有効にして、この問題を解決できます。
検索トラッキング: 訪問者が Web サイトで何を検索しているかに興味を持ったことはありますか? SearchWP を使用すると、サイト上のすべての検索アクティビティデータを収集できます。この貴重な情報を使用して、顧客のニーズをよりよく理解することができます。

次に、SearchWP を使用して特定の WooCommerce カテゴリにバインドされた検索バーを追加する方法を見てみましょう。

ステップ 1: SearchWP をインストールしてアクティブ化する

最初のステップは、ここで SearchWP のコピーを入手することです。

次に、SearchWP アカウントに移動し、[ダウンロード] タブを開きます。

go to the downloads tab

そこで、[ SearchWP をダウンロード] ボタンを押して、プラグインをコンピューターに保存します。

press the download searchwp button

プラグインをアクティブ化するためにすぐに必要になるため、ライセンスキーをコピーします。

copy your searchwp license key

次のステップは、SearchWP プラグインの ZIP ファイルを WordPress サイトにアップロードすることです。

それを行う方法について復習が必要ですか? WordPress プラグインのインストール方法については、この段階的なチュートリアルをご覧ください。

SearchWP をインストールしたら、WordPress ダッシュボードのトップバーに表示されるSearchWPボタンをクリックします。

go over to the searchwp settings

次に、[ライセンス] タブに移動します。

open the license tab

プラグインのライセンスキーを適切なフィールドに貼り付けて、[ Activate ] をクリックします。

activate your license key

おめでとう。 SearchWP のコピーが正常にアクティブ化され、次のステップに進む準備ができました。

ステップ 2: WooCommerce 統合拡張機能をダウンロードしてインストールする

次のステップは、WooCommerce 統合拡張機能をインストールすることです。

SearchWP と WooCommerce のシームレスな統合を保証し、訪問者に可能な限り最高のユーザーエクスペリエンスを提供します。

WooCommerce 統合拡張機能のダウンロードページで入手できます。

そこに到達したら、[拡張機能のダウンロード] ボタンをクリックして、コンピューターに保存します。

download-woocommerce-integration-extension

ダウンロードが完了したら、SearchWP と同じ方法でインストールしてアクティブ化するだけです。

ステップ 3: 新しい検索エンジンを作成する

次のステップは、新しい検索エンジンを作成することです。これを行うには、SearchWP 設定の [エンジン] タブに移動します。

go over to the engines tab

ここでは、現在使用している検索エンジンのリストが表示され、それらをカスタマイズしたり、新しいものを追加したりできます。

the list of your search engines

検索エンジンは、WordPress が検索を実行する際に従う一連のルールと考えることができます。それらを編集することで、サイトでの検索の動作を完全にカスタマイズできます。

たとえば、特定の投稿やページを検索結果から除外したり、カスタム投稿タイプを検索ソースとして追加したりできます。

現時点では、Web サイト全体に適用されるデフォルトの検索エンジンのみがあります。

特定の WooCommerce カテゴリのみで検索するカスタム検索フォームを作成したいので、新しい検索エンジンを追加します。

これを行うには、[新規追加] ボタンをクリックします。

press add new engine

その後、補助検索エンジンが表示されます。

the supplemental engine

ご覧のとおり、私たちの場合、投稿、ページ、メディア、製品、ユーザーの 5 つの検索ソースがあります。

ソースの数は、サイトにインストールされているプラグインの数によって異なります。

たとえば、WooCommerce プラグインがインストールされているため、 ProductsソースとUsersソースが自動的に追加されました。

この検索エンジンで WooCommerce 製品のみを検索するようにしたいので、 Products以外のすべてのソースを削除します。

これを行うには、右上の [ソースと設定]をクリックします。

press sources and settings button

Products以外のすべてのボックスのチェックを外し、エンジンラベルの名前をよりわかりやすい名前に変更します。

「Hats」製品カテゴリの検索エンジンを作成したいとします。そのため、それをHatsと呼びます。

choose the products source and rename the engine

終了したら、 [完了]を押します。

press done to save the engine's settings

次のステップは、新しい検索エンジンで検索する製品カテゴリを指定することです。

これを行うには、[ルールの編集] をクリックします。

press the edit rules button

次に、[ルールの追加] をクリックします。

add a new rule

ドロップダウンリストから製品カテゴリの分類法を選択します。

select the product categories attribute

次に、製品検索エンジンに固執させたい特定のカテゴリを選択します。

type the name of your category

この例では、帽子のカテゴリを選択します。終了したら、 [完了]を押します。

press done to save the category

行った変更を保存するには、右上の [エンジンを保存] をクリックします。

click save engines

それでおしまい。 Hats WooCommerce 製品カテゴリのみを検索する新しい検索エンジンの作成に成功しました。

ステップ 4: ショートコード拡張機能をダウンロードしてインストールする

次に、Shortcodes SearchWP 拡張機能をダウンロードする必要があります。この拡張機能を使用すると、ショートコードを含む検索バーを投稿またはページの任意の場所に追加できます。

ショートコード拡張機能のダウンロードページで取得できます。

そこに着いたら、[拡張機能のダウンロード] ボタンを押します。

download the shortcodes extension

次に、SearchWP と同じ方法で拡張機能をインストールして有効にします。

ステップ 5: 新しい検索フォームページを作成する

次のステップは、別のページを作成することです。新しく作成された製品検索エンジンにリンクされた検索バーを配置します。

これを行うには、WordPress ダッシュボードの [ページ] の下にある [新規追加] をクリックします。

add a new page

次に、ページにタイトルを付け、[プラス] をクリックして新しいブロックを追加します。

click the plus button

カスタム HTMLブロックを見つけてクリックします。

select the custom html block

次に、以下のコードをコピーして、追加したカスタム HTML ブロックに貼り付けます。

[searchwp_search_form engine="hats" var="searchvar" button_text="Find Results"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="hats" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="hats"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="hats"]
</div>

検索エンジンにHats以外の名前を付けた場合は、上記のコードの 4 か所でその名前を置き換える必要があることに注意してください。

このコードは、 Hats検索エンジンにリンクされた検索フォームを出力します。これは、「帽子」の WooCommerce カテゴリのみで検索することを意味します。

完了したら、右上の [公開] ボタンを押して、新しいページを公開します。

press the publish button

次に、次のステップと同様に[ページを表示] をクリックします。新しい検索ボックスをテストします。

click view page

ステップ 6: 新しい検索をテストする

新しい検索ボックスをテストするために、赤い帽子と赤い T シャツの 2 つの製品を作成しました。どちらも適切なカテゴリに割り当てられます。

検索フォームに「赤」の検索語を入力するとどうなるか見てみましょう。

press find results

ご覧のとおり、商品「赤い T シャツ」は検索結果に表示されません。「赤い帽子」だけが登場。これは、この検索ボックスを帽子の製品カテゴリに限定することに成功したことを意味します。

we found our page

おめでとうございます。WooCommerce で特定のカテゴリに限定された検索バーを作成する方法を学習しました。

方法 2: カテゴリ選択検索フォームを作成する

しかし、訪問者が検索したいカテゴリを選択できるようにしたい場合はどうでしょうか? これを行う最善の方法は、カテゴリ選択検索フォームを追加することです。

ステップ 1: SearchWP をインストールしてアクティブ化する

最初のステップは、SearchWP プラグインをインストールして有効にすることです。まだ行っていない場合は、ここで SearchWP のコピーを取得できます。

この記事の前半で、ウェブサイトに SearchWP をインストールする方法について詳しく説明したので、そのチュートリアルをチェックしてみてください.

ステップ 2: 子テーマを作成する

SearchWP をインストールしてアクティブ化したら、次のステップは、サイトで現在使用しているテーマの子テーマを作成することです。

この方法ではテーマコードを変更する必要があるため、これは非常に重要です。

問題は、子テーマのコードを編集すると、変更が親テーマのファイルとは別に保持されることです。

そのため、コードの編集中にサイトがクラッシュするような重大なミスを犯した場合でも、親テーマに簡単に切り替えることができます。

さらに、親テーマに直接変更を加えた場合、更新するとすぐにそれらが失われます。

そのため、WordPress テーマのコードを編集する場合は子テーマが不可欠です。

子テーマの作成方法を復習する必要がある場合は、子テーマの作成方法のチュートリアルをご覧ください。

ステップ 3: Functions.php ファイルを変更する

子テーマを作成したら、次のステップは functions.php ファイルを開くことです。

これを行うには、WordPress ダッシュボードの[外観] » [テーマファイルエディター]に移動します。

go to the theme editor

次に、右側のパネルでfunctions.phpファイルを見つけてクリックします。

open the functions php file

開いたら、次のコードをコピーしてファイルの一番下に貼り付けます。

function my_searchwp_get_search_form_with_categories_dropdown( $form ) {
    ob_start(); ?>
        <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
            <label>
                <span class="screen-reader-text">Search For</span>
                <input type="search" class="search-field" placeholder="Search..." value="<?php echo esc_attr( get_search_query() ); ?>" name="s" title="Search for:" />
            </label>
            <?php
                // for more information see http://codex.wordpress.org/Function_Reference/wp_dropdown_categories
                $swp_cat_dropdown_args = array(
                        'show_option_all'  => __( 'Any Category' ),
                        'name'             => 'swp_category_limiter',
                    );
                wp_dropdown_categories( $swp_cat_dropdown_args );
            ?>
            <input type="submit" class="search-submit" value="Search" />
        </form>
    <?php return ob_get_clean();
}
 
add_filter( 'get_search_form', 'my_searchwp_get_search_form_with_categories_dropdown' );

テストサイトでの表示は次のとおりです。

paste the code to the functions php file

このコードは、サイトの既存の各検索バーの横にカテゴリドロップダウンメニューを追加します。訪問者が検索したいカテゴリを選択できるようにします。

コードを追加したら、ページの下部にある[ファイルを更新] ボタンを押して変更を保存することを忘れないでください。

click update file

完了すると、最後のステップに進み、新しい検索をテストする準備が整います。

ステップ 4: 新しい検索をテストする

これを行うには、WordPress ダッシュボードの左上にあるサイト名の下にある [サイトにアクセス] ボタンをクリックします。

click visit site

ここで、検索フォームのいずれかを見ると、その横にカテゴリドロップダウンメニューが表示されます。

the category drop-down menu

この記事では、WooCommerce カテゴリで検索する検索フォームを作成する方法について、2 つの方法を学びました。

カテゴリ固有のフォームを作成する準備ができている場合は、ここで SearchWP のコピーを入手できます。

検索結果から特定のページを削除しますか? WordPress でサイト検索結果からページを除外する方法については、このステップバイステップガイドをご覧ください。

サイトに検索バーを追加する方法を知りたいですか? 次に、WordPress に検索バーを追加する方法と 4 つの異なる方法のチュートリアルに興味があるかもしれません。

WooCommerce でカテゴリを検索する方法

WooCommerce でカテゴリ別に検索する理由

方法 1: 特定のカテゴリに限定した検索フォームを作成する

ステップ 1: SearchWP をインストールしてアクティブ化する

ステップ 2: WooCommerce 統合拡張機能をダウンロードしてインストールする

ステップ 3: 新しい検索エンジンを作成する

ステップ 4: ショートコード拡張機能をダウンロードしてインストールする

ステップ 5: 新しい検索フォーム ページを作成する

ステップ 6: 新しい検索をテストする

方法 2: カテゴリ選択検索フォームを作成する

ステップ 1: SearchWP をインストールしてアクティブ化する

ステップ 2: 子テーマを作成する

ステップ 3: Functions.php ファイルを変更する

ステップ 4: 新しい検索をテストする

ステップ 5: 新しい検索フォームページを作成する