Beaver Builderは、WordPress向けの人気のランディングページおよびウェブサイトビルダーです。ドラッグアンドドロップのページビルダーを備えており、プロフェッショナルなレイアウトを思い通りにデザインすることが非常に簡単になります。
しかし、Beaver Builderを使用中に発見したことがあります。訪問者が見たいものを見つけられない場合、最も美しいウェブサイトでさえもイライラするものになります。
デフォルトのWordPressの検索機能では、関連性の低い結果が返されたり、重要なコンテンツが見落とされたりすることがよくあります。ユーザーが検索語を入力しても、質の低い結果しか得られず、必要な情報を見つけずにサイトを離れてしまうのを見てきました。
そのため、Beaver Builderのデザインの柔軟性とSearchWPの強力な検索機能を組み合わせることで、訪問者が期待する結果を提供できます。
この記事では、WordPressでBeaver Builderを使用して検索フォームを追加する方法を説明します。
Beaver Builderでカスタム検索フォームを追加する理由
Beaver Builderは、コーディングなしでカスタムWordPressレイアウトを作成できるビジュアルページビルダーです。
過去には、シンプルなビジネスページから複雑なランディングページまで、あらゆるものを構築するために使用してきました。ドラッグアンドドロップインターフェイスにより、要素の追加、レイアウトの調整、思い通りのプロフェッショナルなデザインの作成が容易になります。
さて、数え切れないほどのウェブサイトでデフォルトの検索に関して遭遇した問題がここにあります。デフォルトのWordPress検索には、ユーザーエクスペリエンスに影響を与える深刻な制限がいくつかあります。
投稿タイトルとコンテンツのみを検索し、カスタムフィールド、カテゴリ、その他の重要なデータを完全に無視します。ブランド名で製品を検索したユーザーが、その情報がカスタムフィールドに保存されていたために結果がゼロになったのを見たことがあります。
SearchWPとBeaver Builderを統合し、カスタム検索フォームを作成することで、これらの問題が解決されます。検索対象と結果の表示方法を制御できます。
とはいえ、検索を簡単にカスタマイズして、Beaver Builderを使用して検索フォームを追加する方法を見てみましょう。
Beaver Builderを使用した検索フォームの追加
サイトのデフォルト検索を改善することに関しては、SearchWPが最善のソリューションです。
これは、50,000以上のウェブサイトで使用されている主要なWordPress検索プラグインであり、より良い検索エクスペリエンスを作成します。
初心者向けのインターフェイスと強力な機能により、検索を完全にカスタマイズできます。
SearchWPを使用すると、ウェブサイトの検索が一致を検索する場所を管理し、特定のコンテンツタイプに制限し、タクソノミーとカスタムフィールドによる検索を有効にすることができます。
最も良い点は、これらのほとんどのことを数回クリックするだけで実行できることです。
SearchWPを際立たせる主な機能の一部を次に示します。
- ライブAJAX検索:ユーザーが入力するとすぐに検索結果を表示し、訪問者がコンテンツをより速く見つけるのに役立つインタラクティブなエクスペリエンスを作成します。
- 検索分析:訪問者がサイトで何を検索しているか、どの結果が最もクリックされているか、その他の貴重なユーザー行動データを追跡します。
- 高度なカスタマイズ: カスタムフィールドを検索可能にし、特定のページやカテゴリを除外し、コンテンツ属性ごとに適合率の重みを微調整します。
- 手動での結果並べ替え: 最も重要なコンテンツを強調するために、検索結果の順序を手動で調整することで、完全に制御します。
SearchWPが当社のBeaver Builderプロジェクトに最適な理由は、人気のページビルダーとのシームレスな統合です。Beaver Builderのドラッグアンドドロップインターフェイス内でシームレスに機能する、カスタマイズ可能なSearchWPフォームと結果ブロックを提供します。
次に、開始するために従うことができる手順を見てみましょう。
ステップ1：SearchWPのインストールと有効化
まず、SearchWPのウェブサイトにアクセスし、新しいアカウントにサインアップする必要があります。
その後、SearchWPアカウントにログインし、ダッシュボードの[ダウンロード]タブをクリックできます。
それが完了したら、SearchWPプラグインファイルをコンピュータに保存できます。ライセンスキーもコピーすることをお勧めします。これは、後でSearchWPを設定するときに必要になります。
次に、サイトにSearchWPをインストールし、プラグインのZIPファイルをアップロードしてアクティブ化できます。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのステップバイステップガイドに従ってください。
アクティブ化すると、セットアップウィザードが表示されます。「オンボーディングウィザードを開始」ボタンをクリックし、セットアップウィザードに従って開始してください。
ステップ2: SearchWPで検索エンジンを編集する
次に、SearchWPで検索エンジンをカスタマイズし、何を検索するかを指定します。最も良い点は、各エンジンをサイト上の特定の検索フォームにリンクできることです。
たとえば、含めるソースを選択したり、検索プロセスからコンテンツを除外したり、商品詳細を検索可能にしたり、カスタムフィールドの情報が利用可能であることを確認したりできます。
まず、WordPressダッシュボードから**SearchWP » Algorithm**にアクセスします。ここで、このプラグインで作成した検索エンジンを管理できます。
最初は、インストール後にSearchWPが自動的に作成する**デフォルト**の検索エンジンがすでに存在します。デフォルトのエンジンをカスタマイズするか、新しいエンジンを追加できます。
次に、**ソースと設定**ボタンをクリックしてソースを編集できます。
新しいポップアップウィンドウが開いたら、含めるソースを選択できます。
たとえば、デフォルトのソースには投稿、ページ、メディアが含まれます。しかし、WooCommerceストアをお持ちの場合は、商品を含めることができます。また、Easy Digital Downloadsサイトをお持ちの場合は、ダウンロードを含めることができます。
完了したら、「完了」ボタンをクリックするだけです。
次に、各ソースの属性を編集することもできます。これらは、タイトル、コンテンツ、スラッグ、抜粋、作成者など、検索プロセスに含めたい追加の詳細です。
開始するには、検索ソースセクションの下にある**追加/削除属性**ボタンをクリックするだけです。
ここから、ソースのカテゴリやタグなどの分類を追加できます。
同様に、カスタムフィールドを使用している場合、検索プロセスに含めることもできます。
完了したら、完了ボタンをクリックします。
最後に、一番上までスクロールして、エンジンを保存する必要があります。
詳細については、WordPressサイトのデフォルトの検索設定を変更する方法に関する詳細ガイドをご覧ください。
ステップ3：SearchWPでカスタム検索フォームを作成する
検索エンジンをカスタマイズしたので、SearchWPでカスタム検索フォームを作成することもできます。
検索フォームを作成するには、WordPressダッシュボードからSearchWP » Search Formsにアクセスします。
ここで、フォームを作成または編集し、レイアウトと機能をカスタマイズし、新しく作成したエンジンを選択できます。
ここから、検索フォームのテーマを選択できます。
SearchWPは、複数の既製のテンプレートから選択でき、多くのカスタマイズオプションを提供します。
詳細については、WordPressでカスタム検索フォームを作成する方法に関するガイドをご覧ください。
ステップ4：Beaver Builderを使用して検索ボックスを追加する
次に、Beaver Builderを使用して、作成したSearchWPフォームをランディングページに追加します。
WordPressダッシュボードでPages » All Pagesに移動し、ページを編集するか、新しいページを追加するだけです。
WordPressコンテンツエディターに入ったら、Convert to Beaver Builderボタンをクリックするだけです。
これにより、Beaver Builderのドラッグアンドドロップページビルダーが起動します。
右上にある+ボタンをクリックして、モジュールを追加してください。
次に、SearchWPセクションまでスクロールできます。
ここから、Search Formモジュールをドラッグしてページに配置するだけです。
その後、検索フォームを選択する必要があります。
ドロップダウンメニューをクリックして、前のステップで作成したフォームを選択してください。
完了したら、Saveボタンをクリックするだけです。
次に、右上にある「完了」ボタンをクリックしてから、「公開」を押します。
これで完了です！Beaver Builderを使用して検索フォームを作成し、ランディングページに追加しました。
これで、サイトにアクセスして動作を確認できます。
必要に応じて、検索フォームをテストして、要件どおりに機能しているかを確認することもできます。
たとえば、適切な製品やダウンロードファイルを見つけているか、指定したカテゴリのコンテンツを表示しているかなどです。
この記事が、WordPressでBeaver Builderを使用して検索ボックスを追加する方法を学ぶのに役立ったことを願っています。また、WPBakeryページビルダーで検索ボックスを追加する方法およびWooCommerce製品タグで検索を有効にする方法に関するガイドも参照してください。
サイトでスマート検索ページを作成する準備ができたら、ここからSearchWPを開始できます。
