设计主题表单样式

0条评论

设计主题表单样式

WordPress的每个主题至少有两个表单:查询表单和评论表单。如果用户希望制作WordPress主题或需要调整正在使用的主题的表单,可以自己设置表单,使之与主题整体相匹配。

WordPress表单样式

Web表单设计是网页设计的一种,受到CSS和浏览器影响。W3C的规定中表示用户可以设计web表单元素,但各个浏览器也有自己的规定。

我们这里关注的是设计的实用程度。下面我们会逐步了解WordPress中可行的表单设计以及如何在所有操作系统或浏览器(可能不包括Safari/Camino,以及Opera)上进行表单元素设计。

查询表单示例

若WordPress自带的Classic主题和Default主题的评论表单和查询表单相同,我们会选择Default主题的表单进行研究。这是因为大多数WordPress主题的设计都基于Default主题。

设定指定“表单元素”的样式后,该样式会被应用到WordPress网站内的所有表单上。用户可能希望查询表单和评论表单具有不同样式,这时可以用样式引用ID做改动。

设计表单后应该对表单进行测试。尽量在多个浏览器上测试,并且需要验证代码的可用性。

需要考虑的问题

在WordPress中进行表单设计时需要考虑到以下问题。

浏览器表单存在的差异

几乎在每个操作系统与浏览器的组合中,按钮与其它表单元素看起来都有很大差异。用户在不同操作系统与浏览器的组合中设计的按钮也有很大差别。例如,无论在CSS中怎样定义,Safari浏览器用户和Camino Mac操作系统用户看到的都是相同的白色/灰色胶囊状按钮。幸运的是,即使按钮看起来不算赏心悦目,运行起来仍然是正常的。

评论表单宽于页面容纳范围

宽度

利用输入框和用户可用的文本区在表格中输入数据。样式表单和模板文件的HTML/XHTML代码中规定了这些输入框和文本区的大小。如果用户在侧边栏中使用的查询表单宽度为200px,而侧边栏的宽度仅设为150px,运行时会出错。使用评论表单时情况也是如此。输入框和文本区的宽度必须小于其所在位置的宽度。

填充和页边距

用户可以在很多表单样式的适当位置上添加填充或页边距。添加时注意上文所述宽度问题。例如,如果页边距为5px,填充物宽度为10px,而输入框宽度为100px,三者宽度共计130px(输入框左右都有页边距与填充物)。侧边栏宽度为150px,刚好能够容纳填充、页边距和输入框。此时用户如果改动侧边栏和页边距,可能会破坏整体布局。

了解CSS的父子关系

CSS的父子关系是指,除非特别说明,一般情况下所有子容器都会继承父容器的样式。例如,如果用户为整个网站设置了<small>标签的样式,并且用在日志元数据以及其它区域内,那么该样式同样会出现在评论表单中。如果用户需要更改该标签的字体大小,必须调用标签自身的样式 #commentform small。如果用户需要控制<small> 标签在评论表单中的使用样式,并且每次使用时样式有所不同,可以用<t>#author small</tt> 以及 #email small 等样式来改写该标签的父样式。

做任何改动前,请先备份WordPress主题文件。

查询表单

查询表单由 searchform.php创建。本文列出了默认情况下查询表单中可以被设计的区域。用户可以添加各种样式类,从而更好地控制查询表单的整体外观。

<li id="search">
  <label for="s">Search:</label>   
    <form id="searchform" method="get" action="/index.php">
      <div>
         <input type="text" name="s" id="s" size="15" /><br />
         <input type="submit" value="Search" />
      </div>
     </form>
</li>

查询表单的样式存储在WordPress主题的styles.css样式表单文件中。查询表单显示在侧边栏中。尽管查询表单本身出现在label标签后方,但表单仍然属于表格的一部分。根据不同主题开发者的设计需求,查询区域可能包括/或不包括以下内容:

Journalized Winter主题的查询表单

#search 

查询表单的整体样式

#search label 

必要时可用于设计label标签

#searchform 

用于设计表单本身。#searchform 还可定义表单的宽度、背景色、图片、字体、字号以及边框。为表单设置宽度时需要一定技巧。如果形成sidebar.php的某列的宽度是固定的,那么searchform的宽度应小于该列外部容器。若列宽150px,searchform宽度应为146px。若列宽以em为单位,searchform也应以em为单位。

searchform样式中也可加入填充和页边距,但添加时要慎重。如果searchform宽度是146px,填充和页边距的总宽度不能超过4px。

#search div 

这是一个未标记的div标签,是父容器search的子容器,可在选择器中进行样式设计。

Garden Log主题的查询表单

#searchform input 

设计查询表单的输入区时,选择器会起到一定作用。#s的另一种样式参照可以与#searchform input共同使用,也可以替代#searchform input。#searchform input可用来设计背景色、字体、字号、字体颜色以及其它用户需要在输入框中输入的内容。Safari浏览器无法识别背景色与文本颜色,因此该浏览器中的文本输入框显示为白色,其中的字体则显示为黑色。几乎所有浏览器都支持字体粗细设置和字体类型设置。按百分比设置字体大小是最好的字体选择方式,但不同浏览器的设置会有所不同。

#searchform input样式中也可加入填充和页边距,但添加时同样要慎重。输入框的宽度直接影响到用户输入查询关键字时所占用的空间。输入框宽度要小于侧边栏宽度。

#searchsubmit 

用于WordPress的Default主题。可用于设计查询按钮或提交按钮。各个浏览器对按钮的支持方式有显著差异,但我们仍然可以设计出可用的按钮。以下给出一些浏览器的查询按钮示例: