SearchWPブログ

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

WordPressのページに検索ボックスを追加する方法

WordPressのページに検索ボックスを追加する方法を知りたいですか?

訪問者が検索を実行するよう促し、コンテンツの発見可能性を高め、ページビュー数を増やします。

このガイドでは、WordPress初心者の方でも、数回のクリックでページに検索ボックスを追加する方法を学びます。

始めましょう!

WordPressページに検索ボックスを追加するメリット

ページに検索バーを追加すると、以下のようになります:

  • ページビュー数を増やす:訪問者はブログ記事やページに検索バーが表示されると、特に促された場合、それを使用する可能性が高くなります。
  • コンテンツの発見可能性を高める:閲覧数の少ないコンテンツにも、見つけてもらうチャンスを与えましょう。
  • より関連性の高い検索結果を提供する:検索ボックスを特定のコンテンツタイプやカテゴリに限定することで、訪問者が探しているものをより速く見つけられるようにします。
  • 平均セッション時間を延長する:訪問者がサイトを探索するコンテンツが多いほど、サイトに滞在する時間が長くなります。
  • 検索エンジンでのランキングを上げる:平均セッション時間が長いことは、Googleにとってあなたのサイトが検索結果でより良い順位を獲得する価値があるという強力なシグナルです。

それでは、WordPressのページに検索ボックスを追加する方法を見ていきましょう。

WordPressでカスタム検索バーを追加する方法

WordPressのページにカスタム検索バーを追加する最も簡単な方法は、SearchWPのようなプラグインを使用することです。

SearchWP

これは、多くの便利な機能を備えた、最も初心者向けのWordPress検索プラグインです。

SearchWPを使用すると、ビジネス目標に合わせてサイトの検索機能を完全にカスタマイズできます。

たとえば、検索結果の順序を変更したり、検索を投稿のみに限定したり、ライブ自動補完検索を追加したりできます。

そして、これはプラグインの機能のほんの一部です!

SearchWPでは、次のことも可能です:

50,000以上のウェブサイト所有者がすでにSearchWPを使用して、検索機能を強化し、訪問者にさらに関連性の高い検索結果を提供しています。

あなたも参加しませんか?それでは、このプラグインを使用してページに検索ボックスを追加する方法を見ていきましょう。

ステップ1:SearchWPのインストール

開始するには、ウェブサイトにアクセスして新規アカウントにサインアップし、SearchWPのコピーを入手する必要があります。

完了したら、SearchWPアカウントにアクセスし、ダウンロードタブに移動するだけです。

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

次に、SearchWPをダウンロードボタンを押し、プラグインのZIPファイルをコンピューターに保存します。

ダウンロード後、左下隅にあるライセンスキーをコピーします。

次のステップは、WordPressウェブサイトにSearchWPプラグインをインストールして有効化することです。

まず、ダウンロードしたZIPファイルをサイトにアップロードする必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法チュートリアルを確認してください。

その後、SearchWPへようこそ画面とセットアップウィザードが表示されます。「オンボーディングウィザードを開始」ボタンをクリックし、画面の指示に従ってください。

SearchWPをインストールした後、WordPressダッシュボードに移動し、トップバーのSearchWPボタンにカーソルを合わせ、ライセンスを有効化をクリックします。

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

これで、検索エンジンをカスタマイズする準備ができました。

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

次に、WordPressダッシュボードからSearchWP » アルゴリズムに移動して、検索エンジンをカスタマイズできます。

検索エンジンは、検索を実行する際に従う一連のルールと考えることができます。これらのルールをカスタマイズすることで、サイトでの検索方法を変更できます。

たとえば、カスタムフィールドを含めたり、特定のページを検索結果から除外したり、投稿タグによる検索を有効にしたり、その他多くのことができます。

開始するには、ソースと設定ボタンをクリックします。

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

次に、検索エンジンのソースを選択できるポップアップウィンドウが開きます。

ご覧のとおり、4つの検索ソースがあります:投稿ページメディアユーザーです。

デフォルトの検索ソース

たとえば、この検索エンジンに投稿のみを検索させたいとします。これにより、サイトの検索結果を整理し、訪問者がより早く適切なコンテンツを見つけられるようにすることができます。

次に、投稿以外のすべての検索ソースのチェックを外します。

投稿のみをソースとして選択

検索エンジンの設定のカスタマイズが完了したら、完了ボタンを押します。

次に、訪問者がタグやカスタムフィールドで投稿を検索できるようにすることもできます。

開始するには、投稿セクションに移動し、属性の追加/削除ボタンをクリックします。

投稿に属性を追加

次に、新しいウィンドウがポップアップ表示され、検索を実行する際に考慮したいカスタムフィールドとタクソノミーを指定できます。

たとえば、不動産ウェブサイトがあるとします。検索プロセスに寝室数などのカスタムフィールドを含めることができます。

カスタムフィールドを検索に追加

次に、投稿タグやカテゴリによる検索も許可できます。

まず、タクソノミーフィールドをクリックし、ドロップダウンメニューから「タグ(post_tag)」または「カテゴリ(category)」を選択します。

投稿タグを選択

次に、タグタクソノミーを見つけてクリックします。

これで、サイトの訪問者はタグやカスタムフィールドで投稿を検索できるようになります。

属性の管理が完了したら、完了ボタンを押して変更を保存します。

最後のステップは検索エンジンを保存することです。それを行うには、右上隅にある Save Engines ボタンをクリックします。

エンジンの設定を保存

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

検索フォームをカスタマイズしたので、次のステップは新しい検索フォームを作成することです。

まず、WordPressダッシュボードから SearchWP » Algorithm にアクセスし、「Add New」ボタンをクリックします。

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

次の画面で、上部にあるフォームの名前を変更できます。

その後、SearchWPは選択できるさまざまなテーマレイアウトを提供します。

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

下にスクロールすると、フォームをカスタマイズするためのオプションがさらに表示されます。

さらに、フォームのエンジン、結果ページなどを選択できます。

検索フォームの検索エンジンを選択

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

ステップ 4: WordPressページに検索バーを追加する

SearchWPは、検索フォームを任意のページに自動的に埋め込むオプションも提供しています。

検索フォームページにある「Embed」ボタンをクリックするだけです。

検索フォームを埋め込む

次に、Gutenbergブロック、ショートコード、またはPHPコードを含むさまざまな埋め込みオプションを持つ新しいウィンドウが開きます。

このチュートリアルでは、「Gutenberg Block」を選択し、新しいページに追加します。

新しい検索フォームを埋め込む

または、任意のページにSearchWPブロックを追加して検索ボックスを表示することもできます。

開始するには、WordPressダッシュボードの Pages » Add New に移動します。

新しいページを追加

ページエディタに移動したら、+ ボタンをクリックして新しいブロックを追加します。

SearchWP Form ブロックに移動し、ページに追加するだけです。

SearchWPフォームブロックを追加

その後、検索フォームを選択する必要があります。

SearchWP Formブロックのドロップダウンメニューをクリックして、フォームを選択するだけです。

検索フォームを選択

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

ページが公開されたら、新しい検索ページを確認できます。

テストサイトでのこのページの表示は次のとおりです。

WordPressページに検索ボックスを追加する方法

検索ボックスが正しく機能することを確認するためにテストしましょう。

さまざまなカテゴリのWordPressに関連する投稿が多数ありますが、そのうちの1つだけが Tutorials カテゴリに関連付けられています。

WordPress を検索して、どのような結果が得られるか見てみましょう。

検索結果をクリック

ご覧のとおり、Tutorials カテゴリ内に配置された単一の投稿のみが見つかります。

これは、検索ボックスが期待どおりに機能していることを意味します。

投稿が見つかりました

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

SearchWPを使用する最も良い点は、最も人気のあるWordPressウェブサイトやランディングページビルダーのいくつかに検索フォームを追加できることです。

それらにそれぞれ検索ボックスを簡単に追加する方法を見ていきましょう。

1. Oxygen Builder

Oxygenは、サイトのデザインを細かく制御できる、堅牢なビジュアルサイトビルダーです。

レイアウトの構築にOxygenを使用している場合、SearchWPフォーム要素を使用して検索フォームを簡単に統合できます。

oxygenで新規要素を追加

要素を追加し、ドロップダウンメニューからフォームを選択するだけです。ランディングページに追加できるSearchWP結果要素もあります。

詳細については、Oxygenビジュアルサイトビルダーを使用して検索ボックスを追加する方法に関するガイドをご覧ください。

2. Elementor

WordPressで最も人気のあるページビルダーの1つであるElementorは、要素のドラッグアンドドロップを簡単にします。

SearchWPはElementorとシームレスに統合されており、ページ上のどこにでも検索ウィジェットを配置できます。

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

これにより、Elementorの魅力的なランディングページに強力な検索フォームを追加できます。

詳細については、Elementorページに検索ボックスを追加する方法に関するガイドをご覧ください。

3. WPBakery

WPBakery Page Builderは、フロントエンドとバックエンドの両方の編集機能を提供し、多くのWordPressサイトで引き続き人気のある選択肢です。

特定のコンテンツ要素を使用して、WPBakeryの行と列内に検索フォームを配置できます。

WPBakeryで検索フォームを追加するには、ページ上のどこにでもSearchWPフォーム要素を追加するだけです。

SearchWPフォーム要素を追加

手順については、WPBakeryページビルダーで検索ボックスを追加する方法に関するガイドをご覧ください。

4. Breakdance

Breakdanceは、その速度とユーザーフレンドリーなワークフローで知られるモダンなビルダーです。

Breakdanceデザインに機能的な検索フォームを追加することは、訪問者が探しているものを正確に見つけられるようにするための簡単なプロセスです。

BreakdanceでSearchWPフォーム要素を追加

このガイドに従って、Breakdanceで検索フォームを作成する方法を詳しく知ることができます。

5. Beaver Builder

Beaver Builderは最も人気のあるページビルダーの1つであり、ページの構築に信頼性が高くクリーンなインターフェイスを提供します。

これが好みのツールである場合、組み込みモジュールを使用して、SearchWPと完全に互換性のある検索フォームを表示できます。

検索フォームモジュールを追加

Beaver Builderを使用して検索フォームを追加する方法に関するすべての詳細については、このガイドに従ってください。

6. Bricks Builder

Bricksは、開発者の間で人気が高まっているパフォーマンス重視のビルダーです。

サイトのナビゲーションとユーザーエクスペリエンスを向上させるために、Bricksテンプレートに検索フォームを簡単に挿入できます。

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

詳細については、Bricksを使用してWordPressで検索フォームを追加する方法に関するガイドに従ってください。

7. Divi

Diviは、サイトのテーマの広範なカスタマイズを可能にする強力なビジュアルビルダーです。

検索バーを追加するだけでなく、SearchWPは検索結果ページまで、エクスペリエンス全体をカスタマイズするのに役立ちます。

ページ上のどこにでもSearchWPフォームモジュールを追加し、検索フォームをすばやく選択するだけです。

SearchWPフォームモジュールを追加

すべての手順は、Diviの検索結果ページテンプレートの作成方法に関するガイドに記載されています。

ボーナス:WordPressナビゲーションメニューに検索ボックスを追加する

サイトのナビゲーションメニューに検索ボックスを追加することもできます。

訪問者にとってより見やすくなり、検索を実行するように促します。

ナビゲーションメニューに検索バーを追加

詳細については、WordPressメニューに検索バーを追加する方法のステップバイステップチュートリアルをご覧ください。

訪問者がサイトでコンテンツを検索するための、より便利な方法を提供できるようになることを願っています。

この記事が、ページに検索ボックスを簡単に追加する方法を学ぶのに役立ったことを願っています。また、Elementorページに検索ボックスを追加する方法WordPressで投稿コンテンツを検索する方法に関するガイドも参照してください。

スマート検索ボックスを作成してページに追加する準備はできましたか?ここからSearchWPを開始できます

著者アバター
Aazim Akhtar

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

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

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