北极寒流 » 网络资源 » 为WordPress博客集成Google自定义搜索功能-升级版 - 2010.11.18

为WordPress博客集成Google自定义搜索功能-升级版

由于WordPress自带的搜索功能比较弱智,所以一直以来都是采用Google的自定义搜索功能,但是最近一段时间,亿品元素博客上常有用户反应,说在博客上搜索文章时老是出现提示:“您的计算机或网络可能正在发送自动查询。为了保护我们的用户,我们目前无法处理您的请求。”开始还必以为意,不过反应多了,才想到可能哪里出了问题,但是哪里出了问题呢?对于属于菜鸟的自己只好通过网络搜索相关答案,不过一直没找到合适的解决方法。只好尝试换一种方式集成Google自定义搜索功能,发现另外一种Google自定义搜索功能好像没有此问题。

您的计算机或网络可能正在发送自动查询。为了保护我们的用户,我们目前无法处理您的请求。

下面讲一下如何在wordpress中集成Google自定义搜索引擎:

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

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

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

为WordPress博客集成Google自定义搜索功能-升级版

在外观那里选择一个托管选项。我选的是第一个,其他的如样式之类的就看你自己的喜欢随便选吧。

为WordPress博客集成Google自定义搜索功能-升级版

上面的托管选项选项选好后,保存设置,就可以获取代码了

为WordPress博客集成Google自定义搜索功能-升级版

自动生成的代码很多很长,如果你不介意的话也可以直接使用,不过我是不喜欢那么冗长的代码了,

为WordPress博客集成Google自定义搜索功能-升级版

我们只需要下面这段代码就行了

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

注意:'009527755525159401988:63iuuetccag'这就是你的Google自定义搜索ID了。

第二步:创建搜索结果页

为了让搜索结果在博客内显示,我们需要在wordpress中创建一个新的页面,作为搜索结果展示的页面。定位到wordpress主题文件夹下,然后新建一个叫做cse.php(文件名无所谓)的模板文件,内容如下所示,注意到,中间的一段代码就是在第一步中Google自定义搜索引擎后台获取到的代码。不过你仔细看下,还是有点不同的哦。在customSearchControl.draw('cse')下面还加了几行代码的。

<?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(); ?>

注意,上面代码中的Template Name后面填的名称,将会显示在wordpress后台文章/页面编辑器的模板选择框中。(greensky.css为搜索栏的CSS,需要自己定义css的,可以把下载在本地修改,或者完全自己重写。)

将此模板文件通过FTP上传到服务器上相应的主题文件夹下,然后我们登录wordpress后台,创建一个新的页面,名字为cse(当然名字设置为其他也可以):

为WordPress博客集成Google自定义搜索功能-升级版

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

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

在你的主题文件夹中找到相应的模板页,在模板页中找到站内搜索相关的代码,站内搜索相关的代码一般是放在templates/header.php文件中,不同的主题,代码位置也许不同,大家可以尝试在整个主题文件夹中搜索包含“searchbox”关键字的文件。例如我亿品元素的主题我就自己把它调到了sidebar2的文件中。代码如下:

<div class="searchbox">
<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>

把上面那段中的相关代码改成

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

上面的cse就是你刚才在WordPress后台中新建的搜索页面名称了。

第四步:细微调整

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

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

修改成:

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

让搜索结果只包含文章页

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

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

效果预览:亿品元素博客

发表评论 【登录·注册】

所有留言都会被审核,请勿发布垃圾评论!

(必填)*