サイトの検索バーが多くのスペースを取り、ナビゲーションが散らかって見えると感じたことはありませんか？しかし、もう少し魅力的で、もう少しモダンにできたらどうでしょうか？
長年にわたり、私たちはウェブサイトのデザインを何度も変更し、検索フォームをより魅力的にする方法を試してきました。そして私たちの経験に基づくと、モーダル検索フォームを使用することで、サイトでの検索体験を変えることができます。
これらの気の利いた小さなポップアップ検索ボックスは、ウェブサイトのユーザーエクスペリエンスを真剣に向上させることができ、思ったほど設定は複雑ではありません。
この記事では、コードを編集せずにWordPressにモーダル検索フォームを追加する方法を説明します。
モーダル検索フォームとは＆amp;なぜそれを使用するのか？
モーダル検索フォームは、現在のページをオーバーレイするポップアップウィンドウです。ユーザーがWordPressサイトの検索アイコンをクリックすると、検索入力フィールドと送信ボタンのみを含むウィンドウがページの上に直接ポップアップ表示されます。それをスポットライトのように考えて、特定のコンテンツに焦点を当ててください。
これは、ヘッダーやサイドバーに配置され、常に表示されている従来の検索バーとは異なります。モーダル検索フォームはデフォルトでは非表示になっており、ユーザーが積極的に検索したい場合にのみ表示されます。
たとえば、SearchWPでは、ユーザーに気を散らさない検索エクスペリエンスを提供するためにモーダル検索フォームを使用しています。私たちのウェブサイトでは次のようになります。
モーダル検索フォームは、ページレイアウトをクリーンで整理された状態に保ちます。貴重なスペースを占めるかさばる検索バーはもう必要ありません。さらに、ユーザーの注意は、表示されたときに検索機能にすぐに引き付けられます。見逃すことはまずないので、エンゲージメントの向上に役立ちます。
さらに、モーダル検索フォームはデザインの柔軟性を提供します。サイトがミニマリストデザインであっても複雑なレイアウトであっても、シームレスにフィットします。
さて、WordPressサイトにモーダル検索フォームを追加する方法を見てみましょう。
WordPressにモーダル検索フォームを追加する
モーダル検索フォームを表示する最も簡単な方法は、SearchWP Modal Search Formプラグインを使用することです。
最も良い点は、WordPress検索プラグインは完全に無料で利用でき、アクティブなWordPressテーマのスタイルに基づいていることです。その外観やスタイルを編集するためにコードを一行も触る必要はありません。
開始するには、SearchWP Modal Search Formプラグインをインストールしてアクティブ化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのガイドを参照してください。
アクティブ化したら、WordPressダッシュボードからSearchWP » Modal Formページに移動できます。ここから、「モーダルフォームを有効にする」オプションがアクティブになっていることがわかります。
次に、下にスクロールして、サイトに読み込むCSSファイルを選択できます。たとえば、SearchWP Modal Search Formでは、配置と視覚的なスタイリング、配置スタイリング、またはスタイリングなしを選択できます。
デフォルトの「配置とビジュアルスタイリング」設定の使用をお勧めします。これにより、検索フォームが表示される場所と見た目をより細かく制御できます。
それに加えて、フルスクリーンモードを有効にし、スクロールを無効にするオプションもあります。
フルスクリーンモードは、ユーザーがフォームを開いたときに画面全体を覆い、気を散らすことのない体験を提供します。
スクロールを無効にするオプションを有効にすることもできます。これにより、ユーザーが誤ってスクロールした場合の背景の動きが軽減され、検索体験がさらに向上します。
完了したら、「設定を保存」ボタンをクリックするだけです。
ウェブサイトにモーダル検索フォームを表示する
次に、ウェブサイトのどこにでもモーダル検索フォームを表示する必要があります。SearchWPを使用すると、サイトのメニューにフォームを追加したり、Gutenbergブロックやショートコードを使用したりできます。
WordPressでモーダル検索フォームを表示するための各方法を見てみましょう。
1. WordPressメニューにモーダル検索フォームを追加する
WordPressテーマに応じて、サイトの任意のメニューにモーダル検索フォームを追加できます。
WordPressダッシュボードから外観 » メニューに移動するだけです。SearchWPは、メニュー項目に「SearchWPモーダル検索フォーム」という新しいグループを追加します。
モーダルフォームを選択し、「メニューに追加」ボタンをクリックしてください。
完了したら、「メニューを保存」ボタンをクリックすることを忘れないでください。
その後、サイトにアクセスして動作を確認できます。
2. ブログ投稿とページにモーダル検索フォームを表示する
Gutenbergブロックまたはショートコードを使用して、任意のブログ投稿またはランディングページにモーダル検索フォームを追加することもできます。これは、サイトのコンテンツ内に検索オプションを表示したい場合に最適です。
まず、検索フォームを表示したいページまたは投稿にアクセスする必要があります。コンテンツエディターに入ったら、「+」ボタンをクリックして「モーダルフォーム」ブロックを追加するだけです。
その後、右側のパネルからモーダルフォームブロックの設定を変更できます。
たとえば、テキストを変更したり、テンプレートを選択したり、フォームをリンクまたはボタンにするかどうかを選択したりするオプションがあります。
完了したら、保存または公開ボタンをクリックするだけです。
ここから、ページまたは投稿にアクセスして、コンテンツ内のモーダルフォームを確認できます。
ショートコードを使用したい場合は、次のショートコードを入力して、サイトのどこにでもモーダルフォームを表示できます。
[searchwp_modal_search_form]
モーダル自体のさまざまな属性を制御するカスタマイズを適用することもできます。たとえば、次のショートコードは「検索を開く」というテキストのボタンを表示します。
[searchwp_modal_search_form engine="my_searchwp_engine" template="My Custom Template" text="Open Search" type="button"]
ショートコードの各属性を編集して、モーダル検索フォームをカスタマイズできます。たとえば、ボタンを表示したくない場合は、タイプをリンクに置き換えてテキストを編集するだけです。
3. ウィジェットエリアにモーダル検索フォームを表示する
サイドバーやフッターなど、WordPressテーマのウィジェットエリアにモーダル検索フォームを追加することもできます。
開始するには、WordPress管理パネルから外観 » ウィジェットに移動するだけです。その後、「+」ボタンをクリックして「モーダルフォーム」ウィジェットブロックを追加できます。
次に、右側のパネルでモーダルフォーム設定を編集するためのさまざまなオプションが表示されます。
テキストを変更したり、テンプレートを選択したり、リンクからボタンに変更したりするオプションがあります。
完了したら、「更新」ボタンをクリックしてください。
ここから、サイトにアクセスしてウィジェットエリアにモーダルフォームを表示できます。たとえば、デモサイトのサイドバーに追加しました。
次は何をしますか…
これで、モーダル検索フォームをサイトに簡単に追加する方法がわかりました。さらに一歩進んで、訪問者の全体的な検索エクスペリエンスを向上させることができます。
デフォルトのWordPress検索には多くの制限があり、カテゴリ、タグ、カスタムフィールド、製品詳細などの情報は検索プロセスに含まれていません。ただし、SearchWPを使用してデフォルトの検索設定を置き換えることで、これを変更できます。
このプラグインは、無制限のカスタム検索エンジンを作成し、カスタム検索フォームを設定し、サイトでコンテンツを検索する際に、タクソノミー、カスタムフィールド、メディアファイル、その他の重要な情報を含めるのに役立ちます。
最も良い点は、SearchWPモーダル検索フォームプラグインをSearchWPと組み合わせて使用し、ウェブサイトの検索機能を最大限に活用できることです。
この記事がWordPressでモーダル検索フォームを追加する方法を学ぶのに役立ったことを願っています。また、Divi検索結果ページテンプレートを作成する方法と、最適な結果を得るためのWordPress検索設定を設定する方法に関するガイドも参照してください。
よりパーソナライズされたWordPress検索エクスペリエンスを作成する準備はできましたか？今すぐSearchWPを使い始めましょう！
