WordPress

WordPressで検索フォームをカスタマイズする方法

 

カスタマイズ後は、以下のような検索ボックスになります。

カスタマイズした検索フォームカスタマイズ後の検索フォーム。

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

虫眼鏡のアイコンは、アイコンフォントを使用しているので、使用しているテーマが対応していない方は、以下のコードをheader.phpに追加してください。

</head>の前に追加します。

header.php

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

searchform.phpを編集する

searchform.phpの内容を、以下のコードに置き換えます。

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>

検索フォーム内に表示する文字を変更する場合は、”キーワード検索”の部分を、任意の文字にしてください。

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

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

ABOUT ME
ねこもり
ねこもり
死ぬまで楽しく生きるがモットー。 元2ちゃんねる管理人で、現4chan管理人の、ひろゆきが好き。 尊敬する人は、絵を描ける人とピアノを弾ける人。嫌いなものはタバコ。 日本嫌煙党 千葉(引きこもり代表)
関連記事

COMMENT

メールアドレスが公開されることはありません。