使用Google最新的自定义搜索代码

不知道什么时候,Google 更新了自定义搜索代码,我一直用的是以前的,也就是去年折腾的Google自定义搜索,昨天折腾了新搜索代码一番,稍微说一下。

老的Google自定义搜索代码是通不过 W3C HTML 验证的,虽然这个验证很鸡薄可以忽视,但大家都喜欢绿色吧,能通过最好。

具体怎么用 Google 自定义搜索代替 WordPress 自带的搜索我就不多说了,网上一大把教材,我只说说新代码如何取舍和方便定义搜索框样式。

Google 自定义搜索网址http://www.google.com/cse

前提:自定义搜索框样式选择时不要选择水印效果的,那个需要加载 js,既然要定义成结合主题搜索框,就不需要这多余的js加载了。

然后:先看看最新的自定义搜索框代码(搜索结果是显示在 WP 建立的页面,我的是 https://zww.me/search)

<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div style="background-color:#FFFFFF;color:#000000">
	<div>
		<form action="https://zww.me/search" id="cse-search-box">
			<div>
			<input type="hidden" name="cx" value="01129172637xxxxxxxxxx:xxxxxxxxxx" />
			<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="Search" />
			</div>
		</form>
	</div>
	<div>
		<img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />
	</div>
	<div>
		Custom Search
	</div>
</div>

看上面的代码,用在WordPress主题上的话,很多是多余的。

其实我们需要的就下面的部分

<form action="https://zww.me/search" id="cse-search-box">
	<div>
		<input type="hidden" name="cx" value="01129172637xxxxxxxxxx:xxxxxxxxxx" />
		<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="Search" />
	</div>
</form>

但这样不方便定义搜索框的样式,所以我们要自己在input里面添加id(红字部分),如下

<form action="https://zww.me/search" id="cse-search-box">
	<div>
		<input type="hidden" name="cx" value="01129172637xxxxxxxxxx:xxxxxxxxxx" />
		<input type="hidden" name="cof" value="FORID:11" />
		<input type="hidden" name="ie" value="UTF-8" />
		<input id="g_input" type="text" name="q" size="31" />
		<input id="g_submit" type="submit" name="sa" value="Search" />
	</div>
</form>

注:如果你不需要提交按钮,那么把最后那行的 input 删掉即可。

这样就方便定义搜索框样式了,如果你把搜索框代码放到 <div id="search"></div> 里面,那么就可以在主题的 style.css 定义样式了。

主要定义 #search 的样式就可以了,然后定义一下 input 宽度、高度、文字颜色即可,当然也可以定义提交按钮样式

#search{} /* 主要定义这个id */
#search form input#g_input{} /* 定义搜索框高度和宽度适应 #search */
#search form input#g_submit{} /* 定义搜索提交按钮 */

具体怎么定义,就看你的 css 功力了,即使不太懂,翻教程/手册也能搞定的。

文章标题和中心内容不太一致,算了,喜欢折腾的自会看内容。

补充一下:还是说说最后一步吧,就是在wp后台建立一个页面,名字为search,把类似下面的代码(在你自定义搜索控制面板获取),扔到文章内容区(html编辑方式) ,最好是自建一个search页面模板,如page-search.php,自建页面模板具体参考《》

<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>
zww
or
oooo

“使用Google最新的自定义搜索代码”有129条评论

  1. snowxh says:

    这个old了吧..
    不过我不会让它显示在wp建立的页面..

    1. zwwooooo says:

      @snowxh 起码对于我去年初用的就新点

  2. 还没有用到,不过对自己以后肯定有帮助的!

  3. 回头我试试 ,这个搜索很少用。

  4. Lazyyyyyy says:

    在别人的BLOG上见过用google的搜索栏,感觉搜索的结果比较没有针对性,内容不沾边的也出现在搜索结果里面。。。

    1. zwwooooo says:

      @Lazyyyyyy 相关性太多,其实博客最好用的是标签

  5. 阿邙 says:

    我还没用google的搜索呢
    就怕google抽风 :!:

    1. zwwooooo says:

      @阿邙 google抽风很少,起码比我博客正常多了

  6. 呵呵,不错,再学习学习~! :grin:

  7. :arrow: 这文章...囧文啊

    1. zwwooooo says:

      @卜卜口の 一半一半吧,呵呵

  8. 很有见地,本地智慧虚拟团队正在寻找各类起源于草根的互联网专家,请您加入和支持

    1. zwwooooo says:

      @本地智慧 这……专家?我只是闲时写博玩的

  9. 用这个东东,好像必须要开启固定链接设置!!如果用默认好像成功不了!!不知有解决方法没有!! :?:

    1. zwwooooo says:

      @Mr.差不多 毛,一定要固定链接;或者你做个html页面叫search.html,放在博客根目录下试试

  10. 园子 says:

    懒得改了 用老的吧。

    1. zwwooooo says:

      @园子 不是必须的,呵呵

  11. lee says:

    折腾了一下,将上面的代码放进新建模版中,新建页面,结果访问 xx.com/search 搜索无反应。 哪地方做漏了?!

    1. zwwooooo says:

      @lee
      search页面还要加搜索结果代码,可别忘了,文章没写,因为文章说的是在会折腾google自定义代码的基础上。我还是补一下文章吧,免得其他人也不会。

  12. 老王 says:

    OK,搞好了

  13. zhx says:

    google的自定义搜索如何让搜索结果在本站显示,而不是转跳到google页面显示呢?

    1. zwwooooo says:

      @zhx
      网上很多教程,我这就不重复了,很简单

    2. zhx says:

      @zwwooooo
      以前我的主题可以做到在本站显示,后来不知道为啥不行了,只能转跳了! :razz:

  14. 无冷 says:

    博客还差个google搜索准备做上去

  15. smilebull says:

    这个有必要抽空试试

    1. zwwooooo says:

      @smilebull
      收录量够还有就是收录速度快就可以考虑使用了

  16. 情歌 says:

    我的为什么底部会有一大块空白呢
    http://qingge.de/search

    1. zwwooooo says:

      @情歌
      google自定义代码生成的结果页就是这样

    2. 情歌 says:

      @zwwooooo
      我还以为是我代码弄错了呢

  17. 哎呀,还不会用

  18. Simon says:

    刚折腾好。。嘿嘿。。。。

    这个挺实用的

    1. zwwooooo says:

      @Simon
      如果网站收录正常后这个就比较给力了

  19. 我想知道怎么去掉谷歌广告结果页底部的空白

    1. zwwooooo says:

      @一路上影视
      谷歌广告结果页?你指谷歌搜索结果页吧,现在不会了啊,我记得以前有一段时间是这样。

  20. 哦,是谷歌自定义搜索结果页底部很大的空白。

    1. zwwooooo says:

      @一路上影视
      不会啊,要么是侧边栏内容太长了

发表评论

昵称 *

网址

B em del U Link Code Quote