Keep on going, never give up.

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>

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

  1. WordPress边栏Widge,搜索结果宽度会自适应。
  2. 单独创建一个页面,比如标题为search,内容就是上面的代码。
  3. 还可以通过修改当前主题的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、最终应用效果同天缘博客边栏搜索框及搜索结果页面,图略。

参考资料:网贝 (本文第一种通用方法来源)

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.