WordPress で独自のカスタム検索フォームを作成する方法 (3 つの方法)

コーディングなしで WordPress でカスタム検索フォームを簡単に作成したいですか?

カスタム検索フォームを使用すると、訪問者は数回クリックするだけで、Web サイトのコンテンツを簡単に検索およびフィルタリングできます。

ユーザーが探しているものをすぐに見つけられると、サイトに長く留まる可能性が高くなります。 また、製品を購入したり、ブログを読んだり、ニュースレターにサインアップしたりするなどの行動を起こす可能性も高くなります。

この投稿では、WordPress でカスタム検索フォームを簡単に作成して、ユーザー エクスペリエンスを向上させ、コンバージョンを高める方法を紹介します。

その前に、サイト用のカスタム検索フォームを本当に作成する必要があるかどうかを見てみましょう。

カスタム検索フォームを作成する理由

カスタム検索フォームは、多くのコンテンツ、製品、ドキュメント、FAQ があるサイトに最適です。 これは、e コマース ストア、オンライン ビジネス ディレクトリ、学校/大学のサイト、および同様のサイトで必須の機能です。

検索オプションにより、ユーザーは必要なものを探すのに数分または数時間も費やすことなく見つけることができます。

WordPress サイト用のカスタム検索フォームを作成する理由は次のとおりです。

• ユーザーがコンテンツをナビゲートするのに役立ちます
• 物事をより速く見つけることで時間を節約
• コンバージョンと売上を向上
• モバイル ユーザー向けにサイトを最適化します
• 直帰率を下げる

次に、フォーム ビルダー プラグインを使用して、WordPress でカスタム検索フォームを作成する方法を紹介します。

WordPress でカスタム検索フォームを作成する方法

最初に使用できる方法は、WordPress.org が提供するデフォルトの検索オプションです。 サイトのページや投稿を検索できる基本的な WordPress 検索を有効にすることができます。

ただし、この方法は少し複雑です。 これには、機密性の高い functions.php などのファイルのコーディングと編集が含まれます。 一歩間違うと、ウェブサイトが壊れる可能性があります。

サイトに検索フォームを表示するには、「 get_search_form() 」関数を使用する必要があります。 これは、WordPress テーマの searchform.php ファイルに役立ちます。 見つからない場合は、WordPress のデフォルトのコア検索オプションが使用されます。

ただし、WordPress の検索ボックスをカスタマイズするには、ファイルにコードを追加する必要があります。

コーディングに慣れていない場合は、信頼できる WordPress 検索プラグインを使用してサイト検索を有効にすることをお勧めします。 そして、それがまさにこのチュートリアルでやろうとしていることです。

WordPress の検索フォームをカスタマイズできるプラグインがいくつか市場に出回っています。

カスタム検索を作成できるだけでなく、フィルターを追加して訪問者に適切な結果を表示できる WordPress プラグインを選択してください。

サイト上のすべてを検索できる、WordPress のナンバー 1 検索プラグインである SearchWP の使用をお勧めします。 Formidable Forms を使用してカスタム検索フォームを作成することもできます。 以下に、これら 2 つのプラグインを使用してカスタム検索フォームを作成する方法を示します。

SearchWP を使用してカスタム検索フォームを作成する

SearchWP は、WordPress 向けの最高のカスタム検索プラグインです。 使いやすく、正確な結果が表示され、検索フォームを制御できます。

SearchWP は本当に素晴らしく、信じられないほどのプレミアム機能を備えているため、プレミアム プラグインです。 年間99ドルからのプランにサインアップできます. がっかりすることはありませんが、14 日間の返金保証があります。

これにより、すべての検索を有効にすることができます。 製品の詳細、カスタム フィールドのコンテンツ、ショートコード出力、カスタム データベース テーブルのコンテンツ、クロスサイト マルチサイト検索などをサイトで検索します。

次のような機能にアクセスできます。

• PDF および Office ドキュメントのインデックス作成
• ネイティブ WP 検索との自動統合、コーディング不要！
• 複数の検索エンジン
• キーワードステミング
• 高度なカスタム フィールドのサポート
• WooCommerce の統合
• 結果を除外または属性付けする
• 検索統計と洞察
• 簡単なアルゴリズムのカスタマイズ

このプラグインは、bbPress、WP Job Manager、Easy Digital Downloads などとも統合されます。 また、献身的なサポートと詳細なドキュメントにアクセスできます。

そして、私たちが言及したものはすべて基本プランにあるだけなので、プラグインは月額わずか8.25ドルで完全に価値があります. ハイエンドのプランでは、より多くの機能を利用できます。

アカウントにサインアップしたら、以下のチュートリアルを開始できます。

ステップ 1: SearchWP を有効にする

SearchWP アカウント内で、ライセンス キー、アカウントの詳細、およびダウンロードにアクセスできます。 プラグインファイルをダウンロードする必要があります。 また、すぐに必要になるので、ライセンス キーをコピーすることもできます。

次に、wp-admin パネルに移動し、 [プラグイン] » [新規追加] » [プラグインのアップロード] に移動します。

コンピューターにダウンロードしたプラグイン ファイルを選択し、 [今すぐインストール] ボタンをクリックします。

インストールしてアクティブ化したら、 [設定] » [SearchWP]ページにアクセスして、[ライセンス] メニュー オプションをクリックする必要があります。

SearchWP アカウントからライセンス キーを取得し、[ライセンス] ボックスに貼り付けます。

[Activate] ボタンをクリックすると、検索エンジンをセットアップする準備が整います。

ステップ 2:検索エンジンのカスタマイズ

wp-admin パネルの SearchWP タブ内で、[エンジン] メニュー オプションを選択します。 中に入ったら、[新規追加] ボタンをクリックして、新しい検索エンジンを作成します。

これにより、「補足」と呼ばれる新しい検索エンジンが作成されます。 名前を変更するには、[ソースと設定] ボタンをクリックする必要があります。

投稿、ページ、メディア ファイル、コメント、およびユーザーを検索するかどうかを選択するオプションが表示されます。 推奨設定は既にここに追加されているので、そのままにしておいてください。

後で検索エンジンを識別するために、「エンジン ラベル」フィールドで「カスタム」という名前を付けましょう。

ここでは、[キーワード ステム] オプションが選択されていることがわかります。 これにより、ユーザーが検索を行うときに語尾が無視され、最も関連性の高い検索結果が表示されます。

ここで準備ができたら、[完了] ボタンをクリックして変更を保存します。

エンジンのページに戻ると、各小見出しの下に「適用可能な属性の関連性」というセクションがあります。 これにより、さまざまな投稿属性に優先順位を付けたり、検索結果ページに特定のカテゴリやタグのみを含めることができます.

スライダーを使用して「属性の関連性」を調整するだけです。

これは、検索エンジンがサイトのコンテンツを評価してランク付けする方法に影響を与えます。 たとえば、コンテンツよりも投稿のタイトルに Google の注意を向けてもらいたい場合は、ここでタイトルをより重視することができます。

次に、SearchWP を使用すると、特定のコンテンツを検索結果に含めるか除外するかを制御できます. このために、ルールを作成できます。

これは、顧客が閲覧しているのと同じカテゴリの製品をすばやく見つけられるようにするためです。 または、訪問者がちょうど読んでいたのと同じトピックに関するコンテンツを検索できるようにします。

ルールを設定するには、各セクションに [ルールの編集] ボタンがあります。

これをクリックすると、カテゴリ、タグ、フォーマット、公開日、投稿 ID の設定を含むポップアップが表示されます。

ここで好きなようにルールを作成して、検索エンジンの動作を制御できます。

完了したら、ページの上部にある [エンジンを保存] ボタンをクリックして、カスタム検索エンジンを作成してください。

これで、WordPress 検索エンジンが正常にセットアップされました。 Web サイトに追加する準備ができました。

ステップ 3: ショートコードで検索フォームを追加する

通常、Web サイトに検索エンジンを追加するには多くのコーディングが必要ですが、SearchWP はそれを最小限に抑えています。 ショートコードを貼り付けて検索エンジンを埋め込むだけなので、初心者でも簡単に実装できます。

SearchWP ショートコード拡張機能にアクセスして、[拡張機能をダウンロード] ボタンをクリックするだけです。

その後、上記のプラグインをインストールしたのと同じ方法で、WordPress サイトに拡張機能をインストールしてアクティブ化する必要があります。

有効にすると、投稿、ページ、ウィジェット内に簡単なショートコードを追加できるようになります。

ブロック エディターで投稿を編集し、「カスタム HTML」という新しいブロックを追加するだけです。

ブロック内で、このショートコードをコピーして貼り付けることができます:

 [searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"] <div class="search-results-wrapper"> [searchwp_search_results engine="custom" 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="custom"] [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"] </div>

エンジンに「カスタム」という名前を付けました。別の名前を選択した場合は、このコード スニペット内の 4 か所でengine=“custom”を独自のエンジン名に変更する必要があります。

このコードでは、ボタンのテキストは「カスタム検索」になります。 検索ボタンのテキストをよりクリエイティブなものに変更したい場合は、最初の行button_text=“Custom Search”を編集できます。

このコードは、カスタム検索エンジンを WordPress 投稿に追加します。 また、検索結果を表示するセクションを作成し、必要に応じて結果なしのメッセージを表示し、結果が複数のページにまたがる場合はページネーションを追加します。

投稿をプレビューすると、検索エンジンが表示されます。 投稿内に検索フィールドと CTA ボタンが表示されます。

次に、それを公開または更新して、カスタム検索フォームをライブにします。 これについてサポートが必要な場合は、WordPress にショートコードを追加する方法に関する簡単なガイドに従ってください。

いくつかの検索用語を入力してツールが返す結果を確認することで、カスタム フォームをテストできます。

これで、WordPress Web サイトに検索バーを追加する方法を学びました。 SearchWP は高度な検索プラグインであり、その機能をさらに詳しく調べる価値があります。 次に、Web サイトの検索機能を強化する方法を紹介します。

ステップ 4: 詳細設定の構成

カスタムの WordPress 検索フォームを改善するためにカバーしたい 2 つの高度なオプションがあります。

• ライブ Ajax 検索の追加: ユーザーが入力すると、ドロップダウン検索結果が自動的に追加されます。 ユーザーがクエリをより速く見つけるのに役立ちます。 SearchWP は、このために WordPress リポジトリで無料の Live Ajax Lite Search プラグインを提供しています。
• SearchWP の詳細設定を使用する: WordPress メニューの [設定] » [SearchWP ] タブの下に、[詳細] タブがあります。 このページでは、ユーザーが探しているものを見つけやすくするための設定を有効にすることができます。

これにより、検索エンジンの動作を完全に制御できます。 次に、検索エンジンの外観をカスタマイズする方法を紹介します。

ステップ 5: 検索フォームと結果ページのスタイルを設定する

新しい検索バーの表示方法に満足できない場合は、変更できます。

知っておく必要があるのは、サイトのテーマによって、ホームページ、ヘッダー、サイドバー、投稿、検索フォーム、および検索結果の外観が制御されるということです。 WordPress テーマのフォーマットとスタイルは、CSS スタイルシートに保存されます。

検索バーと結果ページの外観を変更するには、独自のカスタム CSS を追加するだけです。

以前にこれを行ったことがない場合は、Web サイトのバックアップを作成することをお勧めします。 計画どおりに進まない場合に備えて、サイトを復元できるようにしておくことが重要です。 次に、ステージング サイト (Web サイトのクローン) を使用して、最初にこれを試すことができます。

以下は、ほとんどの WordPress テーマで動作するカスタム CSS スニペットです。 最初のセクションではデフォルトの検索フォームのスタイルを変更し、2 番目のセクションでは検索結果をカスタマイズします。

次のコードをコピーして貼り付けて、サイト検索機能のスタイルを設定できます。

 .searchform { font-family:arial; font-size:16px; background:#ace5e3; color:#ffffff; border:1px solid #61c3c0; padding:10px; height:90px; width:600px; } .search-results { font-family:arial; font-size:16px; background:#ace5e3; color:#000000; border:1px solid #61c3c0; padding:10px; width:600px; }

これについてもっと知りたいですか？ WPBeginner には最高のガイドがあります: WordPress サイトにカスタム CSS を簡単に追加する方法.

それだけです！ SearchWP を使用して、完全にカスタマイズ可能な検索フォームを作成しました。

次に、カスタムの WordPress 検索フォームを作成するもう 1 つの方法を紹介します。

手ごわいフォームを使用してカスタム検索フォームを作成する

Formidable Forms は、完全に統合されたビュー機能を備えた唯一の WordPress フォーム ビルダー プラグインです。 そのため、フォーム データを収集するだけでなく、サイトのフロント エンドに表示することもできます。

ビューを使用すると、WordPress ダッシュボードから直接、ユーザーが送信したデータを美しく表示する Web ページを簡単に作成できます。 これを使用して、ビジネス ディレクトリ、メンバー ディレクトリ、リストなどを表示できます。

ビューを検索フォームに接続して、サイトの訪問者が特定のコンテンツを検索できるようにすることもできます。

ということで、チュートリアルを始めましょう。

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

まず、Formidable Forms アカウントにサインアップする必要があります。 ビュー機能を含むプランを入手してください。

サインアップしたら、WordPress 管理ダッシュボードに移動し、[プラグイン] » [新規追加] タブを開きます。 Formidable Formsプラグインを検索し、そこにある[インストール] ボタンをクリックします。

これについてさらにヘルプが必要な場合は、WordPress プラグインのインストール方法に関するガイドを参照してください。

プラグインをインストールしてアクティブ化すると、ウェルカム ページが表示されます。 [アカウントを接続] ボタンをクリックしてアカウントに接続し、すべてのプレミアム機能にアクセスします。

Formidable Forms アカウントにまだログインしていない場合は、再度ログインする必要があります。

次に、 Formidable Forms ProおよびVisual Viewsアドオンをサイトにインストールする必要があります。

WordPressダッシュボードのFormidableタブから直接インストールするか、アカウントからプラグインファイルをダウンロードできます.

これで、Formidable Forms を使用して WordPress でカスタム検索フォームを作成する準備が整いました。

ステップ 2: 検索フォームにデータを追加する

検索フォームを作成する前に、検索結果のデータを収集する必要があります。

新しいフォームを作成するには、 Formidable » Formsに移動し、 + Add Newボタンをクリックします。

フォームのテンプレートを選択できるポップアップが表示されます。 このチュートリアルでは、空白のフォーム テンプレートを使用します。

次に、フォームの名前と説明を追加する必要があります。

フォームに名前を付けたら、[作成] ボタンをクリックして、ドラッグ アンド ドロップ フォーム ビルダーを起動します。

フォーム ビルダーでは、ページの左側にフォーム フィールドが表示され、右側にフォーム プレビューが表示されます。

フォーム フィールドを挿入するには、フィールド メニューからフォーム プレビューにドラッグ アンド ドロップするだけです。

ここでは、First Name、Last Name、Email、Country のフィールドを追加しています。 要件に応じて任意のフィールドを追加できます。

フィールドをカスタマイズするには、そのフィールドをクリックするだけで、フォームの設定を確認できます。 ラベル、必須オプション、カスタム CSS など、多くのオプションがあります。

条件付きロジック オプションを使用して、ユーザー入力に従ってフォーム フィールドを表示または非表示にすることもできます。

フィールドの追加が完了したら、フォーム ビルダーの右上隅にある [更新] ボタンをクリックします。

あとは、このフォームをサイトに公開して、ユーザーまたは Web サイトのメンバーからデータを収集するだけです。

または、コンピューターからデータ ファイルをインポートすることもできます。 このためには、ビルダーの上部にある [エントリ] タブを開き、[インポート] ボタンをクリックします。

次に、CSV または XML ファイルをアップロードしてデータをフォームにインポートできるウィンドウが表示されます。 フィールドをファイル内のデータにマップして、レコードをインポートできます。

データを収集したら、WordPress でカスタム検索フォームを作成して、ユーザーがサイトで検索できるようにする必要があります。

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

検索フォームを作成するには、ステップ 2 と同じ手順に従う必要があります。

Formidable » Forms » Add Newに移動し、空白のテンプレートを選択します。 次に、カスタム検索フォームに名前と説明を付けます。

このフォームでは、3 つのフォーム フィールドを追加して、ユーザーがサイトのデータを検索できるようにします。 フィールドは、名、姓、および国です。

名前にはテキスト フォーム フィールドを使用し、国を検索するには検索ドロップダウン フィールドを使用できます。

[名]フィールドの設定では、後で検索フォームを結果ビューに接続するためにデフォルト値を追加する必要があります。

このために、フィールド設定のデフォルト値オプションにこのショートコードを追加します。

[get param=fname]

ここで、「fname」は、ビューに接続するために名フィールドに使用するテキストです。

姓フィールドの設定で、同じショートコードを追加します。

[param=lname を取得]

ここで、「lname」は、ビューに接続するために姓フィールドに使用するテキストです。

国フィールドの設定では、ドロップダウン オプションに国名を追加する必要があります。 最初のオプションは必ず空白のままにしてください。

下にスクロールすると、プレースホルダー テキストを追加するオプションが表示されます。 他の 2 つのフォーム フィールドと同様に、ここにデフォルト値を追加する必要があります。 ショートコードを挿入します。

[パラメーター=国を取得]

ここで、「country」は、ビューに接続するために国フィールドに使用するテキストです。

入力タイプの追加が完了したら、フォーム フィールドのレイアウトを変更できます。

それらを単一の水平線で表示するには、各フィールドの [CSS レイアウト クラス] オプションに移動し、1/4 オプションを選択します。

ボタンをカスタマイズする場合は、 [設定] » [スタイルとボタン] タブに移動し、ボタンの設定に移動します。

ここで、送信ボタンのテキストをSearchに変更し、ボタンの配置をInlineに選択できます。 これにより、検索ボタンがフォーム フィールドと同じ行に表示されます。

WordPress でカスタム検索フォームを作成する方法を学習したので、このフォームと結果を Web ページに挿入してみましょう。

ステップ 4: 検索結果ビューを作成する

検索結果と検索フォームを同じページに表示するには、ビューを作成する必要があります。

新しいビューを作成するには、 Formidable » Viewsページを開き、 + Add Newボタンをクリックします。

次に、グリッド、テーブル、カレンダー、およびクラシック ビュー タイプから選択できるポップアップが表示されます。

このチュートリアルでは、検索フォームの結果にグリッド ビューを選択します。

その後、エントリのフォームを選択し、結果ビューの名前を追加するオプションが表示されます。 ステップ 2 で作成したデータ収集フォームを必ず選択してください。

完了したら、[ビューの作成] ボタンをクリックします。

ビュー ビルダーでは、左側にスタイル オプションが表示され、右側にビュー レイアウト ビルダーが表示されます。 [コンテンツの追加を開始]リンクをクリックして、エントリを追加します。

「 + 」アイコンをクリックして、ビューへのリストの追加を開始します。 これにより、リストのコンテンツ エディターが開きます。

一覧ページのコンテンツ エディターでは、ページの右側にある [カスタマイズ] オプションからフォーム フィールドを追加できます。 フォーム フィールドをクリックするだけで、結果ビューに挿入できます。

次に、フィールド キーのスタイルを設定して、必要なレイアウトでフォーム フィールドを表示できます。

完了したら、[ビューの更新] ボタンをクリックします。 これで、ビュー ページにすべてのエントリが表示されます。

このページに検索フォームを追加する必要があります。 このためには、[コンテンツの前に追加] オプションをクリックします。

これにより、手順 3 で作成したカスタム検索フォームを挿入できるコンテンツ エディターが開きます。

手ごわいボタンをクリックし、検索フォームを選択してフォームのショートコードを挿入するだけです。

[ビューの更新] ボタンをクリックして、カスタム検索フォームをビューに追加します。

次のステップでは、WordPress サイトで結果ビューを公開する方法を示します。

ステップ 5: 検索結果ビューを公開する

サイトに検索結果ビューを追加するには、新しいページを作成し、Formidable Views ブロックを検索する必要があります。

ビューを追加したら、サイトでページを公開できます。 ページは次のようになります。

待って！ あなたはまだ終わっていません。 カスタム検索フォームと結果ビューを接続して、ユーザーがサイトのコンテンツを検索できるようにする必要があります。

ステップ 6: カスタム検索フォームをビューに接続する

検索フォームを接続するには、 Formidable » Formsに移動し、検索フォームの [設定] オプションを開きます。

ここで、[送信時] オプションに移動し、[URL にリダイレクト] オプションを選択できます。 次に、手順 5 で作成したビュー ページへのリンクを追加する必要があります。

このために、ページの URL をコピーして、「?fname[21]&lname=[19]&country=[22]」の部分を追加します。

リダイレクト URL が次のようになるように、フィールド テキストとキーを挿入できます。

http://yoursitename/user-directory/?fname[21]&lname=[19]&country=[22]

このフォームの [このフォームから送信されたエントリを保存しない] オプションを有効にすることを忘れないでください。

ここで、追加したフォーム フィールドでユーザーがリストを検索できるように、結果ビューにフィルターを追加する必要があります。

このために、前に作成したビューを開き、ページの上部にあるフィルター オプションをクリックします。

次に、名、姓、および国のフィルターを追加し、各フィールドのデフォルト値としてショートコードを入力する必要があります。

最後に行う必要があるのは、検索フォームのショートコードを左側のメニューのエントリなしメッセージオプションに挿入することです。 これにより、ユーザーは各検索後にさらに多くのコンテンツを検索できるようになります。

設定が完了したら、ビューを更新することを忘れないでください。

カスタム検索フォームをテストする

検索フォームが正しく機能しているかどうかを確認するには、検索ページを再読み込みし、フィルターを使用してリストを検索します。

これで、サイトに検索フォームを追加する 3 つの方法がわかります。 デフォルトの WordPress 検索オプションは無料ですが、コードで何をしているのかわからない場合はお勧めしません。 SearchWP プラグインは、私たちのお気に入りの方法です。 使い方は簡単で、より高度な検索機能をサイトに追加します。

この記事が、Formidable Forms プラグインの助けを借りて、WordPress でカスタム検索フォームを簡単に作成するのに役立つことを願っています.

次のステップとして、次のリソースを確認できます。

• WordPress サイトにカスタム予約フォームを追加する方法
• 比較された最高のフォームビルダー（無料と有料）
• WordPress で PayPal 支払いの登録フォームを作成する方法

これらの投稿は、最高の WordPress フォームビルダーの助けを借りて、WordPress サイトにより多くの機能を追加するのに役立ちます.