WordPressの検索フォームをカスタマイズする
わたしはWordPressでこのブログを立ち上げるとともに、Webを本格的に勉強しはじめました。当時はフォームが全然分からなくて、検索フォームも「わかんないけどとりあえず動いたからこれで！」って感じでしたw やっと分かるようになって整理したのでまとめてみます。
デフォルトの形を見てみる
WordPressでは検索フォームを出力してくれるテンプレートタグが存在していて、
|
1 |
<?php get_search_form(); ?> |
このように書けば、テーマに searchform.php がある場合はそちらを、そうでない場合はこのように出力されます。（このブログでは searchform.php は作っていません。）
デフォルト
|
1 2 3 4 5 6 7 |
<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を書いてカスタマイズしていましたが、せっかくの自作テーマなんだし、もっとシンプルな記述にしても良さそうだな、と思ってやってみました。
カスタム
|
1 2 3 4 5 6 7 |
<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 を必ず含めてください。
Codexにこのように書いてありましたのでラベルも入れておきます。また、
form要素には、インライン要素であるinput要素を直接記述できません。必ずdiv要素などのブロック要素で内包するようにしましょう。
そうだったのか…！今まで結構直接書いた経験が(;ﾟдﾟ)
上記の記述で、このような形になります。（このブログで記述したキャプチャです。テキストボックスやsubmitボタンにはデフォルトのCSSが適用されています。）
使用例
現在このブログで使っている検索フォームです。テキストボックスとsubmitボタンの両方を画像で置き換えています。ヘッダーとフッターの2箇所に使用しています。
|
1 2 3 4 5 6 7 |
<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ボタンの中身を空にしています。（空にしないと画像の上に文字が出てしまうので）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.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をリセットするための記述がありますが、ここはテーマによって違うと思います。
以上です！どこか変なところがありましたらご指摘いただけたら嬉しいですー！
1件のピンバック
[…] https://ateitexe.com/wordpress-searchform-customize/ […]
コメントは承認制ですので、反映までしばらくお待ち下さい。（稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。）