気ままにアクアリウム

*

25.デフォルト検索をGoogle検索に変更する。

      2014/06/05 5:24 pm    0

  • デフォルト検索をレスポンスが早く、あいまい検索が可能なGoogle検索に変更します。
  • ボタンデザインはデフォルト検索のものを残します。

デフォルト検索をGoogle検索に変更する方法

(1)Google検索コードを取得する。

①Googleアドセンスにログインする。

②サイト上部にあるメニューの「広告の設定」をクリックする。

③左側にあるメニューの「検索」をクリックする。

④更に「カスタム検索エンジン」をクリックする。

⑤「+新しいカスタム検索エンジン」をクリックする。

⑥必須情報や自分の好みの設定をする。

⑦「保存してコードを取得」をクリックする。

⑧コードをコピーする。(次ステップで使用します)

(2)seachform.phpを変更する。

①元のコードを全て削除、又はコメントアウトする。

②以下のコードを追記する。※「xxxxxxxxxxxxxxx:xxxxxxxxxx」には(1)で取得したコードを入れる。

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

(3)style.cssを変更する。

①以下の部分、一行のみ変更する。

/*-----------------------------
検索フォーム
-----------------------------*/

#container #wrap #wrap-in #search {
 padding-top: 20px;
 padding-bottom: 0px;
}
#s {
 width: 266px;
 height: 24px;
 border: none;
 color: #333;
 padding-top: 4px;
 padding-right: 10px;
 padding-bottom: 4px;
 padding-left: 10px;
 background-color: #CCC;
 font-size: 14px;
 border-radius: 0;
}
#searchsubmit {
 position: absolute;
 top: 0;
 _top: 1px;
 left: 286px;
 border-radius: 0;
}
*:first-child + html #searchsubmit {
 top: 1px;
}
#container #wrap #wrap-in #side #search #searchform {
 position: relative;
}

/*-----------------------------
検索フォーム
-----------------------------*/

#container #wrap #wrap-in #search {
 padding-top: 20px;
 padding-bottom: 0px;
}
#s {
 width: 266px;
 height: 24px;
 border: none;
 color: #333;
 padding-top: 4px;
 padding-right: 10px;
 padding-bottom: 4px;
 padding-left: 10px;
 background-color: #CCC;
 font-size: 14px;
 border-radius: 0;
}
#searchsubmit {
 position: absolute;
 top: 0;
 _top: 1px;
 left: 286px;
 border-radius: 0;
}
*:first-child + html #searchsubmit {
 top: 1px;
}
 #container #wrap #wrap-in #side #search #cse-search-box {
 position: relative;
}

結果、以下のようになります。
seachform

②体裁を整えるため、更に以下のような変更をします。

/*-----------------------------
検索フォーム
-----------------------------*/

#container #wrap #wrap-in #search {
  padding-top: 20px;
  padding-bottom: 0px;
}
#s {
  width: 280px;
  height: 26px;
  border: none;
  color: #333;
  padding-top: 4px;
  padding-right: 10px;
  padding-bottom: 4px;
  padding-left: 10px;
  background-color: #CCC;
  font-size: 14px;
  border-radius: 0;
}
#searchsubmit {
  position: absolute;
  top: 0px;
  _top: 1px;
  left: 286px;
  border-radius: 0;
}
*:first-child + html #searchsubmit {
  top: 1px;
}
#container #wrap #wrap-in #side #search #cse-search-box {
  position: relative;
}

結果、以下のようになります。

seachform2


 

以上です!

 - Stinger3 , ,

Shares