ウェジェット検索フォームのカスタマイズ

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“」は画像がある場所。画像はどこのフォルダーにおいても大丈夫だが、相対パスでの記述だと表示されないことがあるので、念のために絶対パスで記述するべし。

数ヵ月後エラーがでてしまった・・・に、つづく