Rif.3rd

Wordpress テーマのデフォルトサーチボックスと検索結果ページをGoogle Custom Searchに変える場合

Google Custom Search Engine - Site search and more
Create a Custom Search Engine ボタンをクリック

Basic information

• サーチエンジン名:
• サーチエンジン説明:
• キーワード:
• 言語設定: 日本

What do you want to search?

• Only sites I select.　にチェック

Select some sites

• Sites to search:　Your domain.com/*

Select an edition

• Standard edition - Free, ads are required on results pages. にチェック
• I have read and agree to the 利用規約. にチェック
• Next ボタンをクリック

Congratulations!

• Send confirmation email to Your Email add
• Finish ボタンをクリック

Search engines I’ve created

• control panel リンクをクリック

Control panel: Your Search Engine

• Code をクリック

Search results hosting options

• Host results on your website: にチェック
• iframe – requires two pages: one for the search box and another for the results にチェック

Specify search results details

• http://Your dmain.com/index.php?

Search box code

• Search box code: yourblog/wp-content/themes/yourtemplate/searchform.phpのsearch formのコードをSearch box codeに以下の２行を足して書き換える

<input type="hidden" name="s" value="Search" />
<input type="hidden" name="submit" value="" />

<form action="http://Your dmain.com/index.php?" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="002196912597702158287:j0tw3idxz5o" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="検索" />
    <input type="hidden" name="s" value="Search" />
    <input type="hidden" name="submit" value="" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=ja"></script>

Search results code

• Search results code: yourblog/wp-content/themes/yourtemplate/search.phpを書き換える

<div id="cse-search-results"></div>
<script type="text/javascript">
  var googleSearchIframeName = "cse-search-results";
  var googleSearchFormName = "cse-search-box";
  var googleSearchFrameWidth = 600;
  var googleSearchDomain = "www.google.com";
  var googleSearchPath = "/cse";
</script>
<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

検索結果ページを新規作成する場合

• 新規に検索結果ページを作り、パーマリンクをコピーする
• Specify search results detailsで指定するURLに貼り付ける
• Search box codeをそのサーチボックスを表示したい場所へそのままコピペする
• Search results codeを新規作成した検索結果ページにコピペする

DEMO: Rif.jQ

右サイドバー上部に通常のサーチボックス、下部にGoogle Custom Search boxをとりあえず置いています。

you may want to subscribe to my RSS feed. Thanks for visiting!

関連する投稿

• Spotlight style,MacSearch (0)