SearchWPブログ

WordPressのチュートリアル、ヒント、リソースでビジネスを成長させる

カスタムWooCommerce検索ウィジェットのサムネイルを追加する方法

お客様が青いメリノウールセーターを探してWooCommerceストアにアクセスしたと想像してみてください。「blue merino」と検索バーに入力しても、必要なものがすべて揃っているにもかかわらず、結果はゼロです。

それがデフォルトのWooCommerce検索の仕組みであり、ストアオーナーが毎日実際に売上を失っているのを見てきました。

問題は、デフォルトのWooCommerce検索がキーワードを製品タイトルと基本的なコンテンツに対してのみ一致させることです。製品属性、バリエーション、タグ、カテゴリ、データベースに保存されているカスタムフィールドを完全に無視します。

カスタムWooCommerce検索ウィジェットを追加することが、その問題を解決する方法です。適切に設定された検索フォームをサイドバー、ヘッダー、ショップページ、またはサイトの他の場所に配置し、製品を実際に理解する検索エンジンに接続できます。

この記事では、コードを一行も書かずに、カスタムWooCommerce検索ウィジェットをストアにステップバイステップで追加する方法を説明します。

カスタムWooCommerce検索ウィジェットとは?

カスタムWooCommerce検索ウィジェットとは、サイトのどこにでも配置でき、設定された検索エンジンに接続できる検索フォームのことです。デフォルトの検索バーとは異なり、エンジンが何を検索するか、結果がどのようにランク付けされるか、フォームがどこに表示されるかを制御できます。

従来のWordPressテーマでは、Widgets画面を使用して、サイドバー、ヘッダー、フッターなどの領域に検索フォームを配置します。ブロックベースのFSE(フルサイト編集)テーマでは、代わりにブロックエディターを使用し、検索フォームブロックを任意のテンプレートまたはページにドロップできます。

どちらの場合も、ウィジェット自体はフロントエンドの表示にすぎません。真のアップグレードは、それを支えるものから生まれます。

カスタムWooCommerce検索ウィジェットを追加する理由

適切に配置された検索ウィジェットは、ストアのナビゲーションを購入への直接のパスに変えます。デフォルトのエクスペリエンスを置き換えることで得られるものは次のとおりです。

  • 製品の発見可能性の向上。デフォルトの検索では、色、サイズ、SKU、素材などのカスタム属性で保存された製品を見逃します。実際の検索エンジンにバックアップされたカスタムウィジェットは、顧客がどの属性で検索しても製品を見つけます。
  • 既存のトラフィックからの売上の増加。サイト検索を使用する訪問者は、閲覧するだけの訪問者よりも大幅に高いコンバージョン率を示します。検索で結果がゼロになるたびに、獲得するためにすでに支払ったコンバージョンを失います。
  • 検索対象の制御。カスタムウィジェットを使用すると、検索エンジンが読み取る製品データ(タイトル、説明、タグ、バリエーション、カスタムフィールド、またはそれらの組み合わせ)を正確に決定できます。ページごとに異なる検索ウィジェットを作成し、それぞれを異なる目的に合わせて調整することもできます。
  • 検索分析。検索が機能したら、顧客が何を検索しているか、どのクエリで結果がゼロになるかを正確に追跡できます。ウェブサイトで最も検索されている製品を見つける方法に関するガイドでは、これを詳細に説明しています。
  • クリーンでプロフェッショナルな体験。 関連性の高い結果を即座に返す検索バーは、信頼を築きます。多くのストアオーナーが、製品検索を修正した後に直帰率が直接低下したことに気づいたと語っています。

良いニュースは、適切なプラグインがあれば、これらすべてを設定するのに約10分しかかからないということです。

以下で、ウェブサイトにカスタムWooCommerce検索ウィジェットを追加する方法を学びましょう。

カスタムWooCommerce検索ウィジェットの追加方法(簡単)

WooCommerceにカスタム検索ウィジェットを追加する最も簡単な方法はプラグインを使用することです。そして、このタスクに最適なWordPress検索プラグインは SearchWP です。

SearchWP - ベストWordPress検索プラグイン

SearchWPは、50,000以上のウェブサイトオーナーに信頼されている最高のWooCommerce検索プラグインであり、デフォルトのWordPress検索を高速で正確なエンジンに置き換えます。

サイトのコンテンツ、投稿、ページ、製品、メディア、カスタムフィールドなどを横断して検索インデックスを構築します。検索対象、結果のランキング方法、検索フォームの表示場所を正確に制御できます。

WooCommerceストアに最適な主な機能は次のとおりです。

  • WooCommerce連携。 SearchWPの専用WooCommerce拡張機能は、実際の関連性エンジンで製品検索を強化します。製品の表示ルールを尊重し、カタログの並べ替えを処理し、製品属性、バリエーション、タグを完全に検索可能にします。
  • カスタム検索エンジン。 複数のエンジンを作成し、それぞれを異なる検索フォームに接続します。ショップのサイドバーで製品のみの検索を実行し、同時にヘッダーでサイト全体の検索を実行できます。
  • 検索分析。 Metrics拡張機能は、顧客が何を検索しているか、どの検索が結果ゼロを返しているか、そして自身の検索バーにどれだけの売上を失っているかを正確に示します。
  • 複数の配置オプション。 検索フォームをウィジェット、Gutenbergブロック、ショートコード、またはページビルダー要素として追加できます。テーマの制限はありません。
  • PDFおよびOfficeドキュメントのインデックス作成。 書籍やその他のテキストベースのリソースを販売している場合、ユーザーはそれらを簡単に見つけることができます。SearchWPは、検索時にメディアライブラリ内のドキュメントファイルのコンテンツを考慮します。
  • 訪問者の統計と洞察。 訪問者が何を検索しているかを確認できます。この情報を使用してサービスを改善できます。

それでは、SearchWPを使用してカスタムWooCommerce検索ウィジェットをサイトに追加する方法を見てみましょう。

ステップ1:SearchWPのインストールと有効化

開始するには、SearchWPのウェブサイトにアクセスして、新規アカウントにサインアップしてください。

アカウントを作成し、アカウントダッシュボードに入ったら、ダウンロードタブに移動します。そこから、SearchWPをダウンロードをクリックして、プラグインZIPファイルをコンピュータに保存します。セットアップ中に必要になるため、同じページでライセンスキーをコピーしてください。

アカウントエリアからSearchWPプラグインをダウンロード

次に、プラグインファイルをアップロードし、WordPressサイトにSearchWPをインストールしてアクティブ化できます。

ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこの初心者向けガイドを確認してください。

アクティブ化後、セットアップウィザードが表示されたSearchWPへようこそ画面が表示されます。オンボーディングウィザードを開始をクリックして、画面の指示に従ってください。プロンプトが表示されたらライセンスキーを入力することも含みます。

オンボーディングウィザード SearchWP

素晴らしい、SearchWPがインストールされ、設定の準備ができました。次のステップは、WooCommerceサポートを追加することです。

ステップ2:WooCommerce統合拡張機能をインストールする

SearchWPには、製品検索を完全な関連性エンジンで強化する専用のWooCommerce統合拡張機能があります。

製品の表示ルール、カタログの並べ替えを処理し、SearchWPが製品データを正しく読み取ることを保証します。

インストールするには、WordPressダッシュボードから[SearchWP »拡張機能]に移動するだけです。

WooCommerce拡張機能をインストールする

次に、リストでWooCommerce Integration拡張機能を見つけて、Installをクリックします。

数秒以内に自動的にアクティブ化されます。

これでSearchWPはWooCommerce製品および製品データに完全にアクセスできるようになりました。次に検索エンジンを設定しましょう。

ステップ3:SearchWPカスタム検索エンジンの設定

SearchWPは検索エンジンを使用します。これにより、検索対象と結果のランク付け方法を制御する構成を設定できます。

複数のエンジンを作成し、それぞれをサイト上の異なる検索フォームに接続できます。

SearchWPエンジンをカスタマイズするには、WordPressダッシュボードからSearchWP » Algorithmに移動します。

カスタムWooCommerce検索ウィジェットの追加方法:WordPress検索エンジンの設定方法 ステップ2

そこから、Sources & Settingsをクリックします。選択するソースのリストが表示されたモーダルがポップアップ表示されます。

次に、Productsの横にあるチェックボックスをオンにして、WooCommerce製品を検索可能にします。ウィジェットでサイト全体を検索したい場合は、Posts, Pages,またはMediaなどの他のデフォルトソースを含めることもできます。

カスタムWooCommerce検索ウィジェットの追加方法:WordPress検索エンジンの設定方法 ステップ3

完了したら、Doneをクリックします。

次に、Productsセクションまでスクロールして、SearchWPが各製品から読み取る内容を微調整します。

まず、Add/Remove Attributesをクリックして属性パネルを開きます。ここで、製品カスタムフィールド(SKU、色、サイズなど)やタクソノミー(製品タグやカテゴリなど)を検索インデックスに追加できます。

製品属性の管理

属性の選択が完了したら、Doneをクリックします。

次に、Saveをクリックして、SearchWPが新しい設定に基づいて検索インデックスの再構築を開始できるようにします。

カスタムWooCommerce検索ウィジェットの追加方法:WordPress検索エンジンの設定方法 ステップ4

ウィジェットを製品のみに絞り込み、結果から他のコンテンツタイプを削除したい場合は、WordPressの検索結果を制限する方法に関するガイドを参照してください。

検索エンジンはWooCommerce製品に合わせて調整されました。最後のステップは、検索ウィジェットをサイトに追加することです。

ステップ4:ウェブサイトにWooCommerce検索を追加する

次に、顧客が希望する製品を検索できるように検索バーを作成する必要があります。

検索バーを作成するためにウィジェットを使用するかブロックを使用するかは、使用しているテーマによって異なります。クラシックテーマを使用している場合は、WooCommerce検索ウィジェットが最適です。一方、最新のFSE(フルサイト編集)テーマを使用している場合は、WooCommerce検索ブロックを利用するのが標準的な方法です。

使用する方法に関係なく、ウェブサイトのどこにでも検索バーを追加できます。ここでは、両方のケースでウェブサイトにWooCommerce検索を追加する方法を示します。

ステップ 4.1 クラシックテーマ向けのWooCommerce検索ウィジェットの追加

テーマがサポートしている場合、カスタムWooCommerce検索ウィジェットをサイトのどこにでも追加できます。サイドバーにウィジェットを追加する方法を見てみましょう。

ヘッダーやフッターなど、サイトのどこにでも配置することもできます。ニーズによりますが、プロセスは同様です。WordPressダッシュボードからAppearance » Widgetsに移動するだけです。

カスタムWooCommerce検索ウィジェットの追加方法:検索ウィジェットの追加 ステップ1

ウィジェット設定ページで、ウィジェットを追加したい領域を選択し、+アイコンをクリックします。

このチュートリアルでは、検索ウィジェットをWooCommerceサイドバー領域に追加します。フィールドにSearchWPと入力し、SearchWP Formウィジェットブロックを選択します。

WooCommerceサイドバーにSearchWPフォームを追加する

SearchWPフォームブロックを追加したら、ドロップダウンメニューをクリックして検索フォームを選択できます。

次に、右上にある更新をクリックします。

WooCommerceサイドバーのフォームを選択する

これで、サイドバーにカスタムWooCommerce検索ウィジェットが追加されました。

これで、ウェブサイトのフロントエンドにアクセスして、WooCommerce検索ウィジェットが機能していることを確認してください!

カスタムWooCommerce検索ウィジェットの追加方法:フロントエンドでの検索ボックスプレビュー

ステップ 4.2 最新のFSEテーマ向けのWooCommerce検索ブロックの追加

検索バーを表示する前に、検索フォームを作成する必要があります。SearchWPを使用すると、コードを書くことなく、このプロセスを迅速かつ簡単に行うことができます。

検索フォームを作成するには、[SearchWP] > [検索フォーム]に移動し、「新規追加」をクリックします。

カスタムWooCommerce検索ウィジェットの追加方法:検索フォームの作成 ステップ1

検索フォームの名前を選択し、テーマレイアウトを選択して、ニーズに合わせて設定してください。

SearchWPを使用すると、複数のエンジンを設定でき、それらを活用してウェブサイトのさまざまな場所で異なるコンテンツを提供できることに注意してください。

カスタムWooCommerce検索ウィジェットの追加方法:検索フォームの作成 ステップ1-1

検索結果ページとしてSearchWPを選択すると、WordPressの検索結果ページを完全に制御および最適化できます。

WordPressの検索結果ページを最適化する方法については、こちらの詳細なチュートリアルをご覧ください。こちら

カスタムWooCommerce検索ウィジェットの追加方法:検索フォームの作成 ステップ2

検索フォームの設定が完了したら、保存をクリックします。

さらに詳しく知りたい場合は、WordPressで高度な検索フォームを作成する方法についての詳細なチュートリアルをご覧ください。こちら

カスタムWooCommerce検索ウィジェットの追加方法:検索フォームの作成 ステップ3

次に、検索バーを表示したいページを編集モードで開きます。

「+ブロックを追加」アイコンをクリックし、次にブロックリストからSearchWPフォームを見つけて選択します。

WordPressにSearchWPフォームブロックを追加する

SearchWPフォームブロックを追加したら、作成したフォームを選択できます。

これを行うには、ドロップダウンメニューをクリックするだけです。

ドロップダウンからフォームを選択する

これで、希望する場所に検索バーが表示されるはずです。

最後に、右上にある更新または公開ボタンをクリックできます。

カスタムWooCommerce検索ウィジェットの追加方法:検索フォームの表示ステップ3

これで、ウェブサイトのフロントエンドにアクセスして、WooCommerce検索が機能していることを確認してください!

検索が正しく機能しているかを確認するために、さまざまな製品を検索できます。

カスタムWooCommerce検索ウィジェットの追加方法:フロントエンドでの検索フォームライブ

WooCommerce検索ウィジェットに関するFAQ

1.カスタムWooCommerce検索ウィジェットとは何ですか?

カスタムWooCommerce検索ウィジェットは、サイトに配置され、設定された検索エンジンに接続された検索フォームです。デフォルトのWordPress検索バーとは異なり、製品属性、バリエーション、タグ、カスタムフィールドを検索します。SearchWPのようなプラグインを使用して、任意のウィジェットエリアまたはページに配置できます。

2.SearchWPは製品を検索するためにWooCommerce統合拡張機能が必要ですか?

SearchWPはデフォルトでWooCommerce製品を投稿タイプとしてインデックス化します。WooCommerce統合拡張機能は、表示ルール、カタログ並べ替えの互換性、およびWooCommerceショップアーカイブ検索の正しい処理を含む、製品固有の動作を追加します。これは、すべてのWooCommerceストアに推奨され、SearchWP Proプランに含まれています。

3.ヘッダーまたはフッターにWooCommerce検索ウィジェットを追加できますか?

はい。テーマがヘッダーまたはフッターのウィジェットエリアをサポートしている場合は、外観 » ウィジェットに移動し、ヘッダーまたはフッターのウィジェットエリアを開いて、検索ブロックを追加します。FSEテーマの場合、サイトエディターを介してヘッダーまたはフッターテンプレートにSearchWPフォームブロックを直接埋め込むことができます。

4.デフォルトのWooCommerce検索で製品が見逃されるのはなぜですか?

デフォルトのWordPress検索は、投稿タイトルとコンテンツに対して基本的なSQL LIKEクエリを実行します。WooCommerceは、製品属性、タグ、SKU、およびバリエーションを別のデータベーステーブルに投稿メタおよびタクソノミータームとして保存しますが、デフォルトの検索ではこれらは決して読み取られません。SearchWPのようなプラグインは、これらすべてのデータを含むカスタムインデックスを構築します。

5.ページごとに異なる検索ウィジェットを作成できますか?

はい。SearchWPを使用すると、複数の検索エンジンを作成し、それぞれを異なる検索フォームにリンクできます。ショップページにあるウィジェットを強化する商品専用の検索エンジンと、ヘッダーの検索バーを強化するサイト全体の別のエンジンを用意できます。各エンジンは、異なるソースと属性を検索するように構成できます。

これで、サイトにカスタムのWooCommerce検索ウィジェットが追加され、商品を理解するエンジンによって強化されました。SearchWPが商品属性、タグ、バリエーション、カスタムフィールドをインデックス化することで、お客様は検索方法に関係なく、必要なものを見つけることができます。

この記事が、カスタムWooCommerce検索ウィジェットの追加方法を学ぶのに役立ったことを願っています。また、WooCommerceの商品検索をタイトルのみに制限する方法WooCommerceの商品を検索結果から非表示にする方法に関するガイドも参照してください。

WooCommerceの検索をアップグレードする準備はできましたか?ここからSearchWPを開始できます

著者アバター
アジム・アクター

今日からより良いWordPress検索エクスペリエンスを作成しましょう

役に立たない検索結果で訪問者を失うことはもうありません。SearchWPを使用すると、独自のスマートなWordPress検索をすばやく簡単に作成できます。

今すぐSearchWPを入手
複数の検索エンジンアイコン