WordPressを使い始めた頃、基本的な検索機能に不満を感じていた。無関係な結果が返されたり、コンテンツが完全に見逃されたりすることがよくあったのだ。
自分のWordPressサイトを運営する中で、優れた検索機能は訪問者が探しているものを見つけやすくし、サイトに長く滞在してもらえるようになることを知っています。そうすることで、訪問者はよりハッピーになり、あなたのウェブサイトに戻ってくる可能性が高くなるのです。
このガイドでは、WordPressに検索バーを追加する方法をご紹介します。このガイドでは、WordPressに検索バーを追加する方法をご紹介します。
なぜWordPressに検索バーを追加するのか？
特定の情報を探してあるウェブサイトにたどり着いたとする。ホームページをスクロールし、いくつかのタブをクリックしますが、探しているものが見つかりません。
イライラするでしょ？では、あなたのWordPressウェブサイトについて考えてみましょう。訪問者も同じで、情報を求めています。そこで、検索バーの魔法が活躍するのです。
WordPressサイトに検索バーを追加すると、ユーザー体験がより簡単になります。ウェブサイトの訪問者が探しているものをすぐに見つけることができれば、滞在して探索する可能性が高まります。
実際、サイト内検索の利用者は、この機能を使わない人に比べてコンバージョンに至る確率が1.8％高い。このことから、検索バーは訪問者を購読者や顧客に変えるために非常に重要である。
さらに良いことに、ユーザーがサイトに長く滞在すれば、SEOのランキング要因である直帰率を下げることができる。
しかし、その利点はユーザーエクスペリエンスにとどまらない。優れた検索バーや検索ウィジェットは、閲覧者が何に興味を持っているかを知るのにも役立ちます。検索クエリを見ることで、訪問者の要求や質問に応えるためにコンテンツ戦略を調整することができます。
WordPressに検索バーを追加する方法：2つの簡単な方法
WordPressのデフォルトの検索機能は、シンプルな状況には適していますが、CSSコードを書いたり開発者を雇ったりせずにカスタマイズするのは困難です。よりカスタムなアプローチでは、ウィジェットエリア、メニュー、WooCommerceページにWordPress検索バーを追加することができます。場合によっては、カスタムフィールドやカスタマイズされた検索結果などを含めることもできます。
このことを念頭に置いて、あなたのウェブサイトに検索バーを追加する方法をステップバイステップで見てみましょう：
最初に紹介するのは、ページビルダーを使ってWordPressサイトに検索バーをシームレスに統合する方法だ。思っているよりも簡単で、技術的なウィザードでなくても実行できる。
方法1.SeedProdを使ってWordPressにカスタム検索フォームを追加する
まず最初に、SeedProdについて話そう。
SeedProdをご存知でない場合、SeedProdは 最高のWordPressページビルダーの1つで、コードを1行も触ることなくウェブサイトをカスタマイズすることができます。ドラッグ＆ドロップ機能からあらかじめ用意されたテンプレートまで、SeedProdはあなたのサイトを思い通りに簡単にデザインすることができます。
検索バーをサイトに追加することも含まれる。
本題に入る前に、SeedProdをインストールする必要がある。SeedProdには 無料版といくつかのプレミアム・オプションがありますが、このガイドではSeedProd Proを使用します。先に進み、プランを選択し、プラグインをダウンロードしてください。
ダウンロード後、以下の手順に従ってWordPressサイトにSeedProdプラグインをインストールすることができます。
SeedProdを有効にして、次のステップはWordPressの検索バーを追加する場所を選択することです。SeedProdを使えば、WordPressのカスタムテーマであろうと、特定のランディングページであろうと、ウェブサイトのどの部分でもカスタマイズすることができます。
ランディングページビルダーは、リードとコンバージョンを高めるための独立したページを作成するのに最適です。
また、テーマビルダーは、開発者を雇うことなくカスタムWordPressテーマを構築するのに最適です。
これらのオプションを見つけるには、WordPressのダッシュボードからSeedProdに移動し、ニーズに応じてTheme BuilderまたはLanding Pagesのいずれかを選択します。そこから、あなたのビジョンに沿った既成のランディングページテンプレートまたは完全なウェブサイトキットを選択し、サイトのカスタマイズを開始することができます。
すべての手順が必要ですか？WordPressのカスタムテーマの作成方法と、WordPressでランディングページを作成する方法をご紹介します。
WordPressページに検索ボックスを追加する
ここからが楽しいところだ。検索バーを追加するのだ。
SeedProdページビルダー内では、ページに追加する様々なブロックがあるパネルが左側にあります。検索フォームブロックが見つかるまで下にスクロールしてください。
次に、WordPress検索を追加したいブロックをページにドラッグ＆ドロップします。
検索ブロックの設定では、その外観、サイズ、検索アイコンをカスタマイズすることができ、訪問者を誘導するために「検索はこちら...」のようなプレースホルダーテキストを追加することもできる。
検索フォームの「詳細設定」タブでは、豊富なカスタマイズオプションをご利用いただけます。あなたのサイトのテーマに合わせて検索ボタンや検索ボックスの色を変更したり、最適なレイアウトのために間隔を調整したり、デバイスの視認性をコントロールしたり、さらに派手にするためにアニメーションを追加することもできます。
変更が完了したら、[保存して 公開]ボタンをクリックします。
WordPressのヘッダーに検索バーを追加する
サイト内検索は、どのページからも簡単にアクセスできるヘッダーに設置するのが最も効果的だとお考えかもしれません。SeedProdを使えば、WordPressのヘッダーに検索バーを追加するのは簡単です。
そのためには、ヘッダー、フッター、サイドバー、アーカイブなど、ウェブサイトの様々な部分をカスタマイズできるTheme Builder機能を使う必要があります。
まだSeedProdを使用してWordPressテーマを設定していない場合は、以下の手順に従ってWordPressヘッダーをカスタマイズすることができます。
ヘッダーの編集モードに入ると、おなじみのSeedProdページビルダーインターフェイスが表示されます。前と同じように、左側のパネルで検索フォームブロックを見つけ、ヘッダーの好きな場所にドラッグします。
ヘッダーデザインにシームレスにフィットするように検索バーを微調整することを忘れないでください。検索フォーム設定の'詳細設定'タブに進んでください。ここでは、スタイルを調整し、様々なデバイスで検索バーが異なるように表示されるように設定することができます。
変更を保存したら、あなたのウェブサイトをチェックアウトして、ヘッダー検索バーをライブで確認することができます。
WordPressのサイドバーに検索ウィジェットを追加する
サイドバーは検索バーに最適な場所であることがあります。SeedProdを使えば、WordPressのサイドバーに検索バーを追加するのは、ヘッダーに追加するのと同じくらい簡単です。
では、その手順を説明しよう。
前回同様、WordPressのダッシュボードに移動し、SeedProd、Theme Builderの順にクリックする。そこから、サイドバーテンプレートの「Edit Design」リンクをクリックし、ページビルダーを開きます。
このテンプレートをまだお持ちでない場合は、以下の手順に従ってWordPressにカスタムサイドバーを作成してください。
サイドバーのページビルダーに入ったら、左側のパネルで検索ブロックを見つけ、サイドバーの検索バーを表示したい場所にドラッグします。
あとは外観をカスタマイズし、保存ボタンをクリックして変更を反映させるだけだ。
方法2.検索バープラグインでWordPressにサイト内検索を追加する
WordPressサイトに検索バーを追加する専用のソリューションをお探しなら、SearchWPのようなWordPress検索プラグインが最適です。
このような検索プラグインを使えば、Ajaxを使ったライブ検索やカスタマイズ可能な検索結果のような高度な機能を備えた検索ボックスを簡単に追加することができる。
ライブAjax検索は、ユーザーが入力するたびにリアルタイムの検索結果を表示します。これにより、検索結果を待つ時間が短縮され、全体的な検索エクスペリエンスが向上します。
WordPressのナビゲーションメニューに検索バーを追加する
まず、WordPressのダッシュボードに移動し、プラグインに移動し、新規追加をクリックします。SearchWP Modal Search Form'を検索し、プラグインをインストールして有効化する。または、WordPress.orgからプラグインをダウンロードし、手動でアップロードすることもできます。
有効化後、ダッシュボードから「外観と メニュー」を開き、編集するメニューをドロップダウンから選択します。
次に、画面の左側にある'SearchWP Modal Search Forms'ボックスを見つけてクリックし、オプションを展開します。ネイティブWordPress'ボックスオプションをチェックし、メニューに追加 ボタンをクリックします。
メニューに「Native WordPress」項目が表示されますので、クリックしてカスタマイズしてください。例えば、ナビゲーションのラベルを「検索」に変更すると、よりわかりやすくなります。
その後、「変更を保存」ボタンをクリックしてメニューを保存し、ウェブサイトを訪問してメニュー検索機能の動作を確認してください。
Ajaxによるライブ検索の追加
よりインタラクティブな検索体験のために、Ajaxテクノロジーを使ってライブ検索結果を追加することができます。これにより、Google検索や他の検索エンジンと同様に、ユーザーがクエリを入力すると、関連する検索結果を表示することができます。
これを行うには、'SearchWP Live Ajax Search'プラグインをインストールして有効化します。このプラグインはSearchWP モーダル検索フォームとシームレスに動作し、設定する必要はありません。
このプラグインを有効にすると、すべてのフォームにライブ検索が自動的に追加されます。サイトのフロントエンドにある検索フォームにアクセスし、クエリを入力することでその動作を確認することができます。
ワードプレスの検索結果をカスタマイズする
あなたのWordPressメニューにライブ検索バーを追加することは素晴らしいスタートですが、プレミアムSearchWPプラグインを使用すると、さらに多くのことを行うことができます。プレミアムプラグインには高度な検索機能があり、検索結果をカスタマイズしたり、eコマース商品のようなプロモーションアイテムをハイライトすることができます。
完全なガイドについては、SearchWPを使用してWordPressの検索を改善する方法についてのヒントを参照してください。
そうだ！
WordPressサイトに検索バーを追加するのは賢い方法です。ウェブサイトが使いやすくなり、訪問者が探しているものを見つけやすくなります。SeedProdを使うにしてもSearchWPを使うにしても、どちらの方法もシンプルで効果的です。
さあ、検索バーを追加してください！
もっと簡単なWordPressチュートリアルをお探しの方は、以下のガイドをご覧ください：
- WordPressにビフォーアフターの写真スライダーを追加する方法
- WordPressで著者欄を追加する方法
- WordPressでアニメーション数字カウンターを作成する方法
- WordPressで派手なセクション分割を作成する方法
- ブログをウェブサイトのように見せる方法
- WordPressでタブを作成する方法
- WordPressでテキストアニメーションを作成する方法（簡単なステップ）
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
