検索フォームをオリジナルで作る方法を解説します。
WordPressでそのまま使えるように「id」や「name」なども予め記述しています。
◆まずはデモページをご覧ください。（検索は実行しません。）
デモページを見る
HTMLでは、通常の「form」とテキストを入力する「input」、あとは検索するボタンとなります。
WordPressでは、下記を「searchform.php」に記述します。
PHP・HTML
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<input type="text" name="s" id="s" class="search_text" placeholder="キーワードを入力">
<button type="submit" class="search_button">検索する</button>
</form>
</div>
CSSでは、入力ボックスと検索ボタンの装飾となりますが、特に左向きの三角の記述がポイントです。
左向きの三角は「.search_button:before」の部分になりますので、大きさを変えるなどの場合は数値を変更してみてください。
最初の「.search_wrap」の数値はサイトに応じて調整してください。
CSS
.search_wrap {
position:relative;
width: 30%;
margin: 100px auto 0;
}
.search_text {
width: 100%;
height: 40px;
font-size: 1rem;
letter-spacing: 1.5px;
padding-left: 10px;
border: 1px solid #2876b2;
border-radius: 3px 0 0 3px;
}
.search_button {
position:absolute;
top:0;
right:0;
width: 100px;
height: 40px;
color: #fff;
background: #2876b2;
border-radius: 0 3px 3px 0;
cursor: pointer;
}
.search_button:hover,
.search_button:active,
.search_button:focus {
background: #3f92d2;
}
.search_button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #2876b2 transparent;
top: 12px;
left: -6px;
}
.search_button:hover:before,
.search_button:focus:before,
.search_button:active:before {
border-right-color: #3f92d2;
}
input::placeholder { color: #666; }
input:focus { background: #f3f8ff; }
検索フォームもサイトデザインに合わせて、変えてみると良いかと思います。