SearchWPブログ

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

WPBakeryページビルダーに検索ボックスを追加する方法

WPBakery Page Builderでウェブサイトを構築し始めたとき、私たちはすぐに悩ましい問題を発見しました。デフォルトのWordPressの検索機能は、訪問者を失望させていました。

人々は、私たちのサイトに存在することを知っているコンテンツを検索しても、関連性のない結果や全く結果が得られないという状況でした。

探しているものが見つからないために、潜在的な顧客が私たちのサイトを離れるのを見てきました。デフォルトのWordPressの検索は、結果を本当に役立つものにする重要な詳細を見落としています。

このガイドでは、WPBakery Page Builderに検索ボックスを追加し、検索エクスペリエンスをカスタマイズする方法を説明します。

WPBakery Page Builderとは?

WPBakery Page Builderは、WordPressで最も人気のあるドラッグアンドドロップページビルダーの1つです。基本的なテキストや画像から、複雑な価格表やお客様の声まで、数十個の既製のコンテンツ要素が付属しています。

さらに、テンプレートライブラリから選択して、すぐにページをカスタマイズし始めることができます。

WPBakeryは、プロンプトを使用して見事なページを作成するのに役立つAIウェブサイト構築アシスタントも提供しています。

では、なぜWPBakeryに検索ボックスを追加する必要があるのでしょうか?

WordPressの組み込み検索は、表面をかすめるだけの基本的なキーワードマッチングのように機能します。訪問者があなたのサイトを検索するとき、彼らは実際には探しているものと一致しない結果に混乱することがよくあります。

検索結果が悪いと、ビジネスに悪影響を与えるドミノ効果が生まれます。不満を感じた訪問者は、あなたのサイトでの滞在時間が短くなり、コンバージョンせずに離脱する可能性が高くなります。

人々が必要なものをすぐに見つけられないと、持っていないと思い込み、他の場所に行ってしまいます。

さて、WPBakeryページビルダーを使用してWordPressに検索ボックスを簡単に追加する方法を見てみましょう。

WPBakery Page Builderに検索ボックスを追加する

WPBakery Page Builderを使用して検索フォームを統合する前に、まずSearchWPでウェブサイトの検索機能を強化することができます。

SearchWPは、50,000以上のウェブサイトオーナーに信頼されている、WordPress向けの主要な検索プラグインです。

SearchWP

SearchWPを使用すると、コーディングスキルを必要とせずに、よりスマートで効果的な検索エクスペリエンスを作成できます。

これにより、特定のページを結果から除外したり、カスタムフィールドを含めるようにしたりするなど、検索対象を正確に決定できます。

これによりユーザーエクスペリエンスが向上し、訪問者は探しているものを簡単に見つけられるようになります。

さらに、SearchWPはカスタマイズ可能なSearchWPフォームとSearchWP結果ブロックを提供しており、これらをWPBakeryビルダー内に簡単に追加して、検索フォームとカスタム結果テンプレートを表示できます。

WPBakery Page Builderに加えて、SearchWPはElementor、Divi、Beaver Builder、Bricks、Breakdance、Oxygenなどの他の人気サイトビルダーもサポートしています。

SearchWP が提供するその他の主な機能は次のとおりです。

  • 検索アナリティクス:サイトでの訪問者の検索内容を追跡・分析して、ユーザーの意図を理解します。
  • ライブAJAX検索: ユーザーが入力すると同時に検索結果を即座に表示することで、インタラクティブなエクスペリエンスを提供します。
  • 高度なカスタマイズ: カスタムフィールドを検索可能にし、特定のページやカテゴリを除外し、属性の関連性ウェイトを微調整します。
  • 手動での結果並べ替え:特定のコンテンツを強調表示するために検索結果の順序を手動で調整することで、完全な制御を得られます。
  • 複数の検索エンジン: 異なる検索設定を作成および管理し、それぞれをサイト上のさまざまな検索フォームに割り当てることができます。

次に、SearchWPをすばやくセットアップし、サイトの検索をカスタマイズするために使用する方法を見てみましょう。

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

まず、SearchWPのウェブサイトにアクセスして、プラグインを入手する必要があります。

それが完了したら、SearchWPアカウントにログインし、「ダウンロード」タブに移動して、Download SearchWPボタンをクリックします。

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

次に、プラグインのZIPファイルをコンピュータに保存する必要があります。

ここから、サイトにSearchWPをインストールし、プラグインのZIPファイルをアップロードして有効化できます。支援が必要な場合は、WordPressプラグインのインストール方法に関するこのステップバイステップガイドに従ってください。

アクティブ化すると、セットアップウィザードが表示されます。「オンボーディングウィザードを開始」ボタンをクリックし、セットアップウィザードに従って開始してください。

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

ステップ2:検索エンジンのカスタマイズまたは新規追加

SearchWPでは、サイトのデフォルトエンジンを編集したり、新しいエンジンを追加したりして、検索のルールを定義することもできます。

これにより、検索プロセスに含めるソース、除外するコンテンツなどをカスタマイズできます。

開始するには、WordPressダッシュボードからSearchWP » Algorithmにアクセスできます。ここから、「Sources & Settings」ボタンをクリックし、好みの検索ソースを選択してください。

WordPressで新しい検索エンジンを編集または追加する

デフォルトでは、投稿、ページ、メディアのソースがすでに含まれていますが、必要に応じてさらに追加できます。

たとえば、特定のコンテンツを非表示にしたい場合は、その特定のソースのチェックを外すだけです。

デフォルトエンジンのソースを選択

SearchWPでは、各ソースの属性を編集することもできます。属性とは、タイトル、コンテンツ、カスタムフィールド、カテゴリ、タグなど、各ソース内のコンテンツの種類です。

任意のソースの下にあるAdd/Remove Attributesボタンをクリックするだけです。

投稿に属性を追加

次の画面で、含める属性を選択できます。

たとえば、不動産リスティングや材料などのカスタムフィールド、チュートリアルのような投稿カテゴリ、SKUのような製品詳細などを追加できます。

投稿属性

詳細については、WordPressサイトのデフォルト検索設定を変更する方法に関する詳細ガイドをご覧ください。

ステップ3:SearchWPで検索フォームを作成する

次に、SearchWPでは、検索エンジンと簡単に接続できるカスタム検索フォームを作成することもできます。

WPBakery Page Builderで使用できる検索フォームを作成するには、WordPressダッシュボードからSearchWP » Search Formsに移動します。

フォームを作成または編集し、レイアウトと機能をカスタマイズして、新しく作成したエンジンを選択できます。

新しい検索フォームを追加

次の画面で、上部にあるフォームの名前を編集することから始めることができます。

その後、SearchWPでフォームのレイアウトを選択できます。

検索フォームのレイアウトを選択

それに加えて、フォームを編集するための追加オプションも利用できます。

たとえば、フォームのスタイル、ボタンのスタイル、色を変更したり、エンジンと結果ページを選択したりできます。

フォームの新しいエンジンを選択

詳細については、WordPressでカスタム検索フォームを作成する方法に関するガイドをご覧ください。

ステップ4: WPBakery Page Builderを使用して検索ボックスを追加する

これで、WPBakery Page Builderを使用してページに検索フォームを追加できます。

WordPressダッシュボードでPages » All Pagesに移動し、ページを編集するか、新しいページを追加するだけです。

コンテンツエディタにいるときは、WPBakery Page Builderボタンをクリックしてください。

WPBakeryで編集

次に、WPBakery Page Builderに移動すると、ポップアップメッセージが表示されます。

続行するには、「了解」ボタンをクリックするだけです。

WPBakeryウェルカムスクリーンのポップアップ

その後、WPBakeryを使用してページ編集を開始できます。

デフォルトでは、ページビルダーはクラシックモードを開きます。ただし、フロントエンドエディタまたはGutenbergエディタに切り替えることもできます。

このチュートリアルでは、フロントエンドエディタを使用して、検索フォームがリアルタイムでウェブサイトにどのように表示されるかを確認します。

ページを編集するモードを選択

次に、ページレイアウトを選択する必要があります。

デフォルトのWordPressテーマレイアウトまたはWPBakeryの空白ページレイアウトのいずれかを選択できます。

デフォルトのレイアウトを選択

たとえば、「WPBakeryの空白ページレイアウト」オプションを使用します。

次に、「+要素を追加」ボタンをクリックできます。

新しい要素を追加ボタン

その後、追加する要素のリストが表示されます。まず、上部にある「SearchWP」タブに切り替える必要があります。

ここから、SearchWP Form要素を追加するだけです。

SearchWPフォーム要素を追加

次に、WPBakeryはSearchWP検索フォームを選択するように求めます。

ドロップダウンメニューをクリックしてフォームを選択し、「変更を保存」ボタンをクリックしてください。

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

それが完了したら、上部にある公開ボタンをクリックしてください。

次に、ページビルダーを閉じてページにアクセスし、検索ボックスが機能していることを確認できます。

WPBakery検索フォームを表示

これで、カテゴリ、カスタムフィールド、タグ、または各フォームの検索エンジンをカスタマイズしたときに検索可能にしたその他の情報を検索してみてください。

この記事がWPBakeryページビルダーに検索ボックスを追加する方法を学ぶのに役立ったことを願っています。また、ElementorでSearchWPを使用する方法最高のWordPressバックアッププラグインに関するガイドも参照してください。

サイトでスマート検索ページを作成する準備ができたら、ここからSearchWPを開始できます

著者アバター
Aazim Akhtar

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

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

Get SearchWP Now
複数の検索エンジンアイコン