在Wordpress中轻松集成Google自定义搜索引擎

虽然Wordpress自带有一个站内搜索引擎，但是性能比较低下，而且还会占用服务器资源。所以还不如利用Google提供的自定义搜索引擎，将其集成到我们的博客中来。

之前我博客上面已经使用了Google的自定义搜索引擎，但是当用户搜索的时候，是跳到google.com的域名上面去，而不是在我自己的域上。我希望能够将搜索结果放在我自己设计的页面上，这样的好处是风格统一，在一定程度上也降低了用户流失率。下面讲一下如何在wordpress中集成Google自定义搜索引擎。

第一步：注册Google自定义搜索引擎

首先，我们需要到Google上面去注册一个自己的搜索引擎。访问http://www.google.com/cse/，用你的Google账户登录之后，创建新的搜索引擎。

这里需要注意，最好在英文版下操作。因为使用英文版可以提前体验一些新功能，例如一会要用到的样式设计。

在Sites（网站）中加上自己的博客链接，这样搜索结果就限定在你设置的网站内了。注意通配符的使用。

接着点击control panel（控制面板）=>get code（获取代码），这时会进入生成代码的页面。

以往Google自定义搜索的结果只能放在Google自己的域上（以弹出窗口或者iframe的形式展示），现在新增了一个自定义搜索元素的选项，通过这个选项，我们可以使用Google ajax search的API，直接在我们自己的页面上指定的div上输出搜索结果了。

点击页面上的look and feel我们还可以配置搜索结果的样式。Google预置了几套挺不错的样式供你选择。

这里我选择的是greensky的样式。

拷贝上面自动生成的javascript代码，一会要用到。

<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'zh-CN'});
  google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('009527755525159401988:63iuuetccag');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />

第二步：创建搜索结果页

为了让搜索结果在博客内显示，我们需要在wordpress中创建一个新的页面，作为搜索结果展示的页面。定位到wordpress主题文件夹下，然后新建一个叫做cse.php（文件名无所谓）的模板文件，内容如下所示，注意到，中间的一段代码就是在第一步中Google自定义搜索引擎后台获取到的代码。

<?php
/*
Template Name: cse
*/
?>
<?php get_header(); ?>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'zh-CN'});
  google.setOnLoadCallback(function(){
    var customSearchControl = new google.search.CustomSearchControl('009527755525159401988:63iuuetccag');
    customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
    customSearchControl.draw('cse');
  }, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />
<?php get_footer(); ?>

注意，上面代码中的Template Name后面填的名称，将会显示在wordpress后台文章/页面编辑器的模板选择框中。

将此模板文件通过FTP上传到服务器上相应的主题文件夹下，然后我们登录wordpress后台，创建一个新的页面，名字为sitesearch:

然后在右侧选择应用刚刚创建的cse模板：

OK，现在当我们访问http: //www.imkevinyang.com/sitesearch网址的时候，就可以看到Google的搜索框了。由于默认没有填入任何搜索关键词，所以我们暂时看不到任何搜索结果。

第三步：修改站内搜索提交表单

上面我们已经创建了一个搜索结果页了，但现在这个页面是一个孤立页面，没有和其他页面关联起来。接下来我们要做的事情，就是当用户点击你网站上任意页面的站内搜索按钮的时候，将用户引导到你刚刚创建的搜索结果页上。

在你的主题文件夹中找到相应的模板页，在模板页中找到站内搜索相关的代码，例如我使用的inove主题，站内搜索相关的代码是放在templates/header.php文件中，代码如下：

<div class="searchbox" style="padding-top:5px;">
<form method="get" action="/">
  <input type="text" size="24" name="q" value="搜索文章...." class="textfield" style="float:left" onblur="if (this.value == '') {this.value = '搜索文章....';}" onfocus="if (this.value != '') {this.value = '';}"/>
  <input type="hidden" value="UTF-8" name="ie"/>
  <input class="submitSearch" type="submit" value="Search"></input>
</form>
</div>

不同主题的站内搜索代码可能很不一样，放置的位置也不一样，大家可以尝试在整个主题文件夹中搜索包含“searchbox”关键字的文件。

内置的搜索引擎当用户点击搜索按钮之后会跳转到“http: //www.imkevinyang.com/?q=关键词”这样的地址，现在我们想让搜索结果跳到sitesearch页面，也就是刚才创建的页面，因此我们将上面代码中的form表单的action属性值改成“sitesearch”，这样，当我们提交表单的时候，跳转到的Url就形如：/sitesearch?q=XXX&ie=utf-8了。

<form method="get" action="/sitesearch">

第四步：初始化搜索关键字

好，现在当我们点击站内搜索按钮的时候，会跳到我们创建的页面/sitesearch上，并在Url参数中附带用户搜索的关键字。但是你会发现，搜索页面还是一片空白，没有展示任何搜索结果。这是因为Google并不能自动识别Url参数中的搜索关键字。因此我们要做的事情就是，先从Url中提取用户搜索的关键词，然后调用Google API使用此关键词进行搜索。

打开之前创建的cse.php模板，代码修改如下：

<?php
/*
Template Name: cse
*/
?>
<?php get_header(); ?>
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
  google.load('search', '1', {language : 'zh-CN'});
  google.setOnLoadCallback(function(){
        var customSearchControl = new google.search.CustomSearchControl('009527755525159401988:63iuuetccag');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        customSearchControl.draw('cse');
        var match = location.search.match(/q=([^&]*)(&|$)/);
        if(match && match[1]){
            var search = decodeURIComponent(match[1]);            

            customSearchControl.execute(search);
        }
    });
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/greensky.css" type="text/css" />
<?php get_footer(); ?>

在上面的代码中，我先使用正则表达式提取出来Url中的关键词，并使用UTF-8解码，然后让google执行搜索。实际使用中，你需要确认你网站上使用的Url搜索参数是不是q，如果不是，那么需要将上述的正则表达式中的q改成你自己定义的参数。

最终的效果:

细微的调整

改用Google.CN防止站内搜索被重置

由于众所周知的原因，我们使用Google.com搜索的时候经常会无厘头的被重置掉了，我们并不希望用户在我们网站上搜索文章的时候无缘无故被屏蔽掉了。所以为了保险起见，我们可以将第一步代码中引用的javascript文件地址修改成google.cn，这样所有的搜索都会使用google.cn（部分功能如adsense还是会使用google.com）。

<script src="http://www.google.com/jsapi" type="text/javascript"></script>

修改成：

<script src="http://www.google.cn/jsapi" type="text/javascript"></script>

让搜索结果只包含文章页

大多数博客为了便于用户查阅文章，都会对文章进行聚类，例如按文章标签（也就是关键词）聚类，按文章类别聚类，按存档年份或者月份聚类，等等，这样就会出现大量冗余的内容，对搜索引擎来说，这样的聚类可以让博客看起来内容更丰富些，同时站内链接比较健康，SEO效果会相对好，但这样一来，用户就不容易在搜索结果中快速找到他想看的文章了，因此我们在设置搜索结果的时候，最好让结果只包含文章内容页即可。

要做到这一点，只需要在第一步中的“包含网站”中将原先的“*.imkevinyang.com/*”替换成“*.imkevinyang.com/*.html”即可。

总结

利用Google自定义搜索引擎还有很多其他的好处，例如可以和Google Analytics以及Adsense整合到一起，报表分析更加透彻。将搜索结果放置到自己博客内页，可以自己修改样式，以保持和主题风格的一致，同时也可以吸引用户留在你的博客上。

更加高级的用法，请参考Google代码指南。

文章参考：http://www.whisperer.name/2009/09/improve-the-google-custom-search-results-of-inove/

——Kevin Yang

你可能对下面的文章感兴趣

• 2009年第一季度中国搜索引擎市场营收份额 (2009/05/06)
• 4行Greasemonkey代码最大化Google Reader的阅读空间 (2009/08/09)
• Android手机初体验 (2010/03/01)
• G1手机与笔记本实现Wifi互联共享上网 (2010/03/02)
• Google Analytics中的UniquePageView和Visits的区别 (2009/12/07)
• Google Wave为什么这么火 (2009/11/14)
• Google和微软的一大不同 (2009/05/06)
• Google工程师Matt Cutts谈SEO (2009/03/23)
• Google排名更新 (2009/03/21)
• Google的价值观 (2009/03/07)

Kevin Yang 工具技巧 Google, WordPress, 博客搜索, 搜索引擎, 站内搜索