ウェジェット 検索フォームのカスタマイズ
2013年5月30日
Categories | ブログ（WordPress)
サイドバー等に設置する検索フォーム（検索ボックス）をカスタマイズしました。
ワードプレスの検索フォームをカスタムしたい方の為に
分かりやすくレクチャーしますね。
当方は設置する場所をヘッダー内にしましたが、ウェジェットでサイドバーに
表示させたい場合は、これからの作業は必要ありません。
・ヘッダー内に検索フォームを表示させるには
テーマフォルダー内の「header.php」を開き、表示させたいところに
<?php get_search_form(); ?>
を記述します。ただそれだけです。そうするとデフォルトのボックスが現れます。
表示位置はdiv等で囲み、その指定は「style.css」に書き込みましょう。
当方仕様は右側に検索ボックスを表示でこうです。
style.css には
#info { float:right;
line-height:33px;
margin-right:24px;
}
header.php には
<h2>HCZ BLOG</h2> <div id="info"><?php get_search_form(); ?></div>
と記述しました。
これからが本題です。
・検索フォームをカスタム
いじるファイルは2つ。
style.css：テーマのフォルダー内に格納されている。
general-template.php：wp_includesフォルダー内に格納。
style.css に追記する内容
#searchform label {display:none}
#s{/* 検索文字列入力欄 */
width:160px;
height:14px;
}
#searchsubmit{/* 検索ボタン */
position: relative;
top: 6px;
left: -26px;
height:20px;
}
解説：「#searchform label {display:none}」は、「検索:」文字を表示させない指定。#searchsubmit{/* 検索ボタン */ のposition: relative; は、検索文字列入力欄の上にボタンを表示させる指定。ボタン表示位置はtop・leftで好み位置に調整してください。
general-template.php １６2行目の内容を変更
変更前
<div><label class="screen-reader-text" for="s">' . __('Search for:') . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" /><
<input type="submit" id="searchsubmit" value="'. esc_attr__('Search') .'" />
</div>
変更後
<div><label for="s">' . __('Search for:') . '</label>
<input type="text" value="' . get_search_query() . '" name="s" id="s" placeholder="Search" />
<input type="image" src="https://www.hcz.jp/blog/wp-includes/images/btn.gif" id="searchsubmit" value="Search" />
</div>
解説：「placeholder=”Search”」は、検索文字列入力欄に「Search」と表示させる。「input type=”image”」は検索ボタンを画像（虫眼鏡）に置き換える指定で、「src=”https://www.hcz.jp/blog/wp-includes/images/btn.gif“」は画像がある場所。画像はどこのフォルダーにおいても大丈夫だが、相対パスでの記述だと表示されないことがあるので、念のために絶対パスで記述するべし。
