搜索模块几乎成为了信息性网站的标配组件，对于博客来说，更是必不可少的东西。有了搜索就可以快速的定位你的文章。本节就来讲解如何制作博客的搜索模块。
制作搜索表单
搜索模块的实质就是一个表单而已，将搜索的内容，提交给 WordPress ，然后由系统查询返回结果。别告诉我你连一个 HTML 的表单都写不出来，如果真的，请先回去学习一下 HTML 吧，因为这是制作主题必备的基本能力。下面我直接给出一个搜索表单。
<form method="get" action="">
<input type="text" name="s" />
<input type="submit" value="GO" />
</form>
上面就是一个非常简单的搜索表单，有一个 文本框 和一个 提交按钮。WordPress 系统的搜索模块，接受 get 方式发送的数据，同时要注意它的 action 地址，为博客的首页。同时要注意，对于搜索框，必须要对它设置 name 属性值为 s ，这样 WordPress 才能接收搜索字符串。所以，一个可用的 WordPress 搜索表单应该这样写：
<form method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" />
<input type="submit" value="GO" />
</form>
进一步的优化
单纯的一个表单是不太好的，我们可以加一些修饰，这种修饰包括交互性的修饰、外观的修饰。为了尽量简单照顾初学者，这里不讲外观的修饰，尽量不涉及 CSS 设计相关的内容。下面说一下搜索框的简单的交互性修饰。
通常，我们需要在打开页面的时候，自动将光标聚焦到 搜索框 中，这样可以让用户在敲击键盘的时候，可以自动的在输入框中输入，而不需要让用户手动找到搜索框。实现这个效果，需要为表单加上 autofocus 属性。
此外，我们通常希望能告诉用户，这是一个搜索框，最好的方法就是在搜索框中填写说明文字，当用户点击聚焦的时候，文字自动消失。实现这个效果，可以通过两种方法：1，HTML5 的 placeholder 属性。2，通过一段 JavaScript 代码。第一种方法很简单，直接把说明文本当做这个属性的属性值，即可显示出来。但是这是 HTML5 中新增的属性，所以在早期的浏览器中，不会被支持。那样的话就不会显示说明文字了。所以我更推荐的是下面的这段 JavaScript 代码：
onblur="if (this.value =='') this.value='搜索一下'" onfocus="this.value=''" onclick="if (this.value=='搜索一下') this.value=''"
稍懂 JavaScript 的朋友就能看出来这段代码的意思，即：当光标激活或者点击文本框的时候，判断值是否为空，如果为空，就让值变成“搜索一下”。当焦点移出文本框的时候，会检测文本框的内容，如果为空，就自动变成“搜索一下”。如果你实在是看不懂，就不用管了，直接复制上去就可以了。
最终的版本
我们在 myTheme 主题中，找到边栏模块（id=“sidebar”），在下面新建一个用于搜索的 div 块，然后把代码复制上去：
<form method="get" action="<?php bloginfo('home'); ?>/">
<input type="text" name="s" onblur="if (this.value =='') this.value='搜一下又不会怀孕...'" onfocus="this.value=''" onclick="if (this.value=='搜一下又不会怀孕...') this.value=''" autofocus />
<input type="submit" value="GO" />
</form>
这样就完成了一个简单的、没有样式的博客搜索模块了。
完成之后，现在就可以搜索一下看一下效果了哦！
