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

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

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

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

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

デフォルト

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

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

カスタム

必要なのは、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にクラスを付け、submitボタンの中身を空にしています。（空にしないと画像の上に文字が出てしまうので）

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

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