【WordPress】検索フォームをカスタマイズ

eyecatch-customize-searchform

どうも、(@nekonotesou)です。

カスタマイズ後は、こんな感じの検索ボックスになります。

customize-searchform

検索ボタンは、アイコンフォントのFont Awesomeを使用しています。

header.phpのhead要素に、以下のコードを追加してください。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

 

スポンサーリンク

searchform.phpの編集

searchform.phpを、以下のコードに置き換える。

<form method="get" class="searchform"
	action="<?php echo esc_url( home_url('/') ); ?>">
	<input type="search" placeholder="キーワード検索" name="s" class="searchfield" value="" />
	<input type="submit" value="&#xf002;" alt="検索" title="検索" class="searchsubmit">
</form>

searchform.phpがない場合は、新しく作成してください。

検索フォーム内に表示されている文字の変更は、「キーワード検索」の部分を、好きな文字にすれば変更できます。

 

style.cssの編集

style.cssに以下のコードを追加する。

/* search */
.searchfield { 
	padding: 5px;
	margin-top: 10px;
	font-size: 14px;
	width: 240px;
}
.searchsubmit { 
	width: 35px;
	height: 30px;
	padding: 0;
	font-family: FontAwesome;
	font-size: 20px;	
	border: none;
	background: transparent;
	cursor: pointer;
}

 

検索フォームを表示する場所を変更するには?

以下のコードを、表示させたい場所に記述すればOKです。

<?php get_search_form(); //検索フォーム表示  ?>

 

さいごに

スポンサーリンク

プロフィール

iMacと猫が好きな完全インドア派。

コメントを残す