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. 扑谷 says:

    能够让它在自己的页面显示吗 结果

    1. zwwooooo says:

      @扑谷
      这个就是。

发表评论

昵称 *

网址

B em del U Link Code Quote