编辑“设置WordPress主题表单样式”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress开发文档|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
WordPress的每个主题至少有两个表单：查询表单和评论表单。如果用户希望制作[http://www.wordpress.la/theme.html WordPress主题]或需要调整正在使用的主题的表单，可以自己设置表单，使之与主题整体相匹配。

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

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

[[Image:180px-searchform 1.png|WordPress主题表单样式]]

查询表单示例

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

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

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

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

===浏览器表单存在的差异===

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

[[Image:180px-comment-form-example-too-wide 0.png|WordPress主题表单样式]]

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

===宽度===

利用输入框和用户可用的文本区在表格中输入数据。样式表单和模板文件的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>

[[Image:Cup-O-Joe-by-callistawolf-searchform 0.png|设置WordPress主题表单样式]]

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

[[Image:180px-journalized-winter-theme-search-form 0.png|设置WordPress主题表单样式]]

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的子容器，可在选择器中进行样式设计。

[[Image:180px-garden-log-theme-search-form 0.png|设置WordPress主题表单样式]]

Garden Log主题的查询表单

#searchform input 

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

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

#searchsubmit 

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

[[Image:Macosx-safari-search-button 0.png|设置WordPress主题表单样式]]

[[Safari]]浏览器（Mac OS X操作系统）

[[Image:Macosx-firefox-search-button.png|设置WordPress主题表单样式]]

[[Firefox]]浏览器（Mac OS X操作系统）

*除Safari与Camino外，所有浏览器都支持查询表单背景色和文本颜色的设置，但不同浏览器上的按钮会有所不同 
*用户在Opera上使用背景色时，Opera会更改查询按钮的形状 
*Mac与Win操作系统上的Opera浏览器 、Safari浏览器以及Camino浏览器不支持按钮上的边框设计 
*除Safari外，所有浏览器都支持字体粗细设置和字体类型设置 
*不推荐用户自行定义按钮宽度，无论用户使用浏览器规定的何种字号，按钮宽度都会与按钮上的文本内容宽度大致相同 

==评论表单==
评论表单位于comments.php 或commentspopup.php文件中。在WordPress的Default主题中，如果将评论表单作为已有的网页来看，其显示结果是：

 < h3 id="comments">One Response to "Hello world!"</h3> 
   < ol class="commentlist">
      < li class="alt" id="comment-1">
         <c ite>
  <a href="http://example.org/" rel="external nofollow">Mr WordPress</a>
         </cite> Says:<br />
           < small class="commentmetadata">
             <a href="#comment-1" title="">Date and Time</a>
           </small>
            < p>Hi, this is a comment.</p>
      </li>
   </ol>
  < h3 id="respond">Leave a Reply</h3>
 < form action="http://example.com/blog/wp-comments-post.php" method="post" id="commentform">
   < p>
       <input name="author" id="author" value="" size="22" tabindex="1" type="text">
          < label for="author">
             <small>Name (required)</small>
          </label>
   </p>
   < p>
       <input name="email" id="email" value="" size="22" tabindex="2" type="text">
          < label for="email">
              <small>Mail (will not be published) required)</small>
          </label>
   </p>
   < p>
       < input name="url" id="url" value="" size="22" tabindex="3" type="text">
          < label for="url">
             <small>Website</small>
          </label>
   </p>
   < p>
       < small><strong>XHTML:</strong> You can use these
       tags:....</small>
   </p>
   < p>
       < textarea name="comment" id="comment" cols="100" rows="10" tabindex="4">
       </textarea>
   </p>
   < p>
       <input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
       <input name="comment_post_ID" value="1" type="hidden">
   </p>
 </form>
 </div>

[[Image:180px-mx4-theme-comments-form.png|设置WordPress主题表单样式]]

MX4 主题的评论表单

评论表单的各个独立区域都使用样式参照，但Default主题却没有详细划分评论区域，也没有样式参照（尽管添加这些功能不是难事）。

<nowiki>#commentform</nowiki>是整个表单的包装器，但 #commentform的样式设计可能会将 #commentform作为CSS父子关系的一部分。

用户可以通过背景颜色或背景图来设计评论表单，为它添加边框，也可以更换字体颜色、字体类型、字体粗细，进行文字修饰等。推荐用户单独定义这些设计元素的宽度。记住，评论内容的宽度直接影响评论表单的宽度。固定的评论内容宽度和表单宽度会覆盖侧边栏。

h3 #comments

为“该日志的评论总数”标题设计< h3>标签

<nowiki>#commentlist ol </nowiki>

为评论列表设计“评论序号列表”

.alt li and #comment-n 

评论列表项有两个样式参照。一个是alt类，另一个是字母n所指定的评论编号。通过这种方式我们可以分别设计评论列表，也可以利用WordPress插件来设计评论列表。

cite 

cite标签可为“Name says:（XX人评论说到：）”添加边框，并链接到评论人的URL地址上。

.commentmetadata small 

< small>标签拥有一个commentmetadata类，该类可设定日志的日期和时间。

ol #commentlist p 

在评论序号列表中对评论段落进行设计

<nowiki># respond h3 </nowiki>

设计“Leave a Reply（欢迎进行评论）”的标题

<nowiki>#commentform </nowiki>

设计输入评论区域的样式。每个输入区域都有独立编号。

#author 

评论者输入区域的编号。

<nowiki>#comments small </nowiki>

< small>标签可围绕评论提交框中的文本，也可以围绕标签列表（可用于评论）中的文本。

<nowiki>#email </nowiki>

评论者邮件的编号。

[[Image:180px-impressionist-theme-comment-form.png|设置WordPress主题表单样式]]

Impressionist主题的评论框

<nowiki>#url</nowiki> 

评论者[[URL]]的编号。

<nowiki>#comment </nowiki>

评论输入区的编号。这只是对输入框的设计，最终的评论内容尚未设计完成。

<nowiki>#comment #submit </nowiki>

Classic主题中有两个提交按钮，分别用于提交查询和评论。这里指的是用于提交评论的按钮。提交框与用户在搜索框中设计的提交按钮类型相同，两者适用原则相同，在跨[[浏览器]]上出现的问题也可能相同。

用户可以在模板文件comments.php 或commentspopup.php中设置评论框的行数和列数以决定评论输入框的大小：

 < textarea name="comment" id="comment" cols="100" rows="10" tabindex="4">  
 </textarea>

==其它表单元素==
'''下拉式列表'''

有些WordPress表单插件要求使用带有下拉式选单的表单。下拉式选单在设计上有些限制，下面是需要注意的两点：

'''下拉式表单的宽度'''

为方便起见，我们可以利用已定义的下拉式选单容器的列宽来决定下拉选单的宽度与输入框的宽度。因此如果该列宽是一个以像素为单位的固定列宽，我们定义下拉选单的宽度时也应以像素为单位。

'''下拉式表单的行高'''

为保证选单能够根据浏览器定义的字号自动调整行高，最好的办法是先在下拉式选单中以em为单位设置行高。如果不这么做，无论字体多大，下拉式选单的高度始终不变，使用时可能会造成不便。可首先将行高设为2em，然后再根据不同浏览器对字号的设置进行调整。

==实时评论预览==

使用实时评论预览插件的预览效果

设计评论表单时可以考虑添加一个WordPress评论预览插件或php脚本。在[http://wordpress.org/extend/plugins/tags/comments Comments Plugins List]中可以找到具有类似功能的插件。

在评论区的什么位置上显示评论预览效果也是需要考虑的问题。有些主题开发者会将评论预览显示在评论表单的上方或下方，而另一些主题开发者会缩小评论输入框，在输入框旁的空白部分或评论者名称、电子邮件以及URL输入区旁显示预览效果。

设计评论预览效果时，还需要考虑到主题的全局效果，因此设计前最好翻看插件开发者的说明文档，了解该插件所使用的标签和CSS引用是否与主题产生冲突。

[[Image:180px-comments.png|设置WordPress主题表单样式]]

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|W]]
[[category:WordPress网站开发|W]]
[[category:WordPress开发文档|W]]