WordPressでデフォルトで設定されている検索フォームを使っても良いのですが、やはりちょっと変えて見たいというのもあると思います。ちょっとカスタマイズする方法を共有させていただきます。

HTMLコード

デフォルトのコードは以下になります。

<?php get_search_form(); ?>

これだけです。これはWordPressのデフォルトのコードですが、オリジナルのに変更してみたいと思います。コードを以下にします。

<div id="search_box"><!-- search_box_start -->
<form action="<?php bloginfo('url'); ?>/" method="get">
<input type="text" name="s" class="search_text" placeholder="キーワードを入力" />
<input type="image" src="<?php bloginfo('template_directory'); ?>/images/common/icon_search.jpg" id="btn_search" value="検索" />
</form>
</div><!-- search_box_end -->

WordPressではデフォルトでname=sが設定されているので同じように設定します。次にCSSを設定します。

.search_text{
width:276px;
padding:0 10px;
height:40px;
font-size:10pt;
border-style:solid;
border-width:1px;
border-color:#cccccc;
background-color:#f2f2f2;
float:left;
margin:0;
}

#btn_search{
float:right;
}

CSSの設定をして装飾します。CSSでサイズを決めたり枠線の太さ、色などを決めています。コードを記入するのはsidebar.phpになります。