WEBフォントで画像いらずの検索フォームを作ってみた
Font Awesomeをちょっといじっただけで「Awesome!」気分になってしまった僕です。こんにちは。
早速ですが、実践編としてまず試してみたものが検索フォームでした。
こういうのを作りたいんだよ、シンプルだしsubmitボタンデザインとか考えなくていいしね（後者が理由の大半）。
wordpressに導入する場合、searchform.phpかfunction.phpに書き込む2通りの方法がありますね。
当ブログの場合はsearchform.phpに書き込んでいるのでまずはそのソースから
■searchform.php
<form method="get" id="searchform" action="<?php echo home_url('/'); ?>">
<input type="text" placeholder=" SEARCH" value="<?php the_search_query(); ?>" name="s" id="s" class="fa fa-search">
</form>
function.php用も
■function.php
function my_search_form( $form ) {
$form = '<form role="search" method="get" id="searchform" action="'.home_url( '/' ).'" >
<input type="text" placeholder=" SEARCH" value="' . get_search_query() . '" name="s" id="s" class="fa fa-search">
</form>';
return $form;
}
add_filter( 'get_search_form', 'my_search_form' );
実は私がこの時点でハマったのが、get_search_query()の記述部分。
きちんとphpを理解している人ならまずつまづきようがないんですが、初めfunction.phpのソースをそのままsearchform.phpに貼付けてたんですよ。
そしたらフォーム内に「SEARCH」ではなく「.get_search_query().」のテキストがww
ここでピンと来た方は「こいつアホだww」と失笑しながらこの顛末を引き続きお楽しみくださいw ピンと来なくても引き続き閲覧いただければ・・・（結局見てほしいw）。。
まあ単にphpタグで<?php と書くべきところを.で書いてしまったからなんですが・・・そりゃ認識しないよね（気づかなかったくせに！）
そして当ブログ用検索フォームのcssを一応さらしておきます。
searchform.phpでもfunction.phpでもどちらの場合でも使えます。
■css
#searchform input[type="text"]{
width:94%;
padding:2%;
color:#333;
font-size:80%;
line-height:1.4;
margin:3% auto;
border:1px solid #CFC584;
background-color: #F4F2E5;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-o-border-radius:6px;
-ms-border-radius:6px;
border-radius:6px;
behavior: url(/wordpress/wp-content/themes/hoge/js/PIE.htc);
}
#searchform input[type="text"]:focus {
outline: 0;
}
※behaviorの行はPIEを使っているので、PIE.htcがアップされていないと効果ありません（まあIE対策ですが）
この後からcssのみでwebフォントを表示させるワザ等あれこれ試行錯誤しますので、また改めて書こうと思います。
引き続き、冷やかし程度にでもご覧いただければ・・・w