站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Styling Theme Forms
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==WordPress 形式设计 == Web Form styling is one of those areas of web page design that is part [[WordPress:CSS]] and part browser influenced. The [http://www.w3.org W3 Consortium] sets standards that say that form elements can be styled, but browsers tend to have their own "opinions." 网络形式设计是网页设计的一个区域,是[[WordPress:CSS|CSS]]的一部分,而且部分受影响的浏览器。[http://www.w3.org 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除外)。 [[WordPress:Image:searchform.png|thumb|right|Simple Search Form Example]]While the [[WordPress:Site Architecture 1.5|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. [[WordPress:Image:searchform.png|thumb|right|简单的搜索样式例子]]虽然经典和默认WordPress主题中[[WordPress:Site Architecture 1.5|评论和搜索形式]]是相似的,我们会特别查看默认主题的形式,因为默认主题是大多数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 [[WordPress:Validating a Website|validate]] the code. 你一旦设计了自己的形式,就要对其进行测试。在尽可能多个浏览器中浏览这些形式,并且确定[[WordPress:Validating a Website|验证]]了代码。 === Things to Consider === === 需要考虑的内容 === 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加上黑色的字体。幸运地是,你总是能够得到可使用的按钮,虽然这个按钮看起来并不引人注意。 [[WordPress:Image:comment-form-example-too-wide.png|thumb|right|Example of a comment form that is wider than its container]] [[WordPress:Image:comment-form-example-too-wide.png|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 [[WordPress:Templates|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. ;栏宽:形式使用输入框和文本区,让用户向论坛输入信息。这些区在样式表内部以及[[WordPress:Templates|模板文件]]的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 [[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|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 <tt><nowiki><small></nowiki></tt> 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 <tt>#commentform small</tt>. Or if you want to control the styles for each of the uses of the <tt><nowiki><small></nowiki></tt> tag in your comment form, giving each a unique look, you could use <t>#author small</tt> and <tt>#email small</tt> and so on, overriding the parent styles for that tag. ;了解CSS的母/子关系: [[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship|CSS 母/子关系]] 基本知识显示不管母container中有什么样式都会传递给子container,除非特别的代替情况。例如,如果你将整个站点的 <tt><nowiki><small></nowiki></tt>标签设计样式,并且用在used within the [[WordPress:Post Meta Data Section|文章Meta Data部分]],在其它位置,样式也是评论形式。如果你想要更改那个特别的字体或者外观,你需要赋予其特别的样式 例如 <tt>#commentform small</tt>。或者你希望控制评论形式中的每个<tt><nowiki><small></nowiki></tt> 标签的样式,使得每个标签拥有独立的外观,你可以使用i <t>#author small</tt> 和<tt>#email small</tt> 等等,取代那个标签的母样式。 <div style="border:blue 1px solid; margin:10px; padding:10px; text-align:center"> '''Before making modifications, backup your WordPress Theme Folder.''' </div> <div style="border:blue 1px solid; margin:10px; padding:10px; text-align:center"> '''在更改任何内容之前,备份年底WordPress主题文件夹。''' </div>
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)