検索窓のボタンが「検索」となっているところを、よくある虫眼鏡アイコンに変更しました。
最初、単純にアイコンイメージを張り付ければ良いと思ったのですが、カレンダーのカスタマイズの際に Webフォントについて調べたので、ここも Webフォントを使ってみました。
使った Webフォントは、All-in-One Event Calendar でも使われている、font-awesome
ダウンロードしてきた font-awesome のフォルダを適当なところにアップロードし、header.php に font-awesome.css の URL のリンクを追加すれば、次の1行でアイコンが表示されます。
| 1 | <i class="icon-search"></i> |
検索窓の変更は、searchform.php を追加してやれば良いのですが、よくある検索ボタンの見本は、
| 1 2 3 4 5 6 | <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Search" /> </div> </form> |
のような感じですが、Webフォントの挿入方法に悩みました。
結局、4行目を↓のように input → button にすることにより、実現しました。
| 1 2 3 4 5 6 | <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>"> <div><label class="screen-reader-text" for="s">Search for:</label> <input type="text" value="" name="s" id="s" /> <button type="submit" id="searchsubmit" value="Search"><i class="icon-search"></i></button> </div> </form> |