分类
日志

在 WordPress 中整合 Google 自定义搜索引擎

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

第一步:注册 Google 自定义搜索引擎
首先,我们需要到Google上面去注册一个自己的搜索引擎。访问http://www.google.com/cse/,用你的 Google 账户登录之后,创建新的搜索引擎。创建完毕后进入”外观”面板,这里选择”全宽”布局。保存后进入”获取代码”,获得如下代码:

<?php
/*
Template Name: search
*/
?>
<?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(’005173058427090287855:djmrkortfdw’);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw(‘cse’, options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<?php get_footer(); ?>

第二步:创建搜索结果页
为了让搜索结果在博客内显示,我们需要在 WordPress 中创建一个新的页面,作为搜索结果展示的页面。我们创建一个叫做search.php(文件名无所谓)的模板文件,可视乎你的模板调整,内容如下:

<?php
/*
Template Name: search
*/
?>
<?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(’005173058427090287855:djmrkortfdw’);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
customSearchControl.draw(‘cse’, options);
}, true);
</script>
<link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" />
<?php get_footer(); ?>

接着在后台新建页面,别名设置为 search ,在右侧选择模板 search ,提交保存。

第三步:修改站内搜索提交表单
接下来我们要做的事情,就是当用户点击你网站上任意页面的站内搜索按钮的时候,将用户引导到你刚刚创建的搜索结果页上。在主题文件夹中找到相应的模板页,在模板页中找到站内搜索相关的代码:

<form method="get" action="/search">
<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 class="submitSearch" type="submit" value="Search"></input>
</form>

这里主要修改 method=”get” action=”/search”,还有文本框 name=”q”

第四步:初始化搜索关键字
现在我们要做的事情就是,先从Url中提取用户搜索的关键词,然后调用 Google API 使用此关键词进行搜索。

打开刚才新建的search.php,在 Google 的代码 customSearchControl.draw(‘cse’, options); 后插入以下代码:

var match = location.search.match(/q=([^&]*)(&|$)/);
if(match && match[1]){
var search = decodeURIComponent(match[1]);
customSearchControl.execute(search);
}

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