WordPressで検索フォームをカスタマイズ(FontAwesome)するときのメモ

あまり検索フォームをきちんと制作することがなく、たまにある案件できちんとカスタマイズする際に逐一調べたりするので、この際にメモ代わりに書いておきます。

「searchform.php」を作成する

まずは使用中テーマ内で、phpファイルを新規で作成する。(それか既にテーマ内にsearchform.phpが存在する場合はそのファイル内ソースを参照)

中身は、検索ボックスと、検索アイコンを設置する。

<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
  <input type="text" placeholder="検索！" name="s" class="searchfield" value="" />
  <button type="submit" class="searchico"><i class="fas fa-search"></i></button>
</form>

検索アイコン箇所は、FontAwesome 5を使用する。

CSSは適宜直す

.searchform {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}
.searchfield {
	width: 260px;
	background-color: #fff;
	border-radius: 17px;
	font-size: 14px;
	padding: 10px 20px;
	line-height: 1.1;
	margin-right: 10px;
}
.searchico {
	font-size: 24px;
	line-height: 1;
	transition: 0.5s ease;
}
@media screen and (min-width: 768px) {
	.searchico:hover {
		color: #ece195;
	}
}

検索ボックスを設置したい箇所に、下記を貼る

<?php get_search_form(); ?>

検索結果画面や絞り込み検索についても今後書きます。