網生@誌 | zEUS.'Blog

首页 » Wordpress研究 , 网络相关 » 2008-09-18 »

给博客添加 Google 自定义搜索

字体大小:T | T

何为“Google 自定义搜索”?

创建根据自己的需求量身定制的搜索引擎:包括一个网站、多个网站或特定网页;将搜索框和搜索结果放入您自己的网站;自定义颜色和品牌以搭配您现有的网页。

Google 自定义搜索结果比博客默认的搜索结果要“更快,更准,更多”,无论是给读者还是管理员都提供了相当大的便利。

猫猫用上了 Google 自定义搜索后我才想起来自己以前也搞过一个,不过不同的是之前我是让 Google 来托管搜索结果,而猫猫现在则是把搜索结果嵌入到了博客,恩,很好很强大,于是我自个儿就折腾了一下,将 Google 自定义搜索也嵌入到了博客里。具体效果您可以自行在搜索框内输入一个关键词(如:wordpress),然后回车,就能看到 Google 自定义搜索的结果了,也可以点击 这里 查看截图效果。

下面我就简单的介绍下如何为博客添加“Google 自定义搜索”功能。
访问:http://www.google.com/coop/cse/?hl=zh-CN
点击“创建自定义搜索引擎”的蓝色按钮,页面跳转之后根据页面上的要求填写各项基本信息,在最下方的“选择版本”中选择“标准版”:

Google 自定义搜索

点击“下一步”,页面跳转之后点击“完成”。然后回到 Google 自定义搜索首页,依次点击“管理您现有的搜索引擎”–“控制面板

Google 自定义搜索

查看“基本信息”下的各个选项和“使用偏好”是否正确,点击“外观”后选择第一种无背景色的搜索框,该页面的下方可以设置“自定义搜索结果”的颜色样式,类似 Google Adsense 的广告设置,非常简单,设置成和博客相同的链接颜色即可,保存设置。
再点击“代码”,在“搜索结果托管选项”下选择“在您的网站上托管搜索结果:”–“iframe – 需要两个网页:一个网页提供搜索框,另一个提供结果”:

Google 自定义搜索

指定搜索结果详情”选项需要填写搜索结果所在的网页地址(例如我的是 http://zeuscn.net/search):

Google 自定义搜索

该页面的下方提供了“搜索框代码”和“搜索结果代码”,记下这2段代码,接下来修改博客模板文件。

WordPress 博客模板里一般都会包含一个 searchform.php 的文件,该文件定义了博客的搜索框。我们打开这个文件,可以看到类似如下的代码:

1
2
3
<form method="get" class="searchform" action="<?php bloginfo('home'); ?>/">
<input type="text" value="站内搜索" name="s" class="s" onfocus="if (this.value == '站内搜索') {this.value = '';}" onblur="if (this.value == '') {this.value = '站内搜索';}"/>
<input type="submit" class="submit" value="GO" /></form>

和 Google 自定义搜索提供的“搜索框代码”进行比较:

1
2
3
4
5
6
7
8
9
10
<form action="http://zeuscn.net/search" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="012316757526287753200:595_iqfdr6q" />
    <input type="hidden" name="cof" value="FORID:11" />
    <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/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>

我将 Google 自定义搜索提供的“搜索框代码”中有,但是 searchform.php 中没有的代码添加到 searchform.php 中,然后另存为 google-searchform.php 文件,上传到主题目录下。修改后的代码如下:

1
2
3
4
5
6
7
8
<form method="get" class="searchform" action="http://zeuscn.net/search">
<input type="hidden" name="cx" value="012316757526287753200:595_iqfdr6q" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" value="站内搜索" name="q" class="s" onfocus="if (this.value == '站内搜索') {this.value = '';}" onblur="if (this.value == '') {this.value = '站内搜索';}"/>
<input type="submit" class="submit" name="sa" value="GO" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=zh-Hans"></script>

其中我去掉了 Google 提供的搜索框的样式 id=”cse-search-box” 好让搜索框的样式更符合主题的效果。不少主题的搜索框都位于页面的头部(header),那么我们打开 header.php 文件,找到如下代码:

1
<?php include (TEMPLATEPATH . '/searchform.php'); ?>

将其修改为:

1
<?php include (TEMPLATEPATH . '/google-searchform.php'); ?>

注:此搜索框的样式可能需要略微调整样式。

接下来需要做一个“搜索结果页”,先在本地打开主题文件夹中的 page.php,在文件顶部代码的前面添加:

1
2
3
4
5
<?php
/*
Template Name: Google自定义搜索结果
*/
?>

然后找到类似如下的代码:

1
2
3
<div class="entry">
<?php the_content('Continue reading &raquo;'); ?>
</div><!--/entry -->

使用 Google 自定义搜索提供的“搜索结果代码”将其替换掉。

1
2
3
4
5
6
7
8
9
<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>

修改完毕,文件另存为:search_temp.php (需要是 utf-8 的编码),FTP 上传至主题目录下。

进入 WordPress 后台,撰写一个新页面,命名为“搜索结果”,缩略名(slug name)为:search,页面模板选择刚刚上传的 “Google自定义搜索结果”(search_temp.php),发布该页面。
此时你会发现这个页面出现在了博客导航菜栏里,一般来说我们不需要这个页面,所以就需要将其从导航栏中“隐藏”。进入 WordPress 后台,管理–页面,找到刚刚建立的“搜索结果”,将鼠标移动上去(不要点击),看浏览器状态栏的链接地址,地址的末尾有一个数字,此数字为该页面的 ID 号,例如我的是 491:

Google 自定义搜索

打开 header.php 文件,找到如下代码

1
<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

将其修改为:

1
<?php wp_list_pages('sort_column=menu_order&depth=1&exclude=491&title_li=');?>

exclude 的值就是从 wp_list_pages() 函数中去除指定的页面 ID 号。保存后回到首页,导航栏里就找不到“搜索结果”这个链接了。

大功基本告成,Google 自定义搜索的搜索框和结果页全部都嵌入到了博客里,也许还需要根据博客模板的样式稍作修改。
现在你就可以直接进行搜索来看看效果了~ 以后凡是搜索的结果都会显示在 http://yourdomain/search 这个页面上,例如我的 http://zeuscn.net/search
Google 自定义搜索 还能把你的 Google Adsense 嵌入到搜索结果中去,有兴趣的朋友不妨自己研究一下~
Have fun 🙂

zEUS.

« »

已经有24人发表了评论

  1. 文章很好;不过跟主题稍微不兼容

  2. 文章很有好;不过跟主题稍微不兼容

  3. 终于学会了,留言对zEUS.表示感谢!

  4. 站长,您好!我看了这篇文章,认为很有特色。想学,但却做不出来。菜鸟特请教,我用的是revolution church 2.0主题,没有searchform.php,同时,我想把搜索放在侧边栏里,试了几下,结果不行,不知哪里有问题。希望能指点一二,谢谢!

  5. 呵呵,已经做好了。

  6. 这样修改之后,不知道有没有违反GG的政策?

文章反相链接 Pingback/Trackback

  1. 给博客添加 Google 自定义搜索 | 盆盆罐罐

发表您的看法

TOP COMMENTS BOTTOM