2010年07月29日 129条评论

使用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. Kars says:

    看来又要折腾了哈~

  2. 7cbt says:

    新鲜出炉啊
    Search页面还没看出什么名堂

    1. zwwooooo says:

      @7cbt 页面就是结果,结果怎么会有什么名堂 :evil:

    2. 7cbt says:

      @zwwooooo 原来那就是结果 我找了半天 我说白花花一片 是不是我浏览器的问题 看样子 不是浏览器的问题。

    3. zwwooooo says:

      @7cbt 我这搜一下不就知道了

  3. 小王子 says:

    因为一直G没成功所以还是用WP的,感觉也不错啊够用了。

    1. zwwooooo says:

      @小王子 一般可以了

  4. mice says:

    咦ZWW 这也加编辑器了..

    哇哈哈

    灭哈哈

    1. zwwooooo says:

      @mice 嘻嘻,以前加个,后来闲大,这次用qiqiboy的,嘿嘿

  5. 真好 says:

    用过一段时间的,主要是那个主题默认就是谷歌搜索。我还去谷歌注册了个那啥ID,现在忘记是多少了,呵呵,没有去折腾了。

    1. zwwooooo says:

      @真好 你那主题真周到

  6. 这文不错,推荐阅读!

    1. zwwooooo says:

      @阅网博客 囧,你说啥呢

  7. leyond says:

    我以为是添加一个googleID之类的,估计我主题支持这样设置

    1. zwwooooo says:

      @leyond 你那主题很不错,作者是日本人吧

  8. dengmin says:

    我还是用http://www.google.com/search明天也把他替换掉

    1. zwwooooo says:

      @dengmin 慢慢折腾

  9. 帮我看下我文章页面的改版效果 把QQ加我把

  10. 郑永 says:

    不更新到最新的没事吧?呵呵

    1. zwwooooo says:

      @郑永 没问题,以前的一样用,不想折腾就不用更新。

  11. 你这博客主题也真能折腾,每次来基本都能看到点变化,特别是边栏,现在搜索框似乎也变了。

    1. zwwooooo says:

      @世纪之光 你真细心,这样都给你发现了,一些效果也改了,哈

  12. 折腾不了、、太费神了!

  13. 落伍者 says:

    这个有点看不明白,是自己OUT了。

    1. zwwooooo says:

      @落伍者 这还是很简单吧

    2. zwwooooo says:

      @落伍者 你的博客咋啦?

  14. BoKeam says:

    我居然能看懂一点 :shock:

    1. zwwooooo says:

      @BoKeam 这个……正常 :mrgreen:

    2. 苏扬 says:

      @zwwooooo 那我没看懂啊 正常么?

  15. 真实越来越方便了 哦!GG就是牛啊!我也弄个到自己的站里去哈

  16. 灰太狼 says:

    :mrgreen: 不错。很使用。感谢。楼主。

    1. 苏扬 says:

      @灰太狼 纠正一下错别字 是很实用!

  17. 苏扬 says:

    谷歌不是说不给改代码么?怎么 你上面的搜索框是不是改过之后的效果啊?

  18. 郑州seo says:

    这个有时间我试试,呵呵!

  19. zzzhu says:

    看看 这就是gg

  20. erick says:

    嗯嗯,虽然已经折腾过一次了,但还可以继续折腾!

    1. zwwooooo says:

      @erick 呵呵,折腾不断

发表评论

昵称 *

网址

B em del U Link Code Quote