STINGER5の検索をGoogleカスタム検索に変更する

　STINGER5のカスタマイズもだいぶ落ち着いてきたところで、今回は検索部分をGoogleカスタム検索に変更してみました。

　Wordpressにも検索機能は実装されていますが、Googleカスタム検索の方がより精度の高い検索結果をユーザの方に提供できるので、利便性が向上するのではないかと思います。

　まず、テンプレートのsearchform.phpを修正します。

<div id="search">
<form action="http://www.google.co.jp/cse" id="cse-search-box" id="searchform">
  <div>
    <label class="hidden" for="s">
      <?php _e('', 'kubrick'); ?>
    </label>
    <input type="hidden" name="cx" value="partner-pub-****************:**********" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="10" id="s" />
    <input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search.png" alt="検索" id="searchsubmit"  value="<?php _e('Search', 'kubrick'); ?>" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang=ja"></script>
</div>

　Googleカスタム検索のフォーム作成で作った検索フォームを、STINGER5の検索フォームに合わせて上記のようにカスタマイズします。このフォームを利用する場合には、”********”の部分をフォーム作成で取得したコードに置き換えてください。

　そして出来上がった結果がこちら。

　ボタンが少しずれて枠線に被ってしまっているのと、ボタンと枠線の色が異なっているのが気になるところです。こうして見てみると、入力フォームの高さと画像の高さがあってないようにみえます。

　今度はstyle.cssを修正します。

#s {
	height: 33px;
	color: #333;
	font-size: 14px;
	border-radius: 0;
	border: 1px solid #7E9DB9 !important;
	background-color: #ffffff;
	z-index: 10;
	padding: 5px 65px 10px 5px;
	width: 100%;
	box-sizing: border-box;
}
#searchsubmit {
	border-radius: 0;
	background-color: #7E9DB9;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 50px;
	height: 32px;
	z-index: 20;
}

　枠線の色はGoogleの設定だと思うので、その色に合わせてボタンの背景色を修正します。また、ipadで確認したときに枠線が表示されていなかったので、#sに枠線の描画を追加しています。入力フォームは白抜きになりますが、色を付けると「Googleカスタム検索」が白抜きで表示されてしまうので、!important属性は付けていません。

　また、入力フォームの背景色は基本的に反映されないのですが、検索結果ページからブラウザの戻るボタンで戻ってくると色が反映されてたりします。枠線と同系色にするか、白色などに設定するといいと思います。

　そして、出来上がった結果がこちら。

　違和感も無くなった感じがしますがどうでしょうか。ボタンの背景色に!important属性を付ければボタンの色を変えることができるので、自分のサイトのカラーに合わせることも可能です。検索結果をiframeで出力したりすると、サイトとの統一感が出てさらにいいかもしれません。

　よろしければ参考にしてみてください。