wordpress純正のサーチエンジンのアルゴリズムは単純なのでCSP120という型番を検索しようとした場合、csp-120のようにハイフンがあったり、csp-１２０のように全角が混ざったりすると検索できません。そこで、以前のサイトで使用していたGoogleカスタム検索（CSE)を導入することにしました。しかーし、簡単には行きませんでした。テキストウィジェットにコードを貼り付けただけではボタンがテキストフィールドの下になってしまい格好よくありません。CSSが原因だろうとは推測できてもどこをいじればいいのやら。
スタイルシートの上書きなど試行錯誤の結果、デフォルトの検索フォームにCSEで送信する内容を埋め込むことでうまく行きました。
ホームページの検索窓がGoogleのエンジンで、その他のページは標準のままです。
どちらが使いやすいでしょうか?
追記：
英語モードでも検索結果が日本語になってしまうので標準に戻しました。
せっかくなのでやり方を書いておきます。
responsive(Thanks Emil)の標準の検索窓をsearchform.phpから抜き出してみると
1 2 3 4 | <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 …', 'responsive'); ?>" /><input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php esc_attr_e('Go', 'responsive'); ?>" /></form> |
このフォーマットにgoogleカスタム検索に必要な情報を埋め込みます。以下の内容をExecutable PHP widgetでサイドバーに設置します。
1 2 3 4 5 6 7 | <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 …', 'responsive'); ?>" /> <input type="submit" class="submit" name="sa" id="searchsubmit" value="<?php esc_attr_e('Go', 'responsive'); ?>" /></form> |
検索を実行すると以下がgoogleへ送信され、結果が指定したページに表示されます。
1 | <a href="http://検索結果を表示するページ?cx=カスタム検索エンジンID&cof=FORID%3A11&ie=UTF-8&q=123&sa=Go" class="autohyperlink" title="http://検索結果を表示するページ?cx=カスタム検索エンジンID&cof=FORID%3A11&ie=UTF-8&q=123&sa=Go" target="_blank">検索結果を表示するページ?cx=カスタム検索エンジンID&cof=FORID%3A11&ie=UTF-8&q=123&sa=Go</a> |
総合カタログ
お問い合わせ
