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

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

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

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

検索フォーム
検索フォーム

例として、

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

アイコンフォントの注意

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

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

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

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

iPhoneのSafari
mobile safariで見ると…

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

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

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

2件のコメント

コメントを残す

メールアドレスが公開されることはありません。