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

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

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

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

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

 

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

 

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

 

 

Elementor検索フォームの特徴

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

 

1.3つのデザインの中から選択可能

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

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

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

 

 

2.検索フォームの形、フォントも自由自在

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

 

 

3.配置や大きさも調整可能

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

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

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

 

 

検索フォームをデザインする方法

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

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

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

 

1.レイアウトの選択とウィジェットの表示

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

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

 

 

2.デザイン、サイズ、フォントを調整

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

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

 

 

3.デザインを公開

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

※403エラーが出た場合:Elementorのサーバーエラー403の解決方法

 

以上です。

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

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

Elementorのウィジェット一覧を見る

 

 

 

●最近アップした動画!!

ElementorというWebサイトビルダーのメリットとデメリットをまとめてみました。参考にしてみて下さい!

 

 

 

●人気記事

WordPressをGCP環境で実装して使ってみた

 

社会人向けWebデザイン講座8選 メリットやデメリット

 

在宅ワークを快適に!おすすめアイテム4つ紹介

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です