WordPress主题教程（13）：搜索框美化

大家好，今天我给大家讲解Wordpress主题教程的第十三讲：搜索框的美化。由于WordPress默认的搜索框不太美化，影响用户体验，所以我们需要个性化网站的搜索框。那么如何美化搜索框呢，这就是今天要讲的内容。
打开style.css文件，我们可以看到input[type=”text”]，这个就是搜索框的DIV描述。只要在这里定义搜索框和提交按钮就可以了。谭海波博客的搜索表单在主导航栏下方，所以我建立了一个searchbar的DIV，然后再定义这个searchbar下面的搜索框和提交按钮。下面是CSS代码，大家参考一下：
#searchbar {
 width: 980px;
 height: 35px;
 background: #f1f1f1;
 border-left: 1px #ddd solid;
 border-right: 1px #ddd solid;
 border-bottom: 1px #ddd solid;
 margin: 0 auto;
 padding: 0 10px;
 line-height: 35px;
}
#searchform {
 float: right;
}
#searchbar input[type=text] {
 width: 250px;
 height: 18px;
 background: url(files/img/sys/searchtext-bg.gif) no-repeat #fff;
 margin-top: 5px;
 padding-left: 30px;
}
#searchbar input[type=submit] {
 width: 50px;
 height: 24px;
 background: url(files/img/sys/searchsubmit-bg.gif) no-repeat;
 border: none;
 margin-top: 5px;
}
定义好了DIV内容以后，就可以在相应的地方插入代码了。下面的代码是谭海波博客主导航栏下方的搜索表单的代表，大家参考一下：
<div id="searchbar">
 <div id="searchform"><form action="/"><input type="text" name="s" id="s" /><input type="submit" value=" " /></form></div>
 <div><strong>热门标签：</strong><?php wp_tag_cloud(); ?></div>
</div><!-- #searchbar -->
是不是很简单，这样就可以了。其实比较方便的方法就是直接在input[type=”text”]定义，然后使用search_form函数就可以了。不过使用这种方法有一个问题，因为在一个网站的搜索表单可能样式位置都不一样，统一的定义可能会造成错位，所以谭海波博客选择了使用的地方才个性化定义。
关于本讲课程如果大家还有什么疑问的话，欢迎加入谭海波博客官方QQ群，和大家一起讨论吧。群号在谭海波博客首页的右边侧栏最下方上有。好了，今天就讲到这里了，谢谢大家！
原文链接：http://tanhaibo.net/2014/03/wpthemes-course-searchform.html