站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Designing Themes for Public Release
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
==考虑详细信息== There are a lot of details that have to be taken into consideration when designing your WordPress Theme for public release. Here are a few to consider. 设计WordPress主题,公开发行,需要考虑许多详细内容。下面是一些需要考虑的内容。 ===Consistent and Standard Fonts=== ===一致的标准的字体=== As you work your Theme, [[WordPress:Playing With Fonts|fonts play a critical part]] in the design. Many inexperienced web page designers present themes and styles with only one font. Not just an overall font style for the whole page but ONE font. In the body style tag it may say: 设计主题时,[[WordPress:Playing With Fonts|字体起着至关重要的作用]]。许多缺少经验的网页设计人员的主题和样式中只有一种字体。整个网页没有整套的字体,而是只有一种字体。主题设计标签中有: <pre>body {margin: 0; font-family: "Trebuchet MS", sans-serif; font-size: 1em;...}</pre> <pre>body {margin: 0; font-family: "Trebuchet MS", sans-serif; font-size: 1em;...}</pre> What happens if the user doesn't have Trebuchet on their computer? It happens every day. If that font isn't on the user's computer, the system default shows up which is often Arial or some similar sans-serif font. If you like the look, great, because just about everyone has it, but if you want Trebuchet and you really want your fonts to have a specific look, then you have a problem. 如果用户的电脑上没有Trebuchet,会发生什么呢?这种情况每天都会发生。如果用户的电脑上不存在那种字体,系统默认显示为Arial或者其它类似的非衬线字体。如果你喜欢这样的字符,非常好,因为每个人都有这样的字体,但是如果你想要Trebuchet而且你的确希望你的字体看起来特殊,那么你会遇到问题。 To increase the chances of a font similar to the one you really want showing up on the page when it displays, add more choices to the font-family like this: 向字体集添加更多的字体,增加字体与你想在网页上显示的字体的相似的可能性: font-family: "Trebuchet MS", Verdana, Futura, Arial, Helvetica, sans-serif; font-family: "Trebuchet MS", Verdana, Futura, Arial, Helvetica, sans-serif; If the browser can't find Trebuchet, it looks for Verdana, and if can't find that, it looks for Futura (Mac systems), and so on. That should cover all your bases. 如果浏览器找不到Trebuchet,浏览器会查找Verdana,如果查不到Verdana,会查找Futura(Mac系统),等等。查找范围包括你字体集中的所有字体。 Also remember that while there are some fonts which are common on Windows systems, there are other computer systems out there like Linux and Mac. Consider using fonts that will also work on their machines, too. 同时要牢记,有些字体在Windows系统上虽然非常常见,但是在其它的电脑系统,如Linux和Mac上却不常见。考虑一些字体同时能够在Linux和Mac系统上运行。 As you choose your fonts and design your Theme, make sure you [[WordPress:Playing With Fonts|choose fonts]] that are readable and easy -to-read, keeping font-sizes large to avoid eye-strain yet sized to fit within your design. 当你选择字体并且设计主题的时候,确保你[[WordPress:Playing With Fonts|选择的字体]]是可读的而且容易阅读,将字体设置地大一点,避免阅读困难,同时使得字体大小与整体设计相配套。 ===Comment Comment Comment=== ===评论 评论 评论=== Have you looked under the hood of a racing car lately? The bells and whistles inside are a nightmare to figure out. Remember the first time you looked at PHP, CSS, or HTML code? Bet that gave you a few moments of hysteria. When you are releasing your Themes and styles to the public, remember the user may take a peek under the hood and run screaming from the room, too. 你最近查看了赛车的车篷下面的器械吗?内部的声响是可怕的事物。你还记得第一次查看PHP,CSS或者HTML代码时的情形吗?我打赌那时候,几分钟内你有一种歇斯底里的情绪。当你公开发行主题和样式的时候,记住可能瞥一眼深层内容,然后大叫着跑出了房间。 [[WordPress:Commenting Code|Comments are part of code]] that helps the designer and the user figure out what is what. Comments help users identify DIVs that cross templates, when a template begins and ends, and any changes that indicate you, the designer, has modified something that makes it different from the original code. [[WordPress:Commenting Code|评论是代码的一部分]]帮助设计人员和用户了解每个部分是关于什么的。评论帮助用户识别跨越模板的DIVs,当模板开始和结束的时候,任何变化都会向你暗示,设计人员,已经更改了内容,使得内容与原始代码看起来不一样。 Help your users by commenting as much as possible to helps them find the different sections and use your Theme with ease. 通过尽可能地多评论,帮助用户找到主题的不同部分,轻易地使用主题。 ===Lean and Mean CSS Style Sheet=== ===Lean and Mean CSS 样式表=== WordPress stresses that code and style files should validate and be laid out with a lot of tabs so they are easy to read. The [http://w3c.org/ World Wide Web Consortium] and the [http://www.webstandards.org/ Web Standards Organization] ''stresses'' that all web page code be compliant with their standards. If you are going to get into this, you should familiarize yourself with the most basic of these standards. WordPress强调代码和样式文件应该是有效的而且用许多标签标记的,这样容易阅读。[http://w3c.org/环球网团体] 和 [http://www.webstandards.org/ 网络标准组织] ''强调''所有的网页代码应该符合他们的标准。如果你准备打到这一点,你应该熟悉关于这些基本的标准。 One of those standards is to present a clean and optimized style sheet and HTML code. While WordPress contests tend to be lenient on this subject, other web page design contests don't. Their motto tends to be "a clean and tight code is a work of art, too". 其中的一个标准就是呈现整洁最优化的样式和HTML代码。虽然WordPress竞赛对于这一点比较宽容,但是其它的网页设计并不宽容这一点。他们的标语是"整洁严谨的代码也是一件艺术品"。 Basically, it means doing [[WordPress:WordPress Housekeeping|some housekeeping on your code]] before you release it. Yes, you will need to validate it and test it across browsers, but let's start with some simple cleaning. 一般来说,这指的是发行代码之前,[[WordPress:WordPress Housekeeping|对代码做一些内部管理]]。对,你需要确认代码并且在不同的浏览器上测试代码,但是让我们从一些简单的整理代码开始。 Every space, character, and bit in your code and style sheets add up to bytes. That sentence came to about 64 bytes. Each byte of information adds up and the larger they are, the longer they take to load. You do yourself and your users a favor by keeping your file sizes down to byte sized sizes. So where do all these bandwidth wasters hide? 你的代码和样式中的每个空格,字符和位都算作字节。那个句子大概有64个字节。信息的字节累加,而且字节越大,信息载入时间越长。将文件大小保持为某个字节的大小,会给用户和自己省去不少麻烦。那么这些带宽wasters隐藏在哪里呢? If you have set your code to look pretty with lots of indents, have you checked to see if there are any TAB codes at the end of the line before the line break? I find a lot of these. You don't need a TAB before a line break, only after, but somehow, these sneak into the code. 如果你将你的代码设置地非常好看,拥有许多的缩进,你有没有检查在每行的结束之后,行分隔符之前,有没有任何标签代码?我发现许多这样的代码。在行分隔符之前你不需要标签,只是分隔符之后,你需要一个,那么,这些标签会偷变成了代码。 Using spaces to line up code adds to the size. A TAB is considered one character in most editors, but the five spaces that copy the TAB indent takes up five characters. Using double spaces instead of single spaces in your code and styles adds up, too. 使用空格,排列代码,添加到尺寸上。大多数编辑器认为一个标签是一个字符,但是复制标签缩进需要五个字符,五个空格。在代码和样式adds up中使用两个空格而不是一个空格。 Using a good search and replace capable text editor, you can quickly clean these up, making your styles and code optimized for fast loading. 使用好的搜索功能,并且替换文本编辑器,你能够迅速地整理这些,使得你的样式和代码,能够最快地载入。 ===Condense and Use Shorthand=== ===压缩使用速记=== It's a good idea to use [[WordPress:CSS Shorthand|shorthand for your CSS]]. While it isn't a required standard, it is part of code optimization. Use this technique with caution as some browsers can't handle it, typically "older" browsers. If you are unfamiliar with CSS shorthand, we've put together a [[WordPress:CSS Shorthand|short tutorial for you]]. 使用[[WordPress:CSS Shorthand| CSS的速记形式]]是个好主意。虽然这并不是必须的标准,但这却是代码最优化的一个部分。谨慎的使用这种方法,因为有的浏览器不能处理速记,特别是那些"较老"的浏览器。如果你不属性CSS速记,我们给你准备了[[WordPress:CSS Shorthand|简短的指南]]。 ===Validate! Validate! Validate!=== ===确认! 确认! 确认!=== Make sure your codes and styles validate across the board. That means they have to meet the "strict" standards set by the [http://www.w3c.org/ W3C Organization] and pass a variety of validations for CSS and HTML. Not all validators check for the same things. Some only check CSS, others HTML, and others for accessibility. If you are sincere in presenting solid code to the public, test your code with several validators. 要确认你的代码和样式在板块上得到了确认。这指的是代码和样式符合了[http://www.w3c.org/ W3C 组织]设置的"严格"的标准而且通过了CSS和HTML的确认。并不是所有的validators都检查同样的内容。有的只检查CSS,有的只检查HTML,有的只检查可访问性。如果你真诚地想要将最坚实的代码显示给公众,你可以使用几个validators测试你的代码。 Validation doesn't just mean putting your pages through some web driven testers. It also means test-driving it with friends, relatives, co-workers, and strangers you meet on the street. Everyone has a little different system, so ask for others to test-drive your styles or themes before you make them public. [http://wordpress.org/support/forum.php?id=11 The Your WordPress section] in the [http://wordpress.org/support/ WordPress Forums] is dedicated to checking out your site by WordPress volunteers while you are working on it, when you have trouble, or just to say ooooh and ahhhhhhh. 确认并不是仅仅指通过网络推动的检测器检测网页,同时也指与朋友,亲戚,同事,你在大街上遇到的陌生人一起测试网页。每个人都有一个稍微不同的系统,因此,让让其他人测试你的主题和样式,再将主题和样式发行。[http://wordpress.org/support/ WordPress 论坛]中的[http://wordpress.org/support/forum.php?id=11 你的 WordPress 部分]是你在站点上运行,遇到麻烦的时候,专门让WordPress志愿者测试你的站点的地方,或者只能发出ooooh 和 ahhhhhhh的声音。 If you are unfamiliar with how to validate your web pages and style sheets, we've put together a [[WordPress:Validating a Website|list of resources and information]] to help you. 如果你还不熟悉怎样确认网页和样式表,我们收集了[[WordPress:Validating a Website|一列资源和信息]]帮助你。 ===CSS and HTML Bugs=== ===CSS 和 HTML 程序错误=== WordPress Themes and styles are diverse examples of the brilliant and imaginative WordPress users out there. What all of them have in common as they hold the design concept in their head and work long hours to convert it into code that matches their imagination is.....browser bugs. WordPress主题和样式是聪明的,富有想象力的WordPress用户的多样化的例子。用户所有的共同点是他们想到了设计理念并且工作很长时间,将理念转换为代码,这个代码符合他们想象的内容…..浏览器程序错误。 You work for three days to make it beautiful in Microsoft Internet Explorer, take a look at the same site in Firefox and it looks different. In fact, things don't line up right. Or you designed it to work in Opera, but when you view it in Internet Explorer, the sidebar is now half off the screen. 你工作了三天,使得站点在Microsoft Internet Explorer上看起来很漂亮,在Firefox上看看同样的站点,会发现外观不一样。事实上,代码没有排列好。或者是因为你将站点设计地在Opera上能够运行,但是当你在Internet Explorer上查看站点的时候,工具条有半边都不在屏面上。 Before you pull out your hair, remember that others have suffered before you and you are not alone. Check out these resources for help on solving the many CSS, HTML, and browser bugs that are out there. 在愤怒之前,要记住其他人也遇到了和你同样的麻烦,你并不是孤立的。查看这些资源,解决一些关于CSS,HTML和浏览器缺陷方面的问题。 * [[WordPress:CSS|WordPress CSS Information and Techniques]] * [[WordPress:CSS_Fixing_Browser_Bugs|CSS: Fixing Browser Bugs]] * [[WordPress:CSS_Troubleshooting|CSS: Troubleshooting]] * [http://www.positioniseverything.net/ Positioniseverything.com] * [[WordPress:CSS|WordPress CSS信息和技术]] * [[WordPress:CSS_Fixing_Browser_Bugs|CSS: 解决浏览器程序错误]] * [[WordPress:CSS_Troubleshooting|CSS: 发现并解决问题]] * [http://www.positioniseverything.net/ Positioniseverything.com] ===What Else...?=== ===还要做什么...?=== These are a few of the most common things to take into consideration when presenting your themes or styles to the public, but it is only the tip of the iceberg. Remember, if there is a problem with your theme, users should begin their search for help on your website, but they often turn to the [http://www.wordpress.org/support/ WordPress Forums]. The more consistent with the default codes and style references, the faster users can get the help they need if there is a problem. We know that you read through this article and followed all of these recommendations to the letter, users will come to the WordPress Forums to brag and show off instead. 这些是发行主题和样式的时候,需要考虑的一些基本问题,但是这只是冰山的一角。记住,如果你的主题中有了问题,用户应该在你的网站上开始搜索帮助,但是用户经常到 [http://www.wordpress.org/support/ WordPress 论坛]上寻求帮助。主题和样式与默认代码和样式references越相似,用户能够更快地找到相关问题的帮助。我们知道你通读了这篇文章而且严格按照自己要求遵循所有的这些建议,用户会到WordPress论坛上显示他们的知识。 The better designed your Theme is, the more web standard and cross-browser compliant, the more successful your Theme may be. As we said, there are no hard and fast rules for design, only guidelines for the code under the hood. The sky is the limit. 你的主题设计地越好,越适应网络标准和越能够在不同的浏览器中使用,你的主题也会越成功。就如我们所说的那样,关于设计,没有什么硬性的规定,在本质上,只有一些关于代码的指导方针。完全没有限制的规定。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)