WordPressの検索フォームをカスタマイズする

わたしはWordPressでこのブログを立ち上げるとともに、Webを本格的に勉強しはじめました。当時はフォームが全然分からなくて、検索フォームも「わかんないけどとりあえず動いたからこれで！」って感じでしたw やっと分かるようになって整理したのでまとめてみます。

デフォルトの形を見てみる

WordPressでは検索フォームを出力してくれるテンプレートタグが存在していて、

<?php get_search_form(); ?>

このように書けば、テーマに searchform.php がある場合はそちらを、そうでない場合はこのように出力されます。（このブログでは searchform.php は作っていません。）

デフォルト

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

既に id や class がたくさんついていますね。最初はこのあたりが全ッ然わからなくて、いろんなブログのソースを拝見して、見よう見まねでツギハギ状態でした…。。

このコードを元にCSSを書いてカスタマイズしていましたが、せっかくの自作テーマなんだし、もっとシンプルな記述にしても良さそうだな、と思ってやってみました。

カスタム

<form method="get" action="<?php echo home_url('/'); ?>">
	<div>
		<label>検索:</label>
		<input type="text" name="s" />
		<input type="submit" value="検索" />
	</div>
</form>

必要なのは、GET変数で http://xxx.com/?s=検索ワード という形にすること。

1行目のform method="get"と、4行目のinput type="text"の名前をname="s"としておきます。

検索フォームは、ブログのホームページに GET を投げることに注意してください。入力テキストフィールドの名前は s にして、上述の例のように label を必ず含めてください。

（出典：関数リファレンス/get search form）

Codexにこのように書いてありましたのでラベルも入れておきます。また、

form要素には、インライン要素であるinput要素を直接記述できません。必ずdiv要素などのブロック要素で内包するようにしましょう。

（出典：入力部品を定義するinput要素＞フォーム）

そうだったのか…！今まで結構直接書いた経験が(;ﾟдﾟ)

上記の記述で、このような形になります。（このブログで記述したキャプチャです。テキストボックスやsubmitボタンにはデフォルトのCSSが適用されています。）

使用例

現在このブログで使っている検索フォームです。テキストボックスとsubmitボタンの両方を画像で置き換えています。ヘッダーとフッターの2箇所に使用しています。

<form method="get" class="searchform" action="<?php echo home_url('/'); ?>">
	<div>
		<label>検索:</label>
		<input type="text" name="s" />
		<input type="submit" value="" />
	</div>
</form>

先述のコードをベースに、formにクラスを付け、submitボタンの中身を空にしています。（空にしないと画像の上に文字が出てしまうので）

.searchform label{display: none;}
.searchform input[type="text"]{
	float: left;
	width: 100px;
	height: 26px;
	padding: 0 30px 0 10px;
	background: url(images/searchtext.png) no-repeat;
	border: none; /* デフォルトCSSリセット */
	}
.searchform input[type="submit"]{
	float: left;
	width: 19px;
	height: 22px;
	margin: 1px 0 0 -28px;
	padding: 0;
	background: url(images/searchicon.png) no-repeat;
	border: none; /* デフォルトCSSリセット */
	box-shadow: none; /* デフォルトCSSリセット */
	}
.searchform input[type="submit"]:hover{
	filter: alpha(opacity=80); /* マウスホバーでちょっと薄くする */
	-moz-opacity: 0.80;
	opacity: 0.80;
	}

CSSはこんな感じ。それぞれ画像の大きさに合わせて縦横の幅を指定して、ボタン画像の左マージンをマイナスにすることで、重ねています。元々のformのCSSをリセットするための記述がありますが、ここはテーマによって違うと思います。

以上です！どこか変なところがありましたらご指摘いただけたら嬉しいですー！