Google custom searchを実装してみました。

wordpress純正のサーチエンジンのアルゴリズムは単純なのでCSP120という型番を検索しようとした場合、csp-120のようにハイフンがあったり、csp-120のように全角が混ざったりすると検索できません。そこで、以前のサイトで使用していたGoogleカスタム検索(CSE)を導入することにしました。しかーし、簡単には行きませんでした。テキストウィジェットにコードを貼り付けただけではボタンがテキストフィールドの下になってしまい格好よくありません。CSSが原因だろうとは推測できてもどこをいじればいいのやら。
スタイルシートの上書きなど試行錯誤の結果、デフォルトの検索フォームにCSEで送信する内容を埋め込むことでうまく行きました。
ホームページの検索窓がGoogleのエンジンで、その他のページは標準のままです。
どちらが使いやすいでしょうか?

追記:
英語モードでも検索結果が日本語になってしまうので標準に戻しました。

せっかくなのでやり方を書いておきます。
responsive(Thanks Emil)の標準の検索窓をsearchform.phpから抜き出してみると

<form method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e('search here &hellip;', 'responsive'); ?>" />
<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e('Go', 'responsive'); ?>"  />
</form>

このフォーマットにgoogleカスタム検索に必要な情報を埋め込みます。以下の内容をExecutable PHP widgetでサイドバーに設置します。

<form action="http://検索結果を表示するページ" id="searchform">
    <input type="hidden" name="cx" value="カスタム検索エンジンID" />
    <input type="hidden" name="cof" value="FORID:11" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" class="field" name="q" id="s" placeholder="<?php esc_attr_e('search here &hellip;', 'responsive'); ?>" />
    <input type="submit" class="submit" name="sa" id="searchsubmit" value="<?php esc_attr_e('Go', 'responsive'); ?>" />
</form>

検索を実行すると以下がgoogleへ送信され、結果が指定したページに表示されます。

検索結果を表示するページ?cx=カスタム検索エンジンID&cof=FORID%3A11&ie=UTF-8&q=123&sa=Go
Tagged with:
products
  • 新製品
総合カタログ
価格はpdfカタログに記載されています。なお、pdfファイルの内容は随時更新されますので印刷物よりも優先します。
お問い合わせ
drill-down by tags