我们在使用wordpress的过程中并不一定会喜欢它自身提供的搜索功能。因为它自身提供的搜索结果页面会显示类似page页效果的内容，那样可能会显示过多的文本内容，而搜索结果却并未高亮显示。这样不利于快速定位合理的搜索结果。
这里就是想使用google提供的自定义搜索功能来替换原有的搜索功能。具体的示例就如本站右手中侧的的搜索框所示。
wordpress中自定义AdSense搜索广告的示例
可以很清楚的看到，google AdSense搜索广告被整合进了wordpress模板当中。这其中主要有以下几个步骤：
- 正确生成AdSense搜索广告代码。这里有几处需要注意的内容：（以下全部假设博客网址为http://www.qiuworld.com）
选定的网站：指定要搜索的网站或网站列表时填写自己博客的网址，如：http://www.qiuworld.com。
打开搜索结果页：选择在“我的网站上打开搜索结果”选项，并输入显示搜索结果的网址，如：http://www.qiuworld.com/search/ - 下载并安装Google Custom Search Plugin，将生成的代码分别填入该插件的设置（Google Custom Search Configuration）页的Search Box和Search Results当中。搜索框代码填入Search Box当中，搜索结果代码填入Search Results框当中。并保存更改。
- 寻找到原模板当中的搜索框代码段，使用google搜索广告生成的代码替换原代码。并将搜索广告代码放入以search-form命名的层内。示例如下：
<div class=”search-form”>
<form action=”http://www.qiuworld.com/blog/search/” id=”cse-search-box”>
<div>
<input type=”hidden” name=”cx” value=”partner-pub-3900138411736885:i29mpk-hll4″ />
<input type=”hidden” name=”cof” value=”FORID:10″ /> <input type=”hidden” name=”ie” value=”GB2312″ />
<input type=”text” name=”q” size=”60″ />
<input type=”submit” name=”sa” value=”搜索” />
</div> </form> <script type=”text/javascript” src=”http://www.google.com/cse/brand?form=cse-search-box&lang=zh-Hans”></script>
</div> - 使用CSS文件控制搜索表单的显示。示例如下：
/************************************* +Search form *************************************/
.search-form {
font-size:1.2em;
background:url(images/search.png) no-repeat;
position:relative;
width:147px; height:44px; margin-bottom:10px;
}
/****************这里设置了搜索输入框的宽度，边距，边宽以及背景色******************/
.search-form input{
width:125px;
margin:14px 0 0 10px;
border:0px;
background:#f9f9f9;
color: #454545; }
/******************用于隐藏输入提交按钮*******************/
.search-form input[type="button"],.search-form input[type="submit"]{
display: none;
border: none;
color:transparent;
}
这样基本就设置完毕了。
转载请注明文章来自糗世界博客
