WordPress:Styling Theme Forms

Every theme for WordPress has at least two forms: Search and Comments. If you are developing a WordPress Theme or want to make some adjustments to your Theme's forms, you can customize your forms to match the overall Theme.

WordPress的每个主题至少有两个格式：搜索 和 评论。如果你正在开发 WordPress 主题或者想要更改主题的形式，你可以自定义形式来匹配这个主题。

WordPress 形式设计

Web Form styling is one of those areas of web page design that is part WordPress:CSS and part browser influenced. The W3 Consortium sets standards that say that form elements can be styled, but browsers tend to have their own "opinions." 网络形式设计是网页设计的一个区域，是CSS的一部分，而且部分受影响的浏览器。W3 Consortium设置了标准，显示样式元素是可以设计的，但是浏览器倾向与拥有自己的"选项。"

We will focus on what WORKS. We will look at what can be done to style forms in WordPress and how to customize your form elements in almost all OS/browser combinations (with the possible exception of Safari/Camino, and, in one case, Opera).

我们会集中于哪个能够运行。我们会看看可以操作什么来设计WordPress样式以及怎样在几乎所有的OS/浏览器结合中自定义你的样式（Safari/Camino，和，在一种情况下，Opera除外）。

thumb|right|Simple Search Form ExampleWhile the Comments and Search Forms in the Classic and Default Wordpress Themes are similar, we will look specifically at the Default Theme's form, since it is the Theme most WordPress Themes tend to be based upon.

thumb|right|简单的搜索样式例子虽然经典和默认WordPress主题中评论和搜索形式是相似的，我们会特别查看默认主题的形式，因为默认主题是大多数WordPress主题的根基。

Setting the styles for the specific "form element" will apply that style to ALL the forms within your WordPress site. Since there is the search and comment forms, you may want these to look different, so use the style reference ID to specify which element looks like what in which form.

为特别的"形式元素"设置样式，会将这个样式应用到你的WordPress站点内的所有形式中。因为有搜索 和 评论形式，你可能想要这些形式看起来不同，因此使用样式reference ID 规定各个形式中的element看起来是怎样的。

Once you have styled your forms, it is time to test them. Check them in as many browsers as possible and be sure to validate the code.

你一旦设计了自己的形式，就要对其进行测试。在尽可能多个浏览器中浏览这些形式，并且确定验证了代码。

需要考虑的内容

Here are a few other things to consider as you style forms in WordPress.

下面是你设计WordPress中的形式的时候，需要考虑的一些其它的问题。

Browser Form Variances

Buttons and other forum elements look different in almost every single OS/browser combination, and the level of control you have styling that button differs just as much between the different OS/browser combinations. For instance, Safari and Camino Mac users will see the same capsule shaped white/gray button, no matter what you define in your CSS. A background color/text color combo that works in almost any other OS/browser does not give you anything but that same white/gray capsule shape with black print in Safari or Camino. The good news is you will always get a workable button even if it looks unattractive.

；浏览器形式变化：按钮和其它论坛元素几乎在每个单独的OS/浏览器结合中看起来都不同，而且你对按钮设计的程度与不同的OS/浏览器结合之间的程度相同。例如，Safari和Camino Mac用户会看到同样的capulse拥有白色的/灰色的按钮，不管你在CSS中定义了什么。几乎在任何OS/浏览器中能够运行的背景色/文本色结合体绝并能使你在Safari或者Camino白色的/灰色的shape加上黑色的字体。幸运地是，你总是能够得到可使用的按钮，虽然这个按钮看起来并不引人注意。

thumb|right|Example of a comment form that is wider than its container thumb|right|比container宽的评论形式的例子

Column Width

Forms use input boxes and textareas allowing users to enter information into the forum. These are sized from within the style sheet and in the HTML/XHTML of the template files. Their width may work without consideration of the width of the parent container. This means that if you are using the search form in your sidebar at a width of 200px and your sidebar's width is set to 150px, you have a problem. Same applies to comment forms. The width of the input boxes and textarea needs to be less than the width of the container in which it resides.

；栏宽：形式使用输入框和文本区，让用户向论坛输入信息。这些区在样式表内部以及模板文件的HTML/XHTML中规定了大小。这些区的宽度的制定可能没有考虑到母container的宽度。这意味着，如果你在边栏中使用200px的搜索形式，而你的边栏宽度是150px，你就遇到了麻烦。有的适用于评论形式。输入框和文本区的宽度必须比承载它们的 container小。

Padding and Margins

Within many of your form styles, you may add padding and margins to position or create space around the forms. Make sure you add those measurements to your width and compare it with the column width of the container the form sits in. For example, a margin of 5px plus a padding of 10px adds 30px (add both sides!) to the 100px wide input box, bringing it to a total of 130px. Comprae this with the 150px width of the sidebar container, and it will fit. Change the width of the sidebar and that narrow margin of "safety" might be threatened and your layout may turn ugly.

Padding and Margins

在许多形式样式中，你可能添加在某个地方padding和页面空白或者在形式的周围添加空白。确定将这些添加在你的宽度范围之内，同时将整个宽度与形式位于的container的栏宽对比。例如，5px的margin加上10px的padding将30px（加上两边的！）加到100px的输入框，使得输入框最后为130px。将这个宽度与边栏container150px的宽度相比较，文本框能够适应。更改边栏的宽度，"保险"的狭窄的margin可能会受到影响，而且你的布局可能看起来很糟。

Understand the Parent/Child Releationship of CSS

The CSS Parent/Child relationship basic states that whatever styles are in the parent container will be passed down to the child container, unless specifically overwritten. For example, if you set your style for the <small> tag for your entire site, used within the WordPress:Post Meta Data Section, and elsewhere, that style will also be found in the comment form. If you want that particular tag's font size or look to be changed, you need to give it its own style such as #commentform small. Or if you want to control the styles for each of the uses of the <small> tag in your comment form, giving each a unique look, you could use <t>#author small and #email small and so on, overriding the parent styles for that tag.

了解CSS的母/子关系： CSS 母/子关系 基本知识显示不管母container中有什么样式都会传递给子container，除非特别的代替情况。例如，如果你将整个站点的 <small>标签设计样式，并且用在used within the 文章Meta Data部分，在其它位置，样式也是评论形式。如果你想要更改那个特别的字体或者外观，你需要赋予其特别的样式 例如 #commentform small。或者你希望控制评论形式中的每个<small> 标签的样式，使得每个标签拥有独立的外观，你可以使用i <t>#author small 和#email small 等等，取代那个标签的母样式。

Before making modifications, backup your WordPress Theme Folder.

在更改任何内容之前，备份年底WordPress主题文件夹。

搜索形式

The search form is found within the searchform.php. Here is a list of the individual areas of the search form which may be styled by default. You may add style classes to gain more control over the look of your search form.

可以在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>

<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>

left|Cup-o-joe theme search form example

left|Cup-o-joe 主题搜索形式例子

The styles found for the search form are in the styles.css style sheet file in your WordPress Theme. The search form itself sits within a list in the sidebar. While the form itself begins after the label, it is still a part of the form. Depending upon the Theme author's design needs, the search section may or may not include:

搜索形式的样式可以在你的WordPress主题的styles.css样式表文件中找到。搜索形式本身位于边栏中的列表内。虽然形式本身是在标签后开始的，标签仍然是形式的一部分。根据主题作者的设计需求，搜索部分可能或者可能不包含：

thumb|right|Journalized Winter Theme Search Form Example thumb|right|Journalized Winter Theme搜索形式例子

#search

The overall style for the search form.

#search

搜索表格的整体样式

#search label

Used to style the label tag, if necessary.

#search label

如果必要的话，用来设计label标签。

#searchform

Used to style the form itself. The #searchform can be used to define a width for your form, a background color and/or image, fonts, font sizes, and borders. Setting width for a form can be tricky. If the column that forms sidebar.php is a fixed width, then define a width for searchform that is just a bit narrower than the column it resides in. And use the dimension type and measurement. If the column is 150px wide, make your searchform 146px. If the column width is defined in em, use that.
Padding and margins can also be added to the searchform style, but take care. The measurements are cumulative. If the searchform width is 146px, you only have 4px to add margins and padding before you break the width of the sidebar.

#searchform

用来设计搜索表格。#searchform 可以用来定义你的表格的宽度，背景 色 和/或者 图像，字体，字体大小，和边框。为表格设置宽度有点技巧。如果形成sidebar.php的栏是定宽， 将searchform的宽度定义比searchform所处在的栏宽窄一点。并且使用尺寸形式和度量。如果栏是150px宽度，将你的searchform设置为 146px。如果栏宽度定义在em，使用那个。
Padding 和 margins 也可以添加到searchform 样式，但是要谨慎。尺寸是积累的。如果searchform宽度是 146px，你只有 4px的宽度来添加margins 和padding，这样你才不会破坏边栏的宽度。

#search div

This unlabeled div is a child container of the parent container search and may be styled from within that selector.thumb|right|Garden Log Theme Search Form Example

#search div

这个没有标记的div是母container search的子container，而且可能会在那个选择器内部设计。thumb|right|Garden Log 主题搜索形式例子

#searchform input

To style the input area for the search, this selector combination will work. There is also another style reference of #s that may also be used in addition or as a replacement for this style. It is used to sstyle the background color, font, font-size, and font color, and so on for the input box the user types in. Safari will not recognize background color or (text) color, and will always show the text input box as white with black text. All browsers seem to support font-weight declarations, and all seem to respect font-family. Internet Explorer 5 for the Mac and Safari do not recognize text-align declarations. Font size is best when defined as percentage, though different browsers tend to vary this a little.

Padding and margins can be used here, but again, these are dependent upon the browser's interpretation of the measurements. The input box's width is critical to the amount of space the user has to enter their search keywords. It may be defined as a pixel or percentage based width and must "fit" within the width of the sidebar.

#searchform input

要设计搜索的输入区的形式，这个选择符结合体能够运行。也有#s的另一个样式参考，可能也会得到使用或者作为替换这个样式。用来设计用户输入内容的输入框的背景色，字体，字体大小，字体颜色，等等。Safari 不会识别背景色或者（文本）色，而且总是显示文本输入框为白色的带有黑色的文本。所有的浏览器似乎都支持font-weight 声明，而且所有的浏览器似乎都考虑到字体集。Mac和Safari的Internet Explorer 5 不能够识别text-align 声明。字体大小定义为百分比的时候，是最好的，虽然不同的浏览器试图不怎么改变这一点。

Padding 和margins 可以用在这里，但是，这些要取决于浏览器对度量的解释。输入框的宽度，对于用户可以在搜索关键词区输入多少内容，至关重要。搜索框可能以宽度为基础定义为像素或者百分比，但是搜索框必须"在"边栏宽度的内部。

#searchsubmit

Used by the Default Theme, this selector may be used to style the search or submit button. Buttons are where browser support varies the most, though styling a button will always give you a workable button, even if the style is not supported in a particular browser. Here are some tips regarding the various browsers:

#searchsubmit

由默认主题使用，这个选择符可能用来设计搜索 或者 提交按钮。按钮是浏览器提供最多的变化的位置，虽然设计按钮可能会向你提供可使用的按钮，即使某个特别的浏览器不支持样式。下面是关于不同的浏览器的一些小贴士：

frame|right|Safari (OS X) frame|right|Firefox (OS X)

frame|right|Safari (OS X) frame|right|Firefox (OS X)

• All browsers except Safari and Camino seem to support background-color and (text) color, though the buttons will look very different from browser to browser.

• 除了Safari和Camino之外，所有的浏览器似乎都支持背景色和（文本）色，但是不同的浏览器中出现的按钮会有所不同。

• Opera changes the button shape if you apply a background color.

• 如果你应用了背景色，Opera更改了按钮的形状。

• Opera Mac and Win, Safari, and Camino do not support any border styling on buttons.

• Opera Mac 和 Win, Safari, 和Camino不支持按钮上的任何边框的样式。

• All browsers except Safari support font-family and font-weight.

• 除了Safari外，所有的浏览器都支持字体集和font-weight。

• It is recommended that you not define a width on this at all, since it will be as wide as the text that fills the button, no matter what browser-defined font size the user picks.

• 建议你不要定义这个的宽度，因为这个会与填充按钮的文本宽度相同，不管用户选择的浏览器定义的字体大小是多少。

评论形式

The comments form are found within the comments.php or commentspopup.php. In the Default WordPress Theme, they look like this when viewed as a generated web page:

评论形式可以在comments.php 或者commentspopup.php内找到。在默认WordPress主题中，作为整个网页访问的时候，评论形式看起来像：

<h3 id="comments">One Response to "Hello world!"</h3> 
   <ol class="commentlist">
      <li class="alt" id="comment-1">
         <cite>
 <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>

<h3 id="comments">One Response to "Hello world!"</h3> 
   <ol class="commentlist">
      <li class="alt" id="comment-1">
         <cite>
 <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>

thumb|right|MX4 Theme Comments Form ExampleWhile individual sections of the comments feature styling reference, the Default Theme has no general comment division or group style reference, though one could be easily added.

thumb|right|MX4 主题评论形式例子虽然评论功能样式reference的每个部分是独立的，默认主题没有总的评论部分或者组合的样式reference，但是可以轻易地添加。

The #commentform is the wrapper for the whole form, though the styles above it may influence the #commentform as part of the CSS parent/child relationship.

#commentform是整个形式的wrapper，但是其上面的样式，作为CSS 母/子关系的一部分，可能会影响#commentform。 As with the search form, you can style this with either a background color or image, you can add borders, and you can change text color, font-family, font weight, text decoration, etc. You are better off defining width on each of these layout elements. Remember, like the search form, the width of the column in which the comments reside influences the width of the comments. If they are fixed, they may overlap the sidebar.

拥有搜索表格，你可以使用背景色或者图像，设计这个，你可以更改文本颜色，字体类别，字体粗细，文本修饰，等等。你最好在每个布局要素上定义宽度。记住，与搜索表格相似，评论所位于的栏的宽度，会影响评论的宽度。如果这个栏宽度是固定的，可能会与工具栏交迭。

h3 #comments

Styles the <h3> tag for the "number of responses to the post" heading.

h3 #comments

设计标头为"对文章的评论数目" 的<h3>标签

#commentlist ol

Styles the "ordered list" of the comments list.

#commentlist ol

设计评论列表的"有序列表"。

.alt li and #comment-n

The comment list items have two style references. The first one is the class alt and the second is the comment ID number signified here by the letter n. This allows them to be styled individually or through the use of WordPress Plugins.

.alt li and #comment-n

评论列表item拥有两个样式reference。第一个是类别alt，第二个是评论ID数字，在这里由字母n表示。这使得它们能够得到单独的设计或者通过使用WordPress插件。

cite

The tag cite frames the "Name says:" and link to the comment author's URL.

cite

标签cite制定"名称显示:"并且链接到评论作者的URL。

.commentmetadata small

The <small> tag has a class of commentmetadata which allows the date and time of the post to be styled.

.commentmetadata small

<small>标签拥有commentmetadata类别，能够使得文章的日期和时间得到显示。

ol #commentlist p

Styles the paragraph within the ordered list of comments.

ol #commentlist p

设计评论的有序列表内的段落。

#respond h3

Styles the heading for "Leave a Reply."

#respond h3

设计"留下回复"的标头。

#commentform

Style reference for the overall "form" for inputting comments. Each input area has it's own ID.

#commentform

输入评论的整体"形式"的样式reference。每个输入区拥有自己的ID。

#author

ID reference for the comment author's input area.

#author

评论作者的输入区的ID reference。

#comments small

The <small> tag is used in several places in the Classic Theme. This usage surrounds the text in the comment submit form and the text for the list of tags that can be used in the comment.

#comments small

经典主题中有几处都使用了<small>标签。评论递交框周围的文本的用法和标签列表的文本可以用在评论中。

#email

ID reference for the comment author's email.thumb|right|Impressionist Theme Comment Form Example

#email

评论作者的电子邮件的ID reference。.thumb|right|Impressionist 主题评论形式例子

#url

ID reference for the comment author's URL.

#url

评论作者的URL的ID reference。

#comment

ID reference for the comment input textarea. It does not style the final generated comment, just the input box.

#comment

评论输入文本区的ID referenc。没有设计最后产生的评论，只是设计了文本框。

#comment #submit

There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button. The submit form field is the same type of submit button you styled in the search form. The same issues and rules apply, and the same problems may occur crossbrowser.

#comment #submit

这是经典主题中的搜索和评论递交的两个递交按钮。这是递交评论按钮。递交表格和你在搜索表格中设计的递交按钮的样式是相同的。同样的问题，应用了同样的原理，而且在浏览器之间可能出现同样的问题。

The number of rows and columns that define the size of the comment textarea box can be set in the template files comments.php or commentspopup.php. You can change this here:

可以在模板文件 comments.php 或者 commentspopup.php中设置定义评论文本框大小的行数和栏数。你也可以在这里更改这个数字：

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

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

其它的形式元素

下拉列表

Some WordPress form plugins may require a form with a dropdown box. Dropdown boxes have some styling limits. Two things you need to be aware of:

有的WordPress表格插件，需要表格有个下拉框。下拉框拥有同样的样式限制。你需要注意两点：

Dropdown Form Width

Styling dropdown box widths, as with text boxes, will be easier if you use the width unit that has been used to define the column in which the dropdown box will reside, so if its a fixed width column defined in pixels, use pixels to define the width of your dropdown box.

；下拉表格宽度：与文本框一样，设计下拉框的宽度，如果你使用下拉框位于的栏中的宽度尺度来定义下拉框的宽度，会更简单，因此如果下拉框是栏中定义的固定像素的宽度，使用像素定义你的下拉框的宽度。

Dropdown Form Line Height

To allow the box to stretch in height depending on the browser-defined font size it is best to define a line-height in em in your dropdown box. If you do not, the height of the box will remain short no matter how tall the font size. Start with 2em, then experiment in different browsers and with different browser defined font sizes until you're happy with it.

；下拉表格行的高度：根据浏览器定义的字体大小，使得框向上下延伸，最好在下拉框中的em定义行高度。如果你没有定义，不管字体有多么高，框的高度仍然非常低。从2em开始，然后尝试其它浏览器，不同的浏览器中显示不同的字体大小，知道你满意这个高度为止。

即时评论预览

thumb|right|Comments example using Live Comment Preview PluginWhen styling your comments, consider adding a Live Comment Preview WordPress Plugin or php script. You can find several plugins on the Comments Plugins List.

thumb|right|评论例子使用即时的评论预览插件设计你的评论的时候，考虑添加即时的评论预览WordPress插件或者php脚本。你可以在评论插件列表上找到几个脚本。

Space to accommodate the live comment preview area needs to be taken into consideration within your comment structure. Some Theme authors add the preview section above or below the comment form. Others make their comment input and textarea boxes narrow and set the preview area to the side or next to the name, email, and URL input boxes.

在评论结构中，需要考虑到承载即时评论预览区的空间。有的主题作者在评论框的上面或者下面添加预览部分。其它作者将评论输入框和文本框设置地很窄而且将预览区设置在旁边，或者在名称，电子邮件，和URL输入框的旁边。

The comment preview styles can also be customized to match your overall theme, so check through the plugin author's documentation to determine which tags and CSS references are used in the plugin.

评论预览样式也可以自定义设置，以匹配你的整体主题，因此通读插件作者的文件，决定在插件中使用哪个标签和CSS references。

资源

• WordPress:Site Architecture 1.5
• WordPress Comment Plugins List
• Styling Form Controls
• Styling Even More Form Controls

• 站点结构1.5
• WordPress 评论插件列表
• 样式形式控制
• 设计更多的样式控制