1. TOP
  2. wordpressテーマカスタマイズ
  3. WordPress標準の検索フォームを自分の好きなデザインに変更する

WordPress標準の検索フォームを自分の好きなデザインに変更する

WordPressには検索フォームが標準で搭載されていますが、あまり良いデザインとは言えません。自分が作成するテーマのデザインに合わせて、検索フォームのデザインも変更してみましょう。

今回は、WordPressに標準で搭載されている検索フォームを自由にカスタマイズする方法についてご紹介します。

searchform.phpを作成する

WordPressに標準搭載の検索フォームのデザインを変更するためには、テーマファイル内に『searchform.php』というWordPressテンプレートを新しく作成する必要があります。

『searchform.php』というテンプレートを作成することで、検索フォームを呼び出す『<?php get_search_form(); ?>』や検索ウィジェットは『searchform.php』テンプレートを参照するようになります。

『searchform.php』の中身はWordPressのデフォルトの検索フォームのコード(wordpress内のファイルwp-includesのgeneral-template.phpの中に記述)をカスタマイズしていきます。

WordPressの検索フォームのデフォルトコード

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<div><label class="screen-reader-text" for="s">Search for:</label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>

上記のデフォルトコードの不要な部分を削除したりclass属性を追加したりして、デザインしやすいように書き換えます。

serchforem.phpに記述

<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
<input type="text" placeholder="キーワード検索!!" name="s" class="searchfield" value="" />
<input type="submit" value="" alt="検索" title="検索" class="searchsubmit">
</form>

今回は上記のようにカスタマイズしています。

2行目の『placeholder=””』で検索ボックスの中に表示する文字を指定し、『input type=”submit”』内の『value=””』でボタンをFontAwesomeのアイコンに変更しています。
※FontAwesomeのアイコンを使用する場合は、headタグ内で有効化する必要があります。

サイトに反映させると上の画像のように検索フォームに反映されます。『searchform.php』の記述が完了したら、検索フォームのデザインを変更していきましょう。

検索フォームのデザインを編集する

検索フォームも、レスポンシブに対応したデザインで作成していきます。

今回は、検索ボタンが中にあるパターンと外にあるパターンの2パターンのデザインをサンプルとして記載しておきます。お好みに合わせてカスタマイズして使用してください。

検索ボタンが外にあるデザイン

style.cssに記述

.searchfield {
font-size: 14px;
width: 75%;
margin-top: 10px;
margin-right: 3px;
margin-left: 5px;
padding: 7px 5px;
border: 2px solid #ddd;
border-radius: 3px;
}
.searchsubmit {
font-family: FontAwesome;
font-size: 1.4em;
padding: 0;
cursor: pointer;
color: #255fac;
border: none;
background: transparent;
}
.searchsubmit:hover {
opacity: .6;
}

レイアウトはそのままの配置で、marginやpadding・背景色などを変更しています。

CSSを反映すると、上の画像のようなデザインで表示されます。

ボタンが中にあるデザイン

style.cssに記述

.searchform {
position: relative;
}
.searchfield {
font-size: 14px;
width: 90%;
margin: 3px;
padding: 10px;
border: solid 1px #bbb;
border-radius: 4px;
background-color: #efefef;
}
.searchsubmit {
font-family: FontAwesome;
font-size: 1.4em;
position: absolute;
top: 0;
right: 8%;
margin-top: 10px;
padding: 0;
cursor: pointer;
color: #6297f5;
border: none;
background: transparent;
}
.searchsubmit:hover {
opacity: .6;
}

ボタンを中に入れ込む場合は、searchformを『position: relative;』で基準位置とし、ボタンを『position: absolute;』で絶対位置で位置を調整します。

cssを反映すると、上の画像のようにボタンが中に入ったデザインが反映されます。デザインの反映まで完了したら、検索フォームの作成は完了です。

検索フォームは、検索ウィジェットや『<?php get_search_form(); ?>』でWordPressテーマ内に自由に設置して使用しましょう。

意外と忘れがちですが、検索フォームは意外とユーザーが利用することも多いので、この機会に自分の好きなデザインに変更してみてくださいね!