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

WordPressの検索フォームは、テーマ側で用意しなくてもデフォルトが表示されるようになっている。もちろんカスタマイズも可能だ。

検索フォームのテンプレート

もし検索フォームのカスタマイズが必要であれば、テーマにsearchform.phpというテンプレートを用意すれば、こちらが優先して表示される。

例として、

ここではinputにplaceholderを設定し、submitにアイコンフォントを表示しようとしている。
このなかでformのaction="">と、inputのname="s"を合わせておけば、あとは好きなクラスを付けたり、チェックボックスやラジオボタンを追加することもできる。

アイコンフォントの注意

このようにアイコンフォントを使った場合、テーマの信頼性を確認するためにTheme-Checkを行うと以下のように注意される。

「テンプレートでヘンな文字コードが発見されました」
submitのvalue=”のことを言われている。
が問題ない。このまま公式ディレクトリに登録してもOKだった。

iPhoneでsubmitボタンが丸くなる問題

さて、せかっく用意した検索フォームに自分なりのcssを当てたい。
ここで気になるのがiPhone問題だ。iPhoneのSafariで見ると、submitボタンが丸くなっているではないか？そうした覚えもないのに、なぜか自動的にこうなってしまうのだ。

この場合は、submitボタンに対して以下のスタイルを当てることで解決する。

• border-radius: 0;
  ボタンの丸みを0にする。
  すぐに思いついたものの、これだけでは足りなかった。
• -webkit-appearance: button;
  ボタンに勝手に当てられたスタイルをいったん無効にする。
  この組み合わせによって、submitボタンはただの四角になる。ここから好きなスタイルを当てればよい。

以下の例では、submiteボタンにアイコンフォント(FontAwesome)を指定している。すると、さきほど「ヘンな文字コード」と注意された箇所に虫眼鏡が表示されるのだ。