iNove主题在后台的“主题选项”中设置了一个定制Google自定义搜索的功能，以优化WordPress的搜索结果。我一直没有启用这个功能，直到看到A-shun同学折腾后的搜索页面，恍然大悟，原来我也是想要搜索结果在当前主题内展示，而不是跳转到Google的页面。我也做出了一些改变，把搜索结果页面整合到了主题中，具体的效果，可以到NeoEase和Let's whisper随便搜索些东西来比较一下。 [比较这里吧：前 | 后]
其中参考了我爱水煮鱼的教程，如果你不是用iNove，可以直接看那篇教程。以下我就针对iNove，开始：
1、登陆到Google自定义搜索，创建你的自定义搜索。（此处略去x百字）
2、创建一个搜索结果模板。把下面代码保存为cse.php，上传至iNove主题的文件夹。（cse意为custom search engine，你可以换成其他）
/*
Template Name: cse
*/
?>
<?php get_header(); ?>
<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>
<?php get_footer(); ?>
var googleSearchFrameWidth =605为搜索结果页面的宽度，iNove默认的宽度是605。
3、在WordPress中创建一个页面，比如我的，地址为http://www.whisperer.name/cse，标题为Search Result，模板选择刚刚创建的cse。
然后在导航栏隐藏这个页面，在iNove的文件夹找到templates/header.php，找到下面一行：
改成，
其中exclude=41意思是在导航栏隐藏这个cse页面，41是这个页面的ID，在/wp-admin/edit-pages.php页面，鼠标悬浮在页面的标题上，在下面状态栏就可以看到post=41。
4、定义搜索框。仍然是templates/header.php，找到下面代码:
<div class="content">
<input type="text" class="textfield" name="q" size="24" />
<input type="submit" class="button" name="sa" value="" />
<input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
<input type="hidden" name="ie" value="UTF-8" />
</div>
</form>
改成，
<div class="content">
<input type="hidden" name="cx" value="<?php echo $options['google_cse_cx']; ?>" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" class="textfield" id="searchtxt" name="q" size="24" />
<input type="submit" class="button" id="searchbtn" name="sa" value="" />
</div>
</form>
其中第一行的< ?php bloginfo('wpurl') ?>/cse是刚刚你创建的搜索结果页面的地址。
5、在iNove的主题选项中，勾选使用Google自定义引擎，填上你的CX值。
这样，所有的工作都做完了。你可以随时在WordPress默认搜索和Google自定义搜索之间进行切换。并且不需要再另外用css定义搜索框了，已经沿用原来的搜索框样式了。
PS：这个是可以在后台切换两种搜索模式，应该可以在搜索框旁边定义一个按钮，让访客可以自行选择。刚入WP的时候在某个博客上看到过，谁知道怎么定义的话不妨共享出来。
2009/09/24 update: 在IE6下出现错位的同学，请更新一下第4步中的代码，感谢bigyang 。
沙发。。。
不错的教程。。
@A.shun
好牛X的速度~~
@whisperer
那是。。闻到沙发的味道飞奔过来的 😢
@A.shun
呵呵 这个方法有个好处，可以完全沿用原来的搜索框样式。我看到你那儿搜索框里的Searchtip没有了，应该可以再加上吧？
你才加上的功能，看起来不错。无意中看到你右下角的箭头，呵呵，不错的细节噢。
博主你真是人才呀，我佩服！
@MuMu‘S
那个箭头 嗯 故意做得比较隐蔽，鼠标放上去就明显啦 哈哈
@mark
不敢当，不也是参考高手的么 呵呵~
http://i29.tinypic.com/xqe2ia.jpg
这是什么情况咧？我搜索的关键字是inove^^
期待右下角那个箭头的教程：）
原来whisperer现用的主题修改于iNove呀？不过感觉比原先还漂亮许多lol
请教whisperer：
问题描述
1，按照这篇教程美化搜索框后，首页的搜索框的背景色会因为鼠标点进去而变成白色
http://i32.tinypic.com/fkyz3p.jpg
2，原先的那个小放大镜搜索按钮失效，变成在下面有个隐形的按钮
http://i26.tinypic.com/35akc1z.jpg
3，搜索一个东西后，那个搜索框却变得完美无缺了。。。
http://i30.tinypic.com/qxkjn4.jpg
找不到原因 😥 希望whisperer能帮忙看看，谢谢：）
用Firebug对比不同页面，发现首页的代码会突然多出来一段
其他页面的代码是：
input class="textfield searchtip" type="text" size="24" name="q"
而首页的是：
input class="textfield searchtip" type="text" size="24" name="q" style="border: 1px solid rgb(126, 157, 185); padding: 2px;"
怎么去掉多出的部分呢？
并且，CSS里会多出
element.style {
border-bottom-color:#7E9DB9;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color-ltr-source:physical;
border-left-color-rtl-source:physical;
border-left-color-value:#7E9DB9;
border-left-style-ltr-source:physical;
border-left-style-rtl-source:physical;
border-left-style-value:solid;
border-left-width-ltr-source:physical;
border-left-width-rtl-source:physical;
border-left-width-value:1px;
border-right-color-ltr-source:physical;
border-right-color-rtl-source:physical;
border-right-color-value:#7E9DB9;
border-right-style-ltr-source:physical;
border-right-style-rtl-source:physical;
border-right-style-value:solid;
border-right-width-ltr-source:physical;
border-right-width-rtl-source:physical;
border-right-width-value:1px;
border-top-color:#7E9DB9;
border-top-style:solid;
border-top-width:1px;
padding-bottom:2px;
padding-left:2px;
padding-right:2px;
padding-top:2px;
}
其他页面就没有这段，真是抓狂啊~~~~
google搜索自己JS的问题，我shit~！解决了，折腾了我1个多小时，抓狂，终于搞定了 😥
@Rui
抱歉白天出门 没能看到这么多问题~~~ 😳
我这儿的搜索昨天还是正常的，网上搜索了一下发现与我无关，是Google的问题，等会儿去反馈下~~谢谢提醒~~
问题解决了就好，呵呵。
右下角的箭头，根本不需要什么教程，呵呵，iNove不是有个返回顶部的功能么，简单的css控制下就行了：
a#gotop {
background:url(img/top.png) no-repeat;
position:fixed;
bottom:10%;
right:10px;
cursor:pointer;
width:35px;
height:44px;
}
a#gotop:hover {
background:url(img/top.png) 35px 0;
}
图片和具体的width、height可以自定义.
@whisperer
一会儿继续折腾^^
Wonderful, 我也改成這樣了. 哈哈~
恩，好东东，回头折腾下
你可以参考一下我的 Blocks2 主题, 有这样的功能.
创建的页面必须使用永久的链接吗？如果页面链接类似com/?page_id=9的话，还行吗？
@dreamtale
应该是没有问题的，你只要把第4步中的 /cse改成你相应的页面地址就可以了
比如：
/?page_id=9