以前一直用的google自定义搜索，只不过那是旧版的，自从换了 dot-a 这个主题，很多折腾过的效果和功能都要从新加上了。
废话少说，开始做咯：
效果：本站顶部的 站内搜索 功能！
推荐指数：★★★★★
推荐理由：高速Ajax加载，减少主机负担，自定义CSS，无广告，自定义展示结果，高亮搜索关键词，Adsense集成，Analytics 集成
具体方法：
1、用 Google帐号登录 http://www.google.com/cse/
2、创建一个 自定义搜索引擎，填写相关信息，选择标准版，搜索网站 填写如下格式：
zlz.im/*
3、进入控制面板 可以获得，诸如：搜索引擎的唯一 ID： 011726169853656484522:gvikl69lrew
———– 分 割 线 ———-以下开始在WordPress中操作————
4、（又要用到Wordpress页面模版这个功能，不了解的可以看这里 WordPress页面模板的使用及短代码调用 ）
在桌面创建一个名为 cse.php 的文件，之后上传到 WP 主题目录中，[注意这里的代码不完全是Google 生成的，添加了正则传参部分]文件内容如下：
<?php
/*
Template Name: cse
*/
?>
<?php get_header(); ?>
<div>
<div>
<div id="cse" style="width: 100%;">正在从Google 加载搜索结果......</div>
<script src="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
function parseQueryFromUrl () {
var queryParamName = "q";
var search = window.location.search.substr(1);
var parts = search.split('&');
for (var i = 0; i < parts.length; i++) {
var keyvaluepair = parts[i].split('=');
if (decodeURIComponent(keyvaluepair[0]) == queryParamName) {
return decodeURIComponent(keyvaluepair[1].replace(/\+/g, ' '));
}
}
return '';
}
google.load('search', '1', {style : google.loader.themes.GREENSKY});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl('011726169853656484522:gvikl69lrew');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
var options = new google.search.DrawOptions();
options.setAutoComplete(true);
options.enableSearchResultsOnly();
customSearchControl.draw('cse', options);
var queryFromUrl = parseQueryFromUrl();
if (queryFromUrl) {
customSearchControl.execute(queryFromUrl);
}
}, true);
</script>
</div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>
5、在WP后台新建一个页面，名字随便，选择页面模板 cse 就是刚刚传上去的那个文件。之后点击发表页面，但隐藏显示。
访问：新建的页面，诸如：http://zlz.im/search 这个是hzlzh 建的那个页面。此时你会发现出现了以个google的搜索条，并且可以使用了。
6、现在我们有了一个正常使用的search 页面，下面开始对首页的搜索条进行修改，注意上面和下面代码中 红色 部分，这个根据不同的博客，不一样，用了一个正则来处理传递参数，比如hzlzh的：
<form method="get" id="searchform" action="http://zlz.im/search/"> <div><input type="text" value="Click Enter..." name="q" id="search_input" onfocus="this.value = this.value == this.defaultValue ? '' : this.value" onblur="this.value = this.value == '' ? this.defaultValue : this.value" /></div> <div><input type="submit" alt="search" id="search_button" /></div> </form>
7、大功告成，现在你要做的就是优化 CSS，使之看起来跟你的博客很搭！在Google控制面板选择 [外观]-[搜索元素]-[压缩视图]-[自定样式]
8、如果是主题作者，建议在后台加入search选项，集成这个功能，唉~~折腾！
PS：Google Site Search 和 Google analytics 和 Google adsense 都是相当的完美，自己折腾去吧~
PS: 一张配置页面的选项截图：http://img.zlz.im/google/google-cse.png
- Pingback on 2010/08/08/ 13:04 
这个收藏了，准备用上
没能占据沙发··
这个主题越看越舒服。。
@QiQiBoY: 这话中听，总算有效果了
CSS是关键…要做得跟这主题很搭不容易呢~~
@MOPVHS: 慢慢调整呗，一定能无风嵌入滴
@HzlzH: 又忍不住来看..主题真的好养眼好养眼~~~
@MOPVHS: 好高兴啊，又有更多的动力了，争取越做越完美
我记得inove主题已经做到集成了…
@掌柜的马甲: 很多主题集成GG搜索都是非做的一项了
每次看你的主题都忍不住上上下下拉滚动条看看 ~ 太顺眼鸟 ~
果然好契合！我回头也看看
非常详细啊，我也整合了
@小付: 不错，成功+1
@小付: 终于碰到川大的小付了~~~
其实可以不新建页面的，在模板上加判断
@bolo: 对啊，这个习惯问题吧，links tools archives 这些都是单页面模板，再多个也不多
你这搜索怎么没广告。。？莫非勾选了非营利组织的去广告选项……
@Ray Chow: 嘿嘿，无广告就是最好滴，我没勾选，直接就没有广告，这是新版滴好处。貌似勾的话是要加钱的
@HzlzH: 没勾选的话，应该是广告还没生成，我今天刚弄的时候没广告，等到现在就有了。勾选了是不用钱的，但如果不是非营利组织勾选了算是违反协议吧。
@Ray Chow: 是会违反，好在私人博客通常都是非营利的
@HzlzH: 仅适用于已注册的非营利组织、大学和政府机构
@Ray Chow: 你的不也没广告么，难道你说的是那个google 水印？
恩，不错，把那个logo也给去掉了
@万戈: 那个logo 没有去掉啊，在内页的搜索天还在，首页的参数传进去了而已
点击提交后，仍然是刷新首页，请问什么问题？
@nhhcc: 已经帮你解决了，你是WIN主机，URL rewrite功能开不起来
我直接用的Google提供的搜索代码。
老兄、、怎么解读代码？
@liheqi168: 你要我解读什么？
@HzlzH: 那原件我丢了
不过想问问–像一些网络游戏的RES文件怎么打开
我就试过一次打开
但打开的全部都是乱七八糟的代码
当时我不懂代码
就没研究下去了
@liheqi168: 这个RES文件我没解过，你要破解网游的传递信息？估计信息又被加密！
@HzlzH: 是的
用VB打开时显示加密的
但我就是忘了我是用哪个打开的
一大堆应用软件
我怨念了……前几天折腾这个要死要活的，都放弃了
收藏之，过段日志再用上……
感觉现在会用博客内的搜索还不多……
很少有用到哦·
不过还是拜谢了~
额，到了CSS这步一直搞不好
@Firm: CSS其实很简单，你把主站的色彩基调存下来，之后会很搭
其实直接把cse.php改为page-search.php就行了，你打开search页面会直接使用它
@zwwooooo: 这招好
@zwwooooo: 自动识别啊，我怕大家无法理解 自定义模板 这个概念，还是一步一步来的清晰
@HzlzH:
对噢 直接把cse.php改为page-search.php就行了
那可比这个省事多了
@zwwooooo: 我也是这样想的，开始想以为这样有什么别的用处，结果这样一来，好难得搞CSS哦~~
对我无用无用 无用耶
好神奇哟。
做出来了，但是搜索结果的布局占满了整页，郁闷。
@Solo: 这个css你调整下宽度，默认的是自适应宽度的
@HzlzH:
css是调用google的，我不可能放在我的空间里吧。
@Solo: CSS可以自定义的啊，覆盖原来路径中的一些颜色设置什么的，我就是这样设置的啊
先占位，收藏备用了。
顶一下，欢迎回访并加友链。
我怎么感觉有点难呢
@有点蓝: 哪一步有难度？我可以再写细点
站内搜索在我的站一点也不实用，我的小站还能搜索什么东西
@yetone: 这个不一定，我就经常用别人的站内搜索，很方便最快速度找到自己想要的
1
2
正则处理只要是一样的字母就可以对吧
为啥结果总是404呢
@snowxh: 建议直接使用上面代码，替换掉搜索唯一ID就好了，保证可用！！
@HzlzH: 啊囧好了 bow&thx
这功能不错，收藏了先，主题上下快速拉动像极了赛车跑道
@N: 呵呵，也有人说是像铁轨，感觉赛车跑道更像
我试着把这方法运用到emlog去，应该都是大同小异
@学夫子: 是啊，就是一个form的问题
一直这么做。。
不过样式没优化
这个确实很有用！
很好，这个不错！！
好教程，学习了
这个得学习
楼主，自定义搜索页面隐藏不显示，请问怎么隐藏呢？我使用了WordPress3.0的自定义菜单，所有根本没有网上一堆人说的“wp_list_pages”方法。谢谢！
@polaris: 自定义菜单的时候不是可以选择性的显示 pages 么？你不要选search page 就好了 3.0 有的功能
开始也折腾过这个，但是美化的好丑，这个方法不错~~~
“5、在WP后台新建一个页面，名字随便，选择页面模板 cse 就是刚刚传上去的那个文件。之后点击发表页面，但隐藏不限是。”
最后“但隐藏不限是”的显示大错了~~~~
@煎豆: 谢谢提醒 已经修改
无广告感觉很不错。
博客能给个主题你整合下谷歌搜索吗？我代码白痴一个，无法整合到原搜索框里。THX
@MK: 就在本文啊，我写的特别详细，所有我用过的文件源码都在这里。你只要按步骤，绝对成功，因为已经有很多很多的朋友成功整合！
不知为什么，有些识别不出网址中带有横杠的地址，例如本来网址是：www.xxx.com/haha-ti.html的，但是搜索出来打开的是“www.xxx.com/hahati.html”，导致页面打不开。另外正则传参部分不懂怎么根据自己的博客修改哦
帮忙看看吧。
@liveme: 不可能啊，使用的是google 的搜索结果，所有页面都是gg 收录过的，链接地址务必是正确的，你是不是使用的是本站的搜索，导致传参错误？
我博客的google自定义搜索引擎一直得不到搜索结果，为什么呢？谢谢，请指教.搞了一下午还是得不到google的搜索结果，获取不到搜索框中的搜索关键字
呵呵，能搜索评论吗？
@Jessy: 能，这个是全站检索
@HzlzH: 最近换了域名了，留个信，记得以后到新的地址哦
不错，今天刚从你这里学习了添加Google自定义搜索，收获不少。
google ADSENSE 被封了，但为何自定义搜索还能用呢？？？
原来是这么做的啊。呵呵，弄会了，我自己的网站，也弄下啊。
会不会挨GFW墙？
第n次看这篇文章了
看起来很简单，还是不敢弄，对我来说太复杂。
折腾好了··谢谢教程
每换一次主题,就来看一次,呵呵
我在我用来试验的弄好了，不过不能用。http://houyonglu.net16.net/?page_id=169
请问是为什么？
另外，我的主题中没有找到类似(/q=([^&]*)(&|$)/);的代码。我的代码是这个样子的：
<form method="get" id="searchform" class="searchform" action="/”>
<input class="searchInput" type="text" value="” name=”s” id=”s”/>
希望您能帮我，谢谢您。
已经解决问题了，谢谢您的教程。
@小甘: 我才更换了新主题，还没有抽时间整合这个功能，过几天就加上
第六点没看明白，是用
这段代码替换红色那段代码吗？
@小甘: 红色部分那个q 每个博客不一样，你可以看看你默认是什么 就是什么
很有用，用上了！