当前位置:首页 » WordPress » WordPress主题教程(13):搜索框美化 » 正文


WordPress主题教程(13):搜索框美化

发布日期:2014-03-06 07:38   来源:谭海波   本文永久链接
摘要:大家好,今天我给大家讲解Wordpress主题教程的第十三讲:搜索框的美化。由于WordPress默认的搜索框不太美化,影响用户体验,所以我们需要个性化网站的搜索框。那么如何美化搜索框呢,这就是今天要讲的内容。 打开style.css文件,我们可以看到input[type=……

大家好,今天我给大家讲解Wordpress主题教程的第十三讲:搜索框的美化。由于WordPress默认的搜索框不太美化,影响用户体验,所以我们需要个性化网站的搜索框。那么如何美化搜索框呢,这就是今天要讲的内容。

打开style.css文件,我们可以看到input[type=”text”],这个就是搜索框的DIV描述。只要在这里定义搜索框和提交按钮就可以了。谭海波博客的搜索表单在主导航栏下方,所以我建立了一个searchbar的DIV,然后再定义这个searchbar下面的搜索框和提交按钮。下面是CSS代码,大家参考一下:

定义好了DIV内容以后,就可以在相应的地方插入代码了。下面的代码是谭海波博客主导航栏下方的搜索表单的代表,大家参考一下:

是不是很简单,这样就可以了。其实比较方便的方法就是直接在input[type=”text”]定义,然后使用search_form函数就可以了。不过使用这种方法有一个问题,因为在一个网站的搜索表单可能样式位置都不一样,统一的定义可能会造成错位,所以谭海波博客选择了使用的地方才个性化定义。

关于本讲课程如果大家还有什么疑问的话,欢迎加入谭海波博客官方QQ群,和大家一起讨论吧。群号在谭海波博客首页的右边侧栏最下方上有。好了,今天就讲到这里了,谢谢大家!



关注谭海波博客官方微信公众平台
文章分类WordPress
文章标签:
本文永久链接:http://tanhaibo.net/2014/03/wpthemes-course-searchform.html
转载提示:除非注明,谭海波博客的文章均为原创,转载请以链接形式注明作者和出处。谢谢合作!

One Response to WordPress主题教程(13):搜索框美化

发表评论

电子邮件地址不会被公开。 必填项已用*标注