分享按钮

Google的自定义搜索功能强大,如果搜索范围只限定一个站点,那就是一个强大的站内搜索(别给我说你的站点还未被收录)。再加上随意的可定制性,所以,本站很久以前就把WP默认的搜索替换成了自定义搜索。如果你还没有,赶紧定制一个吧,http://www.google.com/cse/ 谁用谁知道……

基本设置都很简单,主要是替换使用的时候需要注意:

1、google的自定义搜索默认有三种引用方式,个人觉得可定制性最强的是“Iframe”模式,其它两种其实也不错,主要是js不可控或者结果页面在google主机上,定制性又差了一点儿也很难与自身站点结合。

2、如果想要真正实现完美自定义,那就选择“Iframe”模式而且在嵌入代码时,google本身的样式和js代码一个都不用,全部自己写,当然这里主要是指搜索框而已。

在合适的地方插入搜索框代码,然后自定义样式和js效果:

<form id="cse-search-box" action="search results page url">
<div><input type="hidden" name="cx" value="008885666652322351777:sdlqmf2ukro" />
<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>

如果不想在结果页面搜索框显示为空值的话,可以直接接收url参数的“q”值就行了。比如是wp的话:

<input type="text" name="q"<?php if($_GET['q']!='') echo ' value="'.$_GET['q'].'"' ?> />

然后新建一个页面显示搜索结果,本页地址就是搜索框表单的action的地址,直接插入代码就OK。

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

这里只需要定义“googleSearchFrameWidth”为合适的宽度即可。

3、特别值得注意的一点是,像本站,如果插入搜索框代码时不用google的js代码的话,有可能会出错,在IE下搜索时打不开结果页面会显示网络连接错误或乱码。仔细查看去掉的那行js代码,后台也设置语言为en即可:

<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

就是这么简单,赶紧试试吧。

 
目前有4条回应
Comment
Trackback
  • 竹林若谷 回应于2012/08/04 00:48 回复TA

    我是小白 我没看懂,给我用最简单的方式解释下好不

  • 竹林若谷 回应于2012/08/04 00:48 回复TA

    我是小白 我没看懂,给我用最简单的方式解释下好不

  • 本篇文章没有Trackback
你好,欢迎光临!