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

    我就更懒了 直接拿过来用的 看来还得好好修改一番才行

    1. trylife says:

      @ifenwen 沙发主!坐他大腿! :evil:

    2. zwwooooo says:

      @ifenwen 其实google自定义搜索是可以随意定义样式的

    3. zwwooooo says:

      @trylife 大腿很舒服吧

    4. trylife says:

      @zwwooooo 要是坐到美女大腿上 :mrgreen:

    5. zwwooooo says:

      @trylife 我这基本没女人来,你的愿望很难实现 :mrgreen:

  2. 万戈 says:

    感觉google搜索出来的内容太多了,站内搜索我还是喜欢用WP自带的

    1. zwwooooo says:

      @万戈 一直用就懒的去改了

  3. 球犯 says:

    哈~俺就不折腾了 俺那小小的博客是没人去用搜索的 囧

    1. zwwooooo says:

      @球犯 我这铁友需要,当然一些wper也需要

    2. 球犯 says:

      @zwwooooo 恩 对啊 哈哈 分享精神万岁~

  4. FORECE says:

    虽然对广告有好处,不过GOOGLE搜索的不全啊。我的700多文章只收录了500左右。

    1. zwwooooo says:

      @FORECE 一般都齐吧,不齐就用wp自带的

  5. MOPVHS says:

    前排加粗~~~

    1. zwwooooo says:

      @MOPVHS
      你很粗!

  6. 阿修 says:

    以前用的google自定义,后来感觉用自带的挺好

    1. zwwooooo says:

      @阿修 看来都喜欢折腾来折腾去

  7. mcooo says:

    一直都是用Google 自定义搜索,也挺好的!

    1. zwwooooo says:

      @mcooo 还可以,速度也不错

  8. 猪八戒 says:

    我也在研究自宣言搜索呢。

    1. zwwooooo says:

      @猪八戒 不用研究直接用就行了

  9. 小贝 says:

    恩,自定义搜索,是得研究研究,小贝路过

    1. zwwooooo says:

      @小贝 路过坐下来歇歇吧

  10. merror says:

    不错
    就是折腾太费时间了。

    1. zwwooooo says:

      @merror 难得是跟主题结合

  11. 丕子 says:

    先不折腾了

  12. 丕子 says:

    竟然发现上面留言的大部分是Firefox还有chrome 都是在Win XP下面 XP真实经典

    1. zwwooooo says:

      @丕子 没法,很多游戏/软件还是xp下好

  13. [...] This post was mentioned on Twitter by Max Lee, zwwooooo. zwwooooo said: 使用Google最新的自定义搜索代码 http://goo.gl/fb/kAfpC [...]

  14. 木本无心 says:

    我也不折腾了,搜索基本用不上啊!

    1. zwwooooo says:

      @木本无心 呵呵,访客用的

  15. Bee君 says:

    新代码能够通过验证~~就这个更新麽 ( ̄▽ ̄")

    1. zwwooooo says:

      @Bee君 嘿嘿,可以通过,你可以试试我的首页(文章页就算了,百毒js过不了)

  16. 我在广告里弄过,过几天就失效了,呵呵

    1. zwwooooo says:

      @软件盒子 什么失效?

  17. A.shun says:

    我的代码有点老了,不过效果差不多。。
    这个搜索框的样式上次折腾了好久- -

    1. zwwooooo says:

      @A.shun 其实就是定义css啦

  18. 厉害~~ :shock:

    1. zwwooooo says:

      @代码如歌 喜欢就折腾

    2. @zwwooooo 我也想啊,可惜没有达到100%的收录率

    3. zwwooooo says:

      @快播电影 那就用默认吧,好折腾

  19. 飞晏 says:

    Google自定义搜索可以有广告 嘿嘿

    1. zwwooooo says:

      @飞晏 哈哈,不过很少人会点的,几乎没有

  20. TTkea says:

    感觉还是站内搜索好些,要是Google没收录就搜不到了~

    1. zwwooooo says:

      @TTkea 一般都有收录

发表评论

昵称 *

网址

B em del U Link Code Quote