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

赏