最近更换主题时没有做搜索模块，首先是闲麻烦，再则Wordpress内置的搜索功能仅算一般，索性也不做搜索框了，然而有时候要找以前的存档又不方便，看到ThinkAgain博客上的Google Ajax Search功能强大，速度贼快，自己也搞了一个，期间也算历经千辛万苦，终于搞定了，先贴结果图。
先介绍一下Google Ajax Search，这是Google面向小型网站、博客推出的搜索服务，它在你的网站上内置搜索框，用AJAX方式调用结果显示在你的网站上，此过程不用访问Google的网页，增快了搜索的速度，提供更好的访客体验。
现在开始说一下如何使用吧。首先要注册一个Google Ajax Search的KEY，挺容易的，输入你的网址，如http://photozero.net ，打个勾赞成服务条款就会得到一个KEY，这个KEY只能用于这个域名下的网页调用。
接下来是把一个Javascript文件嵌入你的博客中。在博客后台打开“主题”-》“编辑主题”，找到“header.php” 这个文件编辑。把类似于
- <script src="http://www.google.com/jsapi?key=ABQIAAAAxbEbYoIMv2ddhn6TUcYTwhRLVF4ECcLU8-XSpyOqP4CBr2JuVBTOm1FzKI3-GU5dOFYWlWLxpqdlzA" type="text/javascript"></script>
的代码放在
- <head>
- ..
- </head>
之间。
这是第一步，在你的博客里面引用Google的AJAX搜索的文件。如果担心载入速度受到影响，可以把这个JS文件放在最后载入也是没有问题的。
第二步；在合适的位置放置搜索结果的标记。当用户进行搜索后，这个结果显示在你的博客的某个位置。我的建议是放置在Header之后，博客文章开始之前。我在要放的结果放一个
- <div id="googlesearchresult"></div><!--表示结果在这里显示-->
第三步，在合适的位置放置搜索框，如我的是在侧边栏，编辑“sidebar.php” ，在合适的位置放上标记：
- <div id="googlesearchcontrol"></div><!--表示搜索框在这里显示-->
第四步，也是最重要的一步，对搜索进行配置。Google Ajax Search（文档）提供了包括网页搜索、博客搜索、视频搜索、图片搜索等多项搜索服务，还可以限定结果网站（如 photozero.net ，限定在 photozero.net 里面搜索结果），相当于“站内搜索”。这一步也是比较麻烦的，如果懂得JavaScript还好说，不懂得就照例画葫芦。下面是示范代码。这是一个类似于标签式的排列方式，另一种是由上至下的排列，比较难看了点。
- <script language="Javascript" type="text/javascript">//<![CDATA[
- google.load('search', '1.0');//载入Google Ajax Search
- function OnLoad() {
- // create a tabbed mode search control
- var tabbed = new google.search.SearchControl();//创建一个控制器
- var siteSearch = new google.search.WebSearch();//实例化一个搜索器
- siteSearch.setSiteRestriction("photozero.net");//限定搜索范围，相当于站内搜索了
- siteSearch.setUserDefinedLabel("Photozero站内搜索");//该搜索条显示的名称
- tabbed.addSearcher(siteSearch);//将站内搜索添加到搜索器中
- tabbed.addSearcher(new google.search.WebSearch());//添加Web搜索
- tabbed.addSearcher(new google.search.BlogSearch());//添加博客搜索
- tabbed.addSearcher(new google.search.NewsSearch());//添加新闻搜索
- tabbed.addSearcher(new google.search.ImageSearch());//添加图片搜索
- tabbed.addSearcher(new google.search.VideoSearch());//添加视频搜索
- // draw in tabbed layout mode
- var drawOptions = new google.search.DrawOptions();//设置搜索选项
- drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);//以标签栏显示
- drawOptions.setSearchFormRoot(document.getElementById("googlesearchcontrol"));//放置搜索框的位置，如果应用在博客以外的某些网页，搜索框要和搜索结果显示在一起，就不用这句。
- tabbed.setResultSetSize(google.search.Search.LARGE_RESULTSET);//设置搜索结果显示大小，有大（显示8条）和小（显示4条）之分
- tabbed.draw(document.getElementById("googlesearchresult"), drawOptions);//设置搜索结果和选项
- //tabbed.execute("neekey");//如果要在载入时就进行搜索请添上这句
- }
- google.setOnLoadCallback(OnLoad, true);
- OnLoad();//启用代码
- //]]>
- </script>
好了，把上面的代码放入网页的任意位置，就可以看到像我的博客一样的效果了。此外，还有人为这个写了插件，好像就叫Google Ajax Search，但似乎很久没更新了，我也没去试用，如果贪图方便的朋友请上官方插件目录搜索一下。
