WordPressメモ-検索ボックスを変更してみる-
WordPressでデフォルトで設定されている検索フォームを使っても良いのですが、やはりちょっと変えて見たいというのもあると思います。ちょっとカスタマイズする方法を共有させていただきます。
HTMLコード
デフォルトのコードは以下になります。
[php]
<?php get_search_form(); ?>
[/php]
これだけです。これはWordPressのデフォルトのコードですが、オリジナルのに変更してみたいと思います。コードを以下にします。
[html]
<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 -->
[/html]
WordPressではデフォルトでname=sが設定されているので同じように設定します。次にCSSを設定します。
[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の設定をして装飾します。CSSでサイズを決めたり枠線の太さ、色などを決めています。コードを記入するのはsidebar.phpになります。
個人支援・寄付について
サイトラボでは個人支援・寄付を受けております。ご協力いただける方はお願いいたします。当サイトではビットコインで受け付けております。
- ビットコイン:3LHnADwZwUbic2L45EnVJEykiG6KfbqrwS