给博客添加 Google 自定义搜索

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

Tag: Adsense , google , Google 自定义搜索 , php , utf-8 , wordpress

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

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 自定义搜索提供的“搜索框代码”进行比较：

<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 文件，上传到主题目录下。修改后的代码如下：

<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，在文件顶部代码的前面添加：

<?php
/*
Template Name: Google自定义搜索结果
*/
?>

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

1
2
3

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

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

<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