WordPress整合Google自定义搜索

前面写过博客整合Google自定义搜索一文，今天在WordPress上测试时发现原来文章很多地方没说清楚，甚至连WordPress集成Google自定义搜索的方法步骤都没提，今天再加一篇专门针对WordPress的，不过本文只介绍WordPress整合Google自定义搜索的实现方法，具体代码获取请参考前一篇文章。

前一篇快速通道：如何使用Google自定义搜索

本文包含两个部分，大家根据实际需要选择其一：

无需申请Custom Search ID的通用代码

使用自定义搜索ID及关联Adsense账户

一、无需申请Custom Search ID的通用代码

这集成方法最简单，无需到http://www.google.com/cse/申请搜索ID，也无需任何设置，只需要拷贝放到自己的主题或页面代码中即可正常使用。

Google站内搜索代码如下：

<!-- Google Custom Search Element -->
<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');
google.setOnLoadCallback(function(){
new google.search.CustomSearchControl().draw('cse');
}, true);
</script>

该代码适合放到以下三个地方：

WordPress边栏Widge，搜索结果宽度会自适应。
单独创建一个页面，比如标题为search，内容就是上面的代码。
还可以通过修改当前主题的search.php文件，不过默认的search.php是由WordPress调用，需对WordPress进行搜索才能打开该页面，打开时可能会带参数，但这些参数对使用Google自定义搜索而言都是没用的，所以看起来不大友好，还是没有上面单独创建一个页面更好，然后直接把search.php删除关闭掉。

效果如下（如果是放到边栏，宽度均会自适应）：

这个代码没有关联Adsense，所以，即使带有广告也是Google自己的，不会给站长带来收入，如果需要关联自己的Adsense，或是需要对搜索进行定制还是需要参考前面的文章先获取代码，并参照下文方法进行整合。

二、使用自定义搜索ID及关联Adsense账户

以下只对WordPress集成方法做介绍，其它系统可类似参考，也可参考上一篇文章。以下放置方法是典型的WordPress应用，搜索栏目放到边栏Widge或顶部Banner中，把搜索结果放到单独页面，效果同天缘博客目前效果完全相同。

要点：

搜索框与搜索结果展示不在同一个页面
需修改Sidebar.php，或在后台修改Widge（假如支持的话）
需手动创建一个Search页面

具体用法如下：

1、首先需登录http://www.google.com/cse/，参考前面文章添加自己的站点信息，及关联必要的Adsense账户，如果没有Adsense无需关联。

2、创建完成后，在点击左侧的Look and feel并选择Iframe，如下图：

3、点击Get Code获取搜索框和搜索结果两部分代码，在指定显示搜索结果URL中输入你的Page页地址，比如xxx.com/search，要保证你输入的地址可以正常访问到（如果是参照本文方法，就是一定能打开下面将要创建的Search页面）。

4、搜索框代码示例如下：

<form action="http://www.metsky.com/" id="cse-search-box">
  <div>
    <input type="hidden" name="cx" value="{Your Customized ID}" />
    <input type="hidden" name="cof" value="FORID:10" />
    <input type="hidden" name="ie" value="UTF-8" />
    <input type="text" name="q" size="31" />
    <input type="submit" name="sa" value="Search" />
  </div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

上面代码中的http://www.metsky.com/需要换成自己的搜索结果页，{Your Customized ID}是Google自动为你分配的搜索ID，把这部分代码放到主题目录下的Sidebar.php文件中。

5、搜索结果展示页代码

这部分代码，可以通过创建一个Search页面来完成，代码如下：

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

创建页面效果如下：

6、最终应用效果同天缘博客边栏搜索框及搜索结果页面，图略。

参考资料：网贝（本文第一种通用方法来源）

天缘博客