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属性を追加したりして、デザインしやすいように書き換えます。

searchform.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タグ内で有効化する必要があります。

WordPressでFontAwesomeのWebフォントを自由に利用する方法

サイトに反映させると上の画像のように検索フォームに反映されます。『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テーマ内に自由に設置して使用しましょう。

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