Old

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

声明: 除非注明,ZWWoOoOo文章均为原创,转载请以链接形式标明本文地址
本文地址: https://zww.me/archives/25220

129 comments

  1. ifenwen ifenwen Firefox 3 Firefox 3 Windows XP Windows XP

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

    沙发
  2. 万戈 万戈 Firefox 3 Firefox 3 Windows XP Windows XP

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

    板凳
  3. 球犯 球犯 Google Chrome 5 Google Chrome 5 Windows XP Windows XP

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

    地板
  4. ......
  5. 扑谷 扑谷 Internet Explorer 9 Internet Explorer 9 Windows 7 Windows 7

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

    61楼

Leave a Reply