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

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

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

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

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

例として、
searchform.php
[PHP]

[/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)を指定している。すると、さきほど「ヘンな文字コード」と注意された箇所に虫眼鏡が表示されるのだ。

style.css
[CSS]
#searchform {
width: 100%;
height: 30px;
position: relative; }
#searchform label {
display: block;
font-size: 0;
overflow: hidden;
text-indent: -9999px; }
#searchform #s {
width: 80%;
padding: 5px 10px 5px 5px;
height: 30px;
line-height: 1;
border: solid 1px #cccccc;
border-radius: 0; }
#searchform #searchsubmit {
position: absolute;
top: 0;
right: 1px;
border: 0 none;
cursor: pointer;
width: 20%;
height: 30px;
margin: 0;
background: #cccccc;
color: #FFF;
border-radius: 0;
-webkit-appearance: button;
content: “”;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
padding-right: 0.2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.2em; }

[/CSS]

コメントを残す

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