2014
10
21
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要素>フォーム

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

141021-1

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

使用例

141021-2

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

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

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

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

「検索結果:○件」のように表示する方法をこちらの記事の「アーカイブページのカスタマイズ」という部分で書いています。
  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/10/21


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top