SearchWPブログ

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

WordPressでBricksを使用して検索フォームを追加する方法

Bricks Visual Builder を使用して WordPress サイトに検索フォームを追加するのは、驚くほど簡単です。

しかし、真の魔法は、Bricks と SearchWP を組み合わせたときに起こります。Bricks が検索フォームのビジュアルデザインを担当する一方で、SearchWP は WordPress が通常見逃すコンテンツを見つけるための検索機能を強化します。

SearchWP は、カスタムフィールド、カテゴリ、タグ、さらにはファイル添付ファイルも検索します。これにより、訪問者は正確な結果を得て、ポジティブな検索体験をすることができます。

この記事では、Bricks のビジュアルビルダーを使用して WordPress に検索フォームを追加する方法を説明します。

検索フォームに Bricks Visual Builder を使用する理由

Bricks は、コードを書かずにカスタム WordPress テーマやランディングページを作成できるビジュアルページビルダーです。

他のページビルダーとは異なり、Bricks はウェブサイトを遅くしない、クリーンで軽量なコードを生成します。

このプラグインにより、ページ上のすべての要素を完全に制御できます。たとえば、サイトのテーマにブランドに合わせて検索フォームを追加できます。

Bricks と SearchWP を組み合わせると、両方の長所が得られます。Bricks は検索フォームのビジュアルデザインとレイアウトを担当し、SearchWP はバックグラウンドでインテリジェントな検索機能を強化します。

SearchWP は、通常の WordPress 検索では無視されるカスタムフィールド、カテゴリ、タグ、さらにはファイル添付ファイルも検索します。訪問者は検索するたびに、正確で関連性の高い結果を得られます。

この組み合わせにより、訪問者は探しているものをすばやく見つけることができる検索エクスペリエンスが作成され、コンテンツへのエンゲージメントが長く維持されます。

それでは、Bricks のビジュアルビルダーを使用してサイトに検索フォームを追加するために従うことができる手順を見てみましょう。

Bricks を使用して WordPress に検索フォームを追加する

Bricks のビジュアルビルダーに検索フォームを追加する前に、まず SearchWP を使用してサイトの検索機能を強化できます。

SearchWP は WordPress に最適な検索プラグインであり、50,000 を超えるウェブサイト所有者から信頼されています。

SearchWP

SearchWP を使用すると、コーディング不要で、訪問者にとってよりスマートで効果的な検索を構築するための完全な制御が得られます。

検索可能なものを正確に決定できます。たとえば、特定のページを結果から簡単に非表示にしたり、カスタムフィールドが含まれていることを確認したりできます。

その結果、ユーザーは探しているものをより速く見つけることができるようになり、ユーザーエクスペリエンスが大幅に向上します。

SearchWP が際立っているのは、SearchWP Forms および SearchWP Results ブロックです。これらをサイトビルダー内に簡単に追加して、検索フォームとカスタム結果テンプレートを表示できます。

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

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

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

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

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

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

完了したら、SearchWPアカウントにログインして、ダウンロードページにアクセスしてください。

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

次に、SearchWPのダウンロードをクリックして、プラグインのZIPファイルをコンピューターに保存できます。

ダウンロード後、同じページでSearchWPライセンスキーもコピーすることをお勧めします。

次に、サイトにSearchWPをインストールします。そのためには、プラグインのZIPファイルをサイトにアップロードする必要があります。

ヘルプが必要な場合は、このWordPressプラグインのインストール方法ステップバイステップガイドに従ってください。

有効化すると、SearchWPのウェルカム画面とセットアップウィザードが表示されます。「オンボーディングウィザードを開始」ボタンをクリックして、画面の指示に従ってください。

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

SearchWPが稼働したら、カスタム検索エンジンと検索フォームを作成するために使用できます。

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

SearchWPを使用すると、サイトのデフォルトエンジンを編集したり、新しいエンジンを追加したりできます。

検索エンジンには、検索を実行する際にSearchWPが従う一連のルールが含まれています。

エンジンをカスタマイズすることで、含めるソースを選択したり、特定のコンテンツを除外するルールを設定したり、カスタムフィールド、カテゴリ、タグなどを検索可能にしたりできます。

開始するには、WordPressダッシュボードからSearchWP » アルゴリズムに移動し、ソースと設定ボタンを押してください。

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

ここから、検索を実行する際に考慮したい検索ソースをポップアップウィンドウで選択するだけです。

デフォルトでは、SearchWPは投稿、ページ、メディアソースを含みます。ただし、さらに多くのソースを含めることができます。

たとえば、eコマースストアがあるとしましょう。その場合、商品もソースとして含めることができます。

商品をソースとして選択

完了したら、「完了」ボタンをクリックします。

それに加えて、SearchWPではソース属性を編集することもできます。これにより、カスタムフィールドやタクソノミーを検索プロセスに含めることができます。

属性の追加/削除ボタンをクリックするだけです。

商品の属性の追加と削除

次に、「カスタムフィールド」ドロップダウンメニューをクリックして、SKUやその他の商品詳細などの追加情報を含めることができます。

同様に、カテゴリやタグを検索可能にしたい場合は、「タクソノミー」ドロップダウンメニューをクリックしてそれらを追加するだけです。

SKUカスタムフィールドの追加

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

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

次のステップは、Bricksを使用してサイトに配置できる検索フォームをSearchWPで作成することです。

開始するには、WordPressダッシュボードからSearchWP » Search Formsに移動する必要があります。ここで、新しいフォームを作成するか、既存のフォームを編集できます。

検索フォームを選択

その後、検索フォームを編集するオプションが表示されます。まず、一番上のフォーム名を変更できます。

次に、レイアウトテーマを選択し、ニーズに合わせてカスタマイズできます。

SearchWPには5つの既製のテーマが用意されており、各スタイルにプレビューが表示されます。

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

次に、下にスクロールして、さらに編集オプションを表示します。

ここでは、SearchWPで選択したテーマレイアウトをカスタマイズしたり、作成したばかりのエンジンを選択したり、フォームとボタンのスタイルを編集したりできます。

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

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

ステップ4:Bricksを使用して検索フォームを追加する

次に、Bricksを使用してランディングページに検索フォームを追加できます。

開始するには、WordPressダッシュボードのPages » All Pagesに移動します。ここから、既存のページを編集するか、新しいページを追加できます。

すべてのページに移動

次に、WordPressコンテンツエディターが表示されます。

一番上のEdit with Bricksボタンをクリックしてください。

Bricksで編集をクリック

次の画面で、Bricksビジュアルエディターが表示されます。

ここでは、左側のパネルからさまざまな要素をランディングページにドラッグアンドドロップできます。

左側のパネルからSearchWPに移動し、Search Form要素を追加するだけです。

Bricksで検索フォームブロックを追加

Search Form要素を追加したら、それを選択してください。

これで、左側のパネルから検索フォームを選択するオプションが表示されます。ドロップダウンメニューをクリックして、以前に作成した検索フォームを選択するだけです。

Bricks用の検索フォームを選択

それが完了したら、ランディングページを公開または更新できます。

一番上の電源アイコンをクリックして、ページを公開してください。

検索フォームを含むBricksページを公開

ステップ5:検索フォームのプレビュー

次に、サイトにアクセスして、Bricksで新しく作成されたランディングページに移動します。

ここから、検索フォームに検索語を入力して、正しく機能しているかテストするだけです。

Bricks検索フォームのプレビュー

たとえば、検索エンジンの設定時に構成したカテゴリやタグを検索してみてください。

または、WooCommerceストアをお持ちの場合は、製品の詳細やその他の属性を検索できます。

この記事が、Bricksを使用してWordPressに検索フォームを追加する方法を学ぶのに役立ったことを願っています。また、プロフェッショナルな検索ページをサイトに作成する方法Elementorページに検索ボックスを追加する方法に関するガイドも参照してください。

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

著者アバター
Aazim Akhtar

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

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

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