カイカブログ

フリーランスデザイナー カイカデザインのブログ
デザイン、html、wordpress等についてほとんど役に立たない単なる感想レベルのたわごとを綴っています

WEBフォントで画像いらずの検索フォームを作ってみた

Font Awesomeをちょっといじっただけで「Awesome!」気分になってしまった僕です。こんにちは。

早速ですが、実践編としてまず試してみたものが検索フォームでした。
webfont-search
こういうのを作りたいんだよ、シンプルだし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="&#xF002; 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="&#xF002; 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

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です