不知道什么时候，Google 更新了自定义搜索代码，我一直用的是以前的，也就是去年折腾的Google自定义搜索，昨天折腾了新搜索代码一番，稍微说一下。
老的Google自定义搜索代码是通不过 W3C HTML 验证的，虽然这个验证很鸡薄可以忽视，但大家都喜欢绿色吧，能通过最好。
具体怎么用 Google 自定义搜索代替 WordPress 自带的搜索我就不多说了，网上一大把教材，我只说说新代码如何取舍和方便定义搜索框样式。
Google 自定义搜索网址：http://www.google.com/cse
前提：自定义搜索框样式选择时不要选择水印效果的，那个需要加载 js，既然要定义成结合主题搜索框，就不需要这多余的js加载了。
然后：先看看最新的自定义搜索框代码（搜索结果是显示在 WP 建立的页面，我的是 http://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="http://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="http://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="http://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>
声明: 除非注明，ZWWoOoOo文章均为原创，转载请以链接形式标明本文地址
本文地址: http://zww.me/archives/25220
这个old了吧..
不过我不会让它显示在wp建立的页面..
@snowxh 起码对于我去年初用的就新点
还没有用到，不过对自己以后肯定有帮助的！
@郑州seo甜甜 各有优缺点
回头我试试 ，这个搜索很少用。
@阅网博客 访客用的
在别人的BLOG上见过用google的搜索栏，感觉搜索的结果比较没有针对性，内容不沾边的也出现在搜索结果里面。。。
@Lazyyyyyy 相关性太多，其实博客最好用的是标签
我还没用google的搜索呢
就怕google抽风
@阿邙 google抽风很少，起码比我博客正常多了
呵呵，不错，再学习学习~！
@卜卜口の 一半一半吧，呵呵
很有见地，本地智慧虚拟团队正在寻找各类起源于草根的互联网专家，请您加入和支持
@本地智慧 这……专家？我只是闲时写博玩的
用这个东东，好像必须要开启固定链接设置！！如果用默认好像成功不了！！不知有解决方法没有！！
@Mr.差不多 毛，一定要固定链接；或者你做个html页面叫search.html，放在博客根目录下试试
懒得改了 用老的吧。
@园子 不是必须的，呵呵
折腾了一下，将上面的代码放进新建模版中，新建页面，结果访问 xx.com/search 搜索无反应。 哪地方做漏了？！
@lee
search页面还要加搜索结果代码，可别忘了，文章没写，因为文章说的是在会折腾google自定义代码的基础上。我还是补一下文章吧，免得其他人也不会。
OK，搞好了
google的自定义搜索如何让搜索结果在本站显示，而不是转跳到google页面显示呢？
@zhx
网上很多教程，我这就不重复了，很简单
@zwwooooo
以前我的主题可以做到在本站显示，后来不知道为啥不行了，只能转跳了！
博客还差个google搜索准备做上去
这个有必要抽空试试
@smilebull
收录量够还有就是收录速度快就可以考虑使用了
我的为什么底部会有一大块空白呢
http://qingge.de/search
@情歌
google自定义代码生成的结果页就是这样
@zwwooooo
我还以为是我代码弄错了呢
哎呀，还不会用
@明湖yucoat
慢慢折腾
刚折腾好。。嘿嘿。。。。
这个挺实用的
@Simon
如果网站收录正常后这个就比较给力了