WordPressのホーム画面に検索バーを追加する方法
WordPress サイトのホーム画面に検索バーを追加しますか?このガイドでは、それを実現するためのさまざまな方法を提供します。
このガイドでは、WordPress ウェブサイトのホーム画面に検索バーを含める 3 つの方法を学びます。したがって、ウィジェットパネルを介してこのタスクを実行する方法をお教えします。
また、WordPress ブロック エディターの検索ブロックを使用してこのタスクを実行する方法も学びます。さらに、このガイドでは、プラグインを使用して WordPress サイトのホーム画面に検索バーを追加する手順を説明します。
また、この記事には FAQ セクションを含めます。このセクションでは、このガイドのトピックに関連してよく寄せられる質問のいくつかに対する回答を紹介します。
ウィジェット パネルを介して WordPress のホーム画面に検索バーを追加する

ほとんどの WordPress テーマには、検索ウィジェットを含むウィジェットが用意されています。したがって、ウィジェット パネルの検索ウィジェットを使用すると、WordPress サイトのホーム画面に検索バーを簡単に追加できます。
ルートノート8スナップドラゴン
これを行うには、以下の手順に従ってください。
- WordPress ウェブサイトのバックエンド ダッシュボードに管理者としてサインインします。次に、マウスを 外観 左ペインで ウィジェット 表示された選択肢から

- その後、 トグルブロックインサータ の左上隅にあるボタン ウィジェット ページ。

- その後、検索欄に「検索」と入力してください。

- 次に、ドラッグ アンド ドロップします。 探す ウィジェットを検索結果から、検索バーを追加する WordPress サイトの領域に移動します。検索バーを ヘッダ このデモンストレーションのための私達のウェブサイトの領域。

検索ウィジェットの上部にあるツールバーを使用して、検索バーをカスタマイズすることもできます。

- 最後に青色をクリック アップデート ページの右上にあるボタンをクリックして、変更を保存します。したがって、検索バーはホーム画面だけでなく、WordPress サイトの他のすべてのページにも表示されるはずです。

WordPress Block Editor を使用して WordPress のホーム画面に検索バーを追加する

WordPress サイトのホーム画面に検索バーを追加するもう 1 つの方法は、デフォルトの WordPress ブロック エディターで検索ブロックを使用することです。さらに、この方法は、前のセクションで説明した方法と非常によく似ています。
とはいえ、以下の手順に従って、WordPress ブロック エディターを介して WordPress サイトのホーム画面に検索バーを追加します。
コディにお気に入りを追加する方法
- 管理者として、WordPress Web サイトのバックエンドにサインインします。次にクリック ページ バックエンドの左ペインのメニューの中で。

- その後、ウェブサイトのホームページのタイトルを選択して開きます。この場合、当社のウェブサイトのホームページのタイトルは「ブロックでウェブサイトを作成する」です。

- Web サイトのホームページが開いたら、 トグルブロックインサータ ページの左上隅にあるボタン。

- 続いて、表示される検索フィールドに「検索」と入力します。

- 今、ドラッグアンドドロップ 探す 検索結果から、検索バーを追加したいホームページの適切な領域にブロックします。

検索ブロックの上部にあるツールバーを使用して、検索バーをカスタマイズすることもできます。

- 最後に青色をクリック アップデート ページの右上隅にあるボタンをクリックして、変更を保存します。

プラグインを使用して WordPress のホーム画面に検索バーを追加する

興味深いことに、プラグインを使用して、WordPress サイトのホーム画面に検索バーを追加することもできます.多くのプラグインがそれを行うことができますが、ここでは BestWebSoftによるカスタム検索 このセクションのプラグイン。
この無料のプラグインを使用すると、ショートコードを使用して WordPress の特定のページまたは投稿に検索バーを追加できます。したがって、以下の最初のサブセクションでは、インストールしてアクティブ化する手順を説明します。 BestWebSoftによるカスタム検索 WordPressのプラグイン。
一方、2 番目のサブセクションでは、このプラグインを使用して WordPress のホーム画面に検索バーを追加する方法を示します。
WordPress に BestWebSoft プラグインによるカスタム検索をインストールして有効にする方法
- WordPress サイトのバックエンドに管理者としてサインインします。次に、マウスを プラグイン 左ペインで、次に左クリック 新しく追加する 表示された選択肢から

- その後、画面の検索欄に「Custom Search by BestWebSoft」と入力してください。 プラグインを追加 ページ。

- その後、 今すぐインストール のボタン カスタム検索 by BestWebSoft – 高度な WordPress 検索バー プラグイン 検索結果から。

- プラグインをインストールしたら、 活性化 ボタンをクリックして、WordPress サイトで有効にします。

BestWebSoft プラグインによるカスタム検索を使用して、WordPress のホーム画面に検索バーを追加する方法
- プラグインを有効化したら、WordPress サイトのバックエンドに管理者としてサインインしていることを確認してください。次に、 カスタム検索 バックエンドの左ペインのメニューの中で。

- 上で カスタム検索設定 ページで、ショートコードをコピーします カスタム検索ショートコード 箱。の検索バーをカスタマイズすることもできます カスタム検索設定 ページ。

- ショートコードをコピーしたら、 ページ バックエンドのダッシュボードの左側のペインにあります。

- その後、ホームページのタイトルをクリックして、WordPress サイトのホームページを開きます。この場合、当社のウェブサイトのホームページのタイトルは「ブロックでウェブサイトを作成する」です。

- ホームページが開いたら、手順 2 でコピーしたショートコードをホームページの任意の領域に貼り付けます。

- 最後に、 アップデート ページの右上隅にあるボタン。したがって、サイトのフロント エンド (ライブ Web サイト) からホームページをプレビューまたはアクセスすると、ショートコードが検索バーとして表示されます。2 番目のスクリーンショットを参照してください。


WordPress のホーム画面に検索バーを追加することに関するよくある質問

Web サイトの機能と使いやすさを向上させるには、検索バーを追加することが重要です。
2. 検索バーにボタンはありますか? はい、ほとんどの場合、検索バーには検索ボタンが付いています。通常、検索ボタンは虫眼鏡アイコンで示され、検索を送信するために使用されます。
ただし、検索ボタンが省略されている場合があります。これは、ユーザーが検索ボタンを使用するのではなく、Enter キーを押して検索を送信できるためです。
はい、検索ボックスと検索バーはまったく同じものです。
4. 検索バーは左右どちらに置くべきか? 検索バーは、ほとんどの場合、Web サイトのページの右側にあります。それでも、検索バーを左側に配置しても、問題が発生したり、ユーザー エクスペリエンスに影響したりすることはありません。
ただし、検索バーがWordPressサイトの訪問者が簡単に見つけられる領域にあることを確認してください.
はい、WordPress のブロック エディターには検索ブロックがあります。
WordPress のホーム画面に検索バーを追加することについての私の最終的な考え

ホーム画面に検索バーを追加すると、WordPress サイトの使いやすさと機能性が向上します。詳細を説明すると、訪問者がサイトを簡単にナビゲートできるようになり、エンゲージメントの向上につながります。
幸いなことに、このガイドでは、WordPress サイトのホーム画面に検索バーを追加する 3 つの方法を説明しました。具体的には、ウィジェット パネルを介してこのタスクを実行することについて説明しました。
このガイドでは、WordPress ブロック エディターの検索ブロックを使用してこのタスクを実行する手順についても説明しました。それがすべてではありません;また、プラグインを使用して WordPress のホーム画面に検索バーを追加する手順も含めました。
ライブウェーブスーパーアンテナレビュー
そうは言っても、このガイドがお役に立てば幸いです。もしそうなら、私たちはあなたの考えを知りたいです.コミュニティフォーラムのコミュニティプラットフォームであなたの考えを親切に共有してください.
また、コミュニティ フォーラムでこのガイドに関するコメントや質問をすることもできます。私たちのフォーラム チームと一部のコミュニティ メンバーは、できるだけ早く返信する必要があります。
最後に、私たちを訪問してください WordPress とウェブサイトのハウツー より役立つ WordPress ガイドのページ。


