WordPressで検索フォームをデザインする方法を画像付きで解説

tra-zou | Posted on 2021-12-16 |

WordPressで検索フォーム・検索バーを表示する場合、多くの方がウィジェットで配置するのではないでしょうか。

この方法でもサイドバーやヘッダー部分に表示できますが、検索フォームのデザインの調整が難しかったり（コーディング知識が必要）、配置についてもWordpressのテーマで決められた場所にしか配置できず、柔軟性に劣ります。

そこでおすすめなのが、Elementorの検索フォームの利用です。

コーディング知識がない人でも、フォントやレイアウトを自由に調整していくことが可能です。

●Wordpressの検索フォームウィジェット

●Elementorの検索フォームウィジェット

Contents

Elementor検索フォームの特徴

Elementorの検索フォームウィジェットで実現できることとしては、以下の点があります。

検索フォームはClassic、Minimal、Full Screenの3つのスキン（基本的な仕様）があり、それぞれで検索バーの表示方法や、機能も異なります。

通常はコーディングが必要とされる機能ですが、タブから好みのスキンを選択するだけで、サイトに反映することが可能です。

※下図は、Full Screenのスキンを利用したケースです。検索バーをクリックすると、画面一面に検索フォームが表示される仕様です。

検索フォームの角を丸めたり（CSSではborder-radiusを操作する）、ボタンの色やアイコンも簡単且つ自由自在に編集できます。

検索フォームの配置場所に関しても自由が効きます。

またサイズに関しても、大きくしたり小さくしたり、各サイトに合ったサイズに調整が可能です。

このように、Elementorを使うことで、Wordpress単体では難しい、検索フォームのカスタムデザインが可能となるのです。

以下Elementorの検索フォームを使ったやり方を簡単に説明します。

公式ページに1分程度の解説動画も出ているので参考にしてみて下さい。

※Elementorは、日本語対応できていますし、操作方法自体難しくはないので、困ることはないかもしれませんが、何かあればコメント欄よりお願いします。

Elementorの編集ページを開き、レイアウトの構造を選択します。

左側のメニューから、Search Form（検索フォーム）を探して、表示したい場所にドラッグ&ドロップします。

左側のメニューバーから、検索フォームのスキン（デザイン）を選択します。

検索フォームの大きさや、形、フォント等も左側のメニューバーから修正していきます。

左側のメニューの一番下にある「公開」ボタンを選択して完了です。

以上です。

WordPressのカスタムCSSでは対応できないような複雑なデザインも、Elementorなら形にしやすいです。

操作も分かりやすく、他にも様々なウィジェットがあるので、一度試してみてはいかがでしょうか。