wordpressにCSE。iframe編

このサイト（wordpressで作ってる)に、google custom search engineを組み込んだ。

pluginもいろいろあるようだけど、一度scratchで入れてみたいと思って調べてみた。参考サイト

参考サイトが書かれた時点では、結果を自分のサイト内で表示するものとして、iframeを使うパターンと、oevrlay（現在は web element)を使うパターンが用意されている。（サイト外での表示、google上での結果表示のパターンもある。これで特に不便ということはないかもしれない）

今回は、まずiframeを使うパターンをやってみる。（参考サイトもその形）

googleでの設定、フォームの設置、検索結果ページの設置の三段階。

まず、google の機能を使うので、当然ながらgoogleに行く。設定をする。

１google での設定

最初に名前やらを入れる。

control panelで設定をする。

indexで、on-demand indexができるようなので、設定する

左側に、いろいろ設定項目がある。indexingとかの項目もあるけど、今度検討することにする。

Get Codeを選んで、貼り付けるコードを作る。

2.フォームを自分のサイトに貼り付け。

googleの設定画面で出来たコードを、

/テーマディレクトリ/forms/search.phpの該当コードと入れ替え。

 <div id="content">
   <!-- Google CSE Search Box Begins  -->
 <form action=" http://abc-analytics.com/gsearch" id="cse-search-box">
   <div>
     <input type="hidden" name="cx" value="009712234193368133902:ejtrmhlu9sk" />
     <input type="hidden" name="cof" value="FORID:10" />
     <input type="hidden" name="ie" value="UTF-8" />
     <input type="text" name="q" size="31" />
     <input type="submit" name="sa" value="検索" />
   </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=ja"></scri\
    pt>
 <!-- Google CSE Search Box Ends -->

３．検索結果表示ページを作る。

新規に、gsearchというページを作る。（これは、管理画面からぺージ作成画面に行き、通常の投稿のように、ＨＴＭＬを入れて作成。

<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>

結果は、こんな感じ。

(現在は、web elementsを利用した検索にしています。ページ上部にある検索窓を利用してください）

検索のＵＲＬは、http://abc-analytics.com/gsearch?cx=009712234193368133902:ejtrmhlu9sk&cof=FORID:10&ie=UTF-8&q=python&sa=検索

cxは、作ったカスタム検索のＩＤみたいなもの。cofが表示数で、qが検索ワード。最後のsa=検索の意味することはよく分かりません。

僕のサイトが重いせいか、wordpress組込の検索より、スピードも早い！（もちろん、googleにコンテンツがindexされているのが、前提になる）

問題は、検索結果表示が、コンテンツ表示幅の510pxを超えてしまっている事。ユーザーに易しくない。ページ表示の時は、widgetを表示しないようにしたい。（ちょっと手間取ったので、今回は省略）

google に sidebarにあるfriendfeedなどの表示コンテンツもindexされてしまっていたので、sidebar 部分にno-followを付けたいのだが、noindexはページ単位にしか適用されない。回避方法は、見つかっていない。組込みの検索であれば、sidebarのコンテンツが掛かることはない。

googleを使うdrawbackはこの辺り。googleへのindexでの、how, when, whatなどをきちんと把握する必要があるかもしれないけど、表示速度による利便性のがポイント高い。

次は、web elementsを利用した形態を試す。