WordPressサイトに検索バーを追加する方法

検索バーは、誰もが異議を唱えることのないWebサイトの重要な要素です。 これは、Webサイトにホームページ、製品ページ、ブログページ、価格設定ページなどを通じて大量の情報が含まれているためです。そのため、WordPressサイトに検索バーを追加することが重要です。

異なるページに存在する情報が必要な場合、どのようにしてそれらを見つけますか？ あなたは彼らがそれらのページを個別に訪問しているのを見つけるつもりですか？ 確かに、あなたはそうしたくないでしょう。 この方法で必要な情報が見つからないわけではありません。 しかし、それは時間もかかり、またうんざりします。 ここで、サイトに検索バーを追加することが重要になります。

サイトに検索バーを追加する理由

サイトに検索バーがないとします。 その場合、訪問者があなたのサイトを訪問するとき、彼らは彼らの必要な情報を見つけるのに苦労します。 その結果、彼らはあなたのサイトを去り、彼らをウェブサイトに入れるというあなたの目的全体が無駄になります。

以下にあなたのサイトに検索バーを追加することでノッチアップできる主な利点のいくつかを紹介しましょう-

• 情報を見つけるための顧客の努力を容易にします
• ユーザーエクスペリエンスを合理化
• エンゲージメントを高める
• バウンス率を下げる
• 必要なアイテムや情報をいくつかのキーワードで表示し、労力を軽減します

WordPressのデフォルトの検索ウィジェットを使用してメニューに検索バーを追加する：

WordPressのデフォルトの検索ウィジェットを使用してメニューに検索バーを追加できますか？ いいえ、できません。 WordPressではウィジェット対応エリアにのみ検索バーを追加できるためです。

メニューに検索バーを追加したい場合は、ヘッダーやフッターなど、Webサイトのさまざまな領域にある他のプラグインやウィジェットを活用する必要があります。

そのため、このチュートリアルでは、WordPressサイトに検索バーを追加する3つの異なる方法について説明します。

それでは、WordPressのデフォルトウィジェットを使用して検索バーをWebサイトに追加する方法を見てみましょう。

WordPressのデフォルトの検索ウィジェットで検索バーを追加します。

Webサイトに検索バーを挿入する最も簡単で便利な方法は、WordPressダッシュボードを使用することです。 どうやってするか？ それをチェックしよう-

ダッシュボードからウィジェットに移動します。

最初に、管理パネルのダッシュボードに移動して、外観を見つけます。 [外観]の下のアイテムのリストから[ウィジェット]に移動してクリックします。

ダッシュボード>外観>ウィジェット

使用可能なウィジェットから検索ウィジェットを追加します。

これにより、さまざまなページセクションで表示される新しいページに移動します。 次に、[ブロックの追加]ボタン（+記号で表示）を押して、既存のすべてのウィジェットを表示します。

下にスクロールして検索ウィジェットを見つけるか、検索フィールドに「検索」と入力して検索ウィジェットを見つけることができます。

検索バーを表示するセクションをクリックして、検索ウィジェットを押します。 または、検索ウィジェットを目的のセクションにドラッグアンドドロップすることもできます。

必要な調整を行います。

選択したセクションの下に検索バーが表示されます。 検索バーの配置、ボタンの位置、テキストの色など、さまざまな要素に必要な変更を加えることができます。

要件に応じて、検索バーにカスタムラベルを追加することもできます。 最後に、[更新]ボタンをクリックします。

ページに検索バーを表示します。

これで、公開されたページまたは投稿のいずれかにアクセスすると、メインサイドバーに検索バーまたは検索ボックスが表示されます。

ElementsKit検索ウィジェットで検索バーを追加します。

次に、WordPressサイトに検索バーを追加するもう1つの簡単な方法について説明します。 そして、それはElementsKitのヘッダー検索ウィジェットを介して行われます。 ElementsKitを使用して検索ボックスを追加するのは非常に簡単です。

それ以上の苦労なしに、それをチェックしましょう-

ダッシュボードから既存の投稿またはページに移動します。

まず、ダッシュボードに移動して、投稿またはページを見つけます。 ここでは、ElementsKitウィジェットが「HelloWorld！」という名前の投稿でどのように機能するかを示します。

[投稿]に移動し、[すべての投稿]を選択して、すべての投稿を表示します。 そこから、検索バーを追加する投稿を選択できます。 既存の投稿またはページがない場合は、新しい投稿またはページを追加する必要があります。

ダッシュボード>投稿>すべての投稿>あなたの投稿

Elementorウィンドウに切り替えます。

次に、上部中央にある「Elementorで編集」をクリックします。 これにより、Elementorウィンドウが表示されます。

ヘッダー検索ウィジェットをドラッグアンドドロップします。

Elementorウィンドウでは、多数のウィジェットにアクセスできます。 検索フィールドに「ヘッダー検索」ウィジェットを入力して、ウィジェットを検索します。 または、下にスクロールしてウィジェットを見つけることもできます。

ウィジェットを追跡したら、ウィジェットを指定された領域にドラッグアンドドロップして、検索バーを表示します。 ヘッダー検索バーであるため、投稿のテキストの上にセクションを追加することを忘れないでください。

検索バーのパラメータを設定します。

検索バーがページに表示されたら、好みに応じてバーのパラメータを設定します。 [コンテンツ]タブの下に、プレースホルダーテキストを配置し、検索アイコンを選択して、フォントサイズを調整する[ヘッダー検索]セクションがあります。

[スタイル]タブには、ヘッダー検索と検索コンテナの2つのセクションがあります。 [ヘッダー検索]セクションから、検索バーの背景色、境界線の種類、検索ボックスの影、余白などのパラメーターを調整できます。

[コンテナの検索]セクションから、背景の種類を選択し、プレースホルダーのテキストと境界線の色を設定できます。

最後に、あなたは行ってもいいです！

設定を完了すると、投稿のフロントエンドにある検索バーを確認して表示できるようになります。 検索ボックスの外観に満足できない場合は、管理パネルから自由に変更できます。

CSSコードで検索ボックスを追加します。

サイトに検索バーを追加するために使用できるもう1つの方法があり、それはCSSコードを使用しています。 そのためには少し技術的な知識が必要ですが、それはロケット科学ではありません。 ここでプロセスを紹介します。その後は非常に簡単になります。

テーマエディタに移動します。

まず、ダッシュボードから「外観」をクリックし、「テーマエディタ」に移動します。

header.phpまたはsidebar.phpファイルを開きます。

これで、デフォルトでstyle.cssファイルに移動します。 そこから、検索バーを表示する位置に応じて、 header.phpまたはsidebar.phpファイルを開きます。

検索バー機能の追加：

ここで、この関数を追加します<？php get_search_form（）; ？> header.phpまたはsidebar.phpファイルコード内。 header.phpファイルコードに関数を追加しました。

サイトの検索バーを表示します。

最後に、公開したページを開くと、上部に検索バーが表示されます。 sidebar.phpファイルに関数を追加した場合、検索バーがサイドバーに表示されます。

終わらせている：

これだよ！！！ WordPressサイトに検索バーを追加する3つの非常に簡単なテクニックを紹介しました。 要件に応じて、それらのいずれかを選択できます。 ただし、ElementsKitのヘッダー検索ウィジェットを使用して検索バーを追加すると、追加のメリットが得られます。

あれは何でしょう？ 底なしのカスタマイズオプション!!! したがって、カスタマイズが好きな場合は、ElementsKitのヘッダー検索ウィジェットを利用してください。 それで、あなたはあなたの検索バーに魅惑的な外観を与えることができます。