WordPress標準の検索フォーム「<?php get_search_form(); ?>」は少しあれなので、CSSでカスタマイズする方法。
まずは、WordPressのテンプレート内で<?php get_search_form(); ?>を表示する。
標準の表示がこれ。
カスタマイズしてみる
CSSを下記に設定
#s { width:200px; //検索入力欄の幅 height:25px; //検索入力欄の高さ margin-bottom: 30px; border-radius: 3px; //角丸効果 -moz-border-radius: 3px; //角丸効果 -webkit-border-radius: 3px; //角丸効果 box-shadow: 0px 0px 5px #aaa; //ドロップシャドウ border:none; behavior: url(/PIE.htc); //角丸IE対策 padding:5px; } #searchsubmit { margin-left: -38px; //虫眼鏡アイコンを中に入れる box-shadow: none; background-image: url(images/search_icon.png); //虫眼鏡アイコン 25pxの正方形で用意 background-repeat: no-repeat; width: 30px; text-indent: -60px; //文字を隠す background-color: #FFFFFF; background-position: 0px 4px; cursor: pointer; } .screen-reader-text { display: none; //先頭の「検索:」を非表示 }
IE対策用の「PIE.htc」は下記からダウンロードして設置する。
Download PIE – CSS3 PIE: CSS3 decorations for IE
※CSSファイルからの相対パスで指定。
※IE対策が必要なければ設定しなくても可。
CSS設定後の検索フォーム
シャドウの色やボーダーの有無などいろいろ変更すれば、自分好みのフォームが出来ると思います。WordPress標準の検索フォームの見栄えをどうにかしたいという人は試してみてください!