WordPress:Designing Themes for Public Release

As open source code, WordPress developers like to keep things loose when it comes to what a user does with WordPress. However, when it comes to designing your styles or Themes for contests and public consumption, there are a few things you should take into consideration. These are not hard and fast rules, they are more guidelines, on how to make your Theme the best it can be before exposing it to the public.

作为开放源代码，WordPress开发任意希望用户能够自由处理WordPress。然而，当要为竞赛或者公众消费，设计你自己的类型或者主题的时候，你就需要考虑一些问题了。这些并不是硬性规定，而是指导方针，关于怎样将你的主题设计地最好，再向公众显示。

Having the ability to quickly change a site's look is very exciting, and having your Theme or style be one of their choices is even more exciting. To keep all of this excitement going, we need to make sure that under the hood, there are some consistencies and things you should know before releasing your hard work and wonderful design to the public.

能够快速地更改站点的外观，是件令人兴奋的事情，精选你的主题或者类型更令人兴奋。我们要确定知道了一些本质内容后，在将自己的辛苦杰作和优秀的设计公之于众。

熟悉这个过程

In the WordPress Codex, the main documentation for using WordPress, you will find tons of information that will answer your questions about Themes, creating Themes, styling CSS, Template Tags, and more. Before you begin the process, we recommend you get familiar with the functions of WordPress. The most comprehensive list of articles about these subjects is in the WordPress:Templates article.

WordPress Codex ,使用WordPress的主要文档，你会发现大量信息，这个信息帮助你了解关于主题，创建主题，设计CSS，模板标签，以及更多的的内容。在你开始之前，我们建议你熟悉WordPress的函数。关于这个内容的最全面的列表，在模板文章中。

制作一个计划

As you consider your design possibilities, check out CSS Zen Garden for inspiration. The volunteer designers took one HTML page and created hundreds of various web page designs from it. The HTML doesn't change, only the style sheet changes. The designs are incredibly varied and unique. This shows you not only the power of designing with CSS, but also the power of the imagination to create and manipulate the most simplest of information into works of art. It begins with a plan.

但你考虑自己的设计的可行性的时候，请查看CSS Zen Garden获取灵感。志愿设计人员用一个HTML网页，创建成百上千个不同的网页设计。HTML不会更改，只是样式更改了。设计都是独特而不同的。这不仅向你显示了用CSS设计的优势，而且向你显示了将最简单的信息创建并且操作为优秀的网页的能力。这个步骤要以一个计划开始。

According to NuclearMoose, one of the popular WordPress proponents, start to make your plan with some basic tools that don't involve the computer.

根据NuclearMoose，一名受欢迎的WordPress支持者，开始用一些基本的工具，但是不包括电脑，来设计你的方案。

I have some tips...paper, pencil, sticky notes, and pencil crayons. "Whazzat for?" you ask? I'll tell you.

我拥有一些tips…纸，铅笔，粘贴的便条，和蜡笔。"Whazzat for?"你问道？我会告诉你。

I use the sticky notes to represent a piece, chunk, module, or section of the page. (Use your own appropriate term.) I write "Links" and "Navigation" etc. on them and set them on a blank piece of paper. That way, I can easily move around the elements as I like, finding something that looks balanced. I even cut some of them to size to more closely represent their actual proportion on a page.

我用粘贴的便条，代表一个网页，网页的一块，一个模块，或者一个部分。（使用适合你自己的术语。）我在这个网页块上面，编写"链接" 和 "导航"，并且将这个便条粘贴到一张空白的纸张上。这样，我可以轻易地更改上面的元素，一直找到一种平衡的布局。我甚至会剪掉一些模板，这样模板会更好地在网页表现属于这个模板的内容。

After I get something I like, I will sketch it out with more detail. Often I will colour things to try out various colour combos. Actually, I just like colouring, but I don't want my kids to think I'm colouring for fun...this is serious stuff!

设计好这个部分之后，我会设计更多的详细信息。通常我会给不同的部分设置不同的颜色，一目了然。事实上，我只是喜欢加上颜色，我并不想要孩子们认为我是为了有趣，才绘制颜色的…这很重要！

I write down all of the things I want to include in the site on a piece of paper. Then I plan out each part of it, making notes about fonts, alignments, plugins that may be needed, background images, or other artwork/graphics that I may want.

我在一张纸上，写下了我希望站点上包含的所有内容。然后我设计站点的每个部分，记下字体，alignments，可能需要的插件，背景图像，或者其它我可能想要的artwork/图形。

At the end of all this process, I have a pretty good handle of how I want things to look, as well as how it should be structured. I can start gathering all of the assets for the site (images, plugins, etc.) and begin to think about coding.

In other words, there's a fair bit of non-computer-related work up front. I've found that this helps me a lot when starting the actual "construction" of the site since I'm not sitting in front of my 'puter with a blank screen in front of me, being taunted by that damn cursor blinking, blinking, blinking...

最后，我能够很好地掌握站点的外观，结构，我可以将站点的组成部分集合起来（图像，插件，等等），而且开始构思编码。

换句话说，首先有一些与电脑无关的工作。我认为这种预先工作帮了我很大的忙。当我真正开始"设计"网站的时候，我不是仅仅地坐在电脑的前面，面对这一个空白的屏面，被那个讨厌的鼠标不停地眨啊，眨的嘲弄…

Oh yeah, it doesn't hurt to have a CSS pocket reference or some other favourite CSS resource material handy so that you don't do silly things like *cough* use deprecated attributes *cough* on some of your elements.

Once you get tired of all the work, you can invite your kids to come and help Dad colour the web site and spend some quality time together.

哦，对，拥有一个CSS pocket reference 或者一些其它的极好的CSS资源材料，这样你就不会做一些蠢事，像*cough*，在你的某个部分上使用已经取消的属性*cough*。

如果你厌烦了设计这个网站，你可以邀请你的孩子们过来帮助你，设计网页的颜色，一起度过一段品质时间。

Couldn't have explained it any better. Your plan should include:

不能解释地更好了。你的方案应该包括：

• Structural layout - Where do all the parts go?

• 结构布局 –各个部分放到哪儿？

• Specific Elements - Will you have a calendar, comments, what parts will you include?

• 特别部分 –你会有日历，评论吗，你包含那些部分？

• Template Modular Elements - Which templates will you use or add? Site map? WordPress:Pages? A distinctly different single post page?

• 模板模块部分 –你会使用或者添加哪个模板？站点地图？网页？一个完全不同的只有一篇文章的网页？

• Graphics - What graphics should go where?

• 图形-什么样的图形，会放在哪里？
• Colors - How many, how are they used, do they have a purpose or are just for show?

• 颜色 –有多少种颜色，怎样使用这些颜色，这些颜色的使用有一个目的，还是只是为了显示？

• Fonts - How many and what sizes go where?

• 字体 –有多少种字体，不同的位置使用多大的字体？

• Space - Space is an important part of layout so how will you use space?

• 空间 –空间是布局的一个重要的部分，你会怎样使用空间？

• Itinerary - How and when are you going to do all this?
• Itinerary –你会在什么时候，怎样执行这些任务？

了解你的原始资源

As you design your Theme or style, you will be using HTML and CSS references. Decide to get into the code and add some PHP, you need to have the right resources to dig into and get the information right to make your WordPress website sing. We've put together a few of the resources you will need to become very familiar with over time to help you get started.

设计主题或者样式的时候，你会用到HTML和CSS reference。决定进入代码并且添加一些PHP，你需要进入正在的资源并且得到正确的信息，来构建WordPress网站。我们将你需要的一些资源集中在一起，随着时间的推移，你会渐渐地熟悉这些资源，帮助你开始建站。

Part of designing a solid WordPress Theme is to know what you are doing. This means, you have to know where to get the answers. Keep that list handy, bookmarked or saved to your hard drive. You'll refer to it often.

创建一个牢固的WordPress主题的一部分是要了解你在做什么。这指的是，你需要知道可以在那里找到答案。将列表放在手边，加入或者保存到硬盘中，你会经常查看这个列表。

从默认的或者经典的主题开始

You can start with someone else's theme or style sheet, that's fine, but if you really want to do this right, start with one of the two default themes that come with WordPress. They are called "Classic" and "Default" aka Kubrick.

你可以从其他人的主题或者样式表开始，但是如果你真地想要正确地执行这个步骤，从WordPress的两个默认主题开始。这两个主题是"经典的" 和"默认的" aka Kubrick。

Why start here? Because these have been through the presses by WordPress designers and testers, as well as bazillions of users who are more rigorous on these things than the developers. These are solid code, for the most part, and a good starting point. From there, do whatever your imagination desires.

为什么从这里开始？因为这是WordPress设计和测试人员以及许多比开发人员还要执着的用户所在意的过程。大多数部分是坚实的代码，是很好的起点。从这里开始，发挥想象力，做你想做的事。

• WordPress:Site Architecture 1.5
• Kubrick
• Boren's Anatomy of a WordPress Theme
• WordPress Templates
• WordPress:Template Tags

• 站点结构1.5
• Kubrick
• Boren's Anatomy of a WordPress Theme
• WordPress 模板
• 模板标签

保存 Core References

Do not remove "default" WordPress CSS references!

不要移除"默认" WordPress CSS references!

Okay, after making it clear that designers are free to do whatever they want as long as it validates, and that these are only guidelines and not rules, we admit it, we lied a little.

弄清楚之后，设计人员可以自动地做想做的事，只要有效即可，而且只会看到指导方针而不是规则，我们认可这一点，几乎全是真的。

User-friendly is the key to designing WordPress Themes. Part of that friendliness is to keep the default elements of code within the WordPress:Templates and WordPress:CSS files and design these to change their look, but not to remove the code references. You can hide them, but don't remove them.

用户友好性是设计WordPress主题的核心。友好的一部分是指将代码的默认元素保持在模板和 CSS内部，设计这些元素，更改主题的外观，但是不移除code reference。你可以隐藏code reference，但是不可以移除。

For example, in the WordPress default Theme, the Theme's author made some decisions about removing the author tag from the post (it's your blog so why would you have to keep telling people you wrote it) and the calendar. If you look at the code for the calendar, it is still there, just commented out, so if the next user wants to feature a calendar, they can. The styles for the calendar are still in the style sheet so it won't look bad if enabled.

例如，在WordPress默认主题中，主题的作者做出一些决定，将作者标签从文章（这是你的博客，那么为什么不即时地告诉他人，你写了文章呢）和日历中删除。如果你查看日历中的代码，代码还在那里，只要commented out，这样如果下一个用户想要设置日历的功能，就能够设置了。日历的样式仍然在样式表中，这样如果有日历的话，看起来也不错。

Just because you like some detail or not, leave the core coding in to accommodate the various needs of the users.

因为你喜欢一些详细信息，或者不喜欢，将核心代码保留，适应不同用户的需求。

To ensure smooth transition for language localization, use the _e() function for echoing titles and headings within the template files. This makes it easier for the translation files to hook in and translate the titles into the site's language.

确保语言本地化平稳变换，为模板文件内的echoing标题和标头使用_e()函数。这样，翻译的文件hook in，将标题翻译为站点的语言变得更加简单。

As you modify the styles, if you tread into the template files, make sure that <div id="header"> stays that way. Don't change it to <div id="fred"> just because you think "post" is boring and you always named your header section fred. If you are adding a fourth column, or a new division or class identifier, you can name it anything you want, but make a note in the style sheet and template file that these are additions to the default.

你更改样式的时候，如果你进入模板文件，确定<div id="header">保持那种方式。不要将它更改为<div id="fred">，只是因为你认为"文章" 无趣，而且你经常地命名标题部分fred。如果你添加了第四个栏，或者一个新的部分或者class标示符，你可以命名任何你想要命名的内容，但是在样式表和模板文件上做记录，记录这些命名是默认设置的额外内容。

When adding references to new elements in the style sheet, it's recommended to isolate them from the default references so they are highlighted or make a note of them if they are grouped with related elements like the structure, helping people identify them more quickly. This also highlights the uniqueness of your design by showing off your style codes.

当给样式表中的新内容添加references的时候，建议你将其与默认references相隔离，这样会突出新加的references或者如果这些references与相关的内容，如结构结合在一起，就将这些references记录下来，帮助人们更快地识别这些references。通过显示样式代码，也突出了你的设计的独特性。

Again, these are things designers for contests and public consumption need to worry about. Everyone else tweaking their sites for their own use can do anything they want - and will!

还有一些为竞赛或者公众使用的主题的开发人员需要考虑的一些事情。其他的建立站点自己使用的设计人员，可以做任何喜欢做的事情-而且能够做！

重新审议插件

WordPress Plugins add great extensions and capabilities to a WordPress site. Some plugins require the user to edit their theme and add a line of code that calls their plugin. If a plugin is included with a Theme, users still want the right to use or not use them. Themes should be plugin-independent and not rely on a plugin to be installed in order to function. Unfortunately, many questions come into the WordPress Forums about plugins associated with Themes. People want to know how to turn them on, or off, and "What is this code in my Theme?".

WordPress 插件给WordPress站点添加了巨大的扩展能力。一些插件需要用户编辑主题，添加一些代码，调用插件。如果插件包含在主题中，用户会希望有权利使用或者不适用插件。主题和插件应该是独立的而且不会依赖与插件而运行。不幸的是，WordPress论坛中有许多问题，都是与主题相关的插件问题。人们希望知道怎样打开或者关闭插件，和"我的主题中的这个代码是什么?"。

If you choose to include plugin support in your theme, here are some tips:

如果你选择在主题中包含插件，下面有一些小贴士：

• Ensure that the plugin has been fully tested and will work under a variety of conditions.

• 确保插件经过完全地测试，而且在多种情况下，都能够运行。

• Include the plugin or a link to the plugin.

• 包含插件或者包含链接，链接到插件。

• Include specific instructions for installing and uninstalling the plugin to the Theme.

• 包含在主题中安装插件和卸载插件的特别的指示说明。

• Include coding around any tags within the template that will allow the Theme to work even when the plugin is turned off (see below).

• 包含主题内标签周围的编码，这个编码会在插件关闭的时候，也能够使得主题运行（请看看下面的内容）。

• Be prepared to support questions about the plugin as well as your Theme.

• 准备回答关于插件和主题的问题。

• Maintain an updated link and information in your Theme and site to the plugin, if that information changes.

• 保持链接到主题和插件的链接和信息都是最新的。

Some plugins feature tags inside of the template files. If the plugin is not activated, it will "break" the Theme and it may report errors or fail to load. It is therefore imperative to prevent the plugin from being detected in case it is turned off.

有的插件将标签放入模板文件内部。如果插件没有激活，插件会"破环"主题，会报告错误，而且还可能不能够载入。因此必须阻止插件被侦查到，以防止插件关闭。

To detect if a plugin is installed, you can use a simple function_exists() check. The if (function_exists()) checks for the plugin, and if it exists, it will use it. If it returns FALSE or "not found", it will ignore the plugin tag and continue loading the page.

要查看是否安装了插件，你可以使用简单的function_exists()检查，如果if (function_exists())查找了插件，而且如果插件存在的话，就可以使用插件。如果函数返回错误的或者 "没有找到"，就会忽视插件标签，继续载入网页。

<?php
if (function_exists('FUNCTION NAME')) {
  FUNCTION_NAME();
}
?>

<?php
if (function_exists('FUNCTION NAME')) {
  FUNCTION_NAME();
}
?>

This example plugin uses a function called jal_get_shoutbox() to print out its contents.

这个例子插件使用称为jal_get_shoutbox()的函数，印出内容。

<?php
if (function_exists('jal_get_shoutbox')) {
  jal_get_shoutbox();
}
?>

<?php
if (function_exists('jal_get_shoutbox')) {
  jal_get_shoutbox();
}
?>

设计所有模板文件

Before WordPress v1.5, it was all about the index.php file, forcing it to do all the work for every element of your page. Today's WordPress uses modular elements to make up an entire page.

在WordPress1.5版本之前，都是index.php文件，致使网页上所有元素能够运行。如今WordPress使用模块元素制作整个网页。

The Default Theme for WordPress relies upon the index.php, sidebar.php, single.php (for a single post which looks different from the categories and archives), comments.php, header.php, and footer.php, among others. If you create a theme or style based on only the index.php, leaving out the comments, header, footer, or others, you may run into design problems.

WordPress默认主题依赖于index.php, sidebar.php, single.php（对于一篇与类别和归档文章看起来不同的文章），comments.php, header.php, 和footer.php，以及其它的。如果你创建了一个主题或者样式，只依赖于index.php，省去评论，标头，页底文字，或者其它内容，你可能就会遇到设计问题。

If WordPress can't "find" the modular part, such as the comment template, it will look for it in the default folder. Therefore, if the designer hasn't taken this modular template into consideration, the layout and design might be a little messed up. It will work, but it could look weird. You don't have to use all the various bits and pieces, keeping the header and sidebar inside of the index.php or single.php, but do look at the parts as well as the whole.

如果WordPress "找不到"模块部分，例如评论模板，WordPress会在默认文件夹中查找。因此，如果设计人员没有考虑到这个模块模板，设计和布局可能会有点混乱。设计和布局可以运作但是看起来有点奇怪。你不需要使用所有不同的模块，将标题和工具条放入index.php 或者 single.php，但是你的确要将这些部分看做是一个整体。

• WordPress Template Hierarchy
• WordPress Conditional Tags
• The WordPress Loop
• WordPress Templates
• WordPress:Theme Development

• WordPress模板层级
• WordPress 条件式标签
• WordPress Loop
• WordPress 模板
• 主题发展

样式表结构

There is a lot of debate about how to layout the structure of a CSS style sheet. The key to the layout is how to make it easier for users (and designers) to find the information they want and need, for information and to make modifications. Some say that an alphabetical order of the Selectors (names of the style identifiers) makes it easy so that if you are looking for #post you just scroll towards the bottom of the page.

关于怎样布局CSS样式表结构，有许多争论。布局的关键是怎样布局，能够使用户（和设计人员）更容易发现他们想要和需要的信息，以及更改信息。有的人说，按字母表顺序给选择器（样式标示符名称）排序，更简单，这样如果你查找#post，你只要下滚至网页的底部。

Yet, if you are designing a Theme, different elements, like links, may have a different look between sections. So would you naturally look for the #post a:link in post or under a:link? If you didn't know it was in the post section, you would look in the latter area.

如果你设计一个主题，不同的内容，如链接，在不同的部分可能看起来不同。因此，你会在post中还是在a:link下，查找#post a:link？如果你不知道#post a:link是在post部分，你可能在后一个区域中查找#post a:link。

Some people prefer to group their related selector elements together such as structure, links, lists, headings, and so on. This makes a lot of sense and is helpful to the user. If they are tweaking the structure, for example, any change to the header height will impact the content and sidebar. Instead of bouncing up and down the page from middle to top to bottom, all of the elements would be close to each other, preferably identified as /* Structure */ in the style sheet. If the user wanted to change the look of all of the links to make them more vibrant, then all the links would be together in one place.

有的人喜欢将相关的选择器元素集合在一起，例如结构，链接，列表，标题，等等。这很有意义，对用户也有很大帮助。如果结构混乱了，例如更改了标头的高度会影响内容 和 工具条。所有的元素会集合在一起，标示为样式表中的/* 结构 */，而不是散放在网页的中间，最上方或者最下方。如果用户想要更改所有链接的外观，使得这些链接看起来更活跃，那么这些链接会集中放在一个位置。

There are no hard and fast rules about this. Consider what works best for you and then what may work best for the end user. Keep your presentation consistent. Make a plan on how you want to do this early on in your designing so you won't spend so much time rearranging things later.

关于这一点，没有什么硬性的规定。考虑那种方式最适合你，那种方式最适合最终的用户。将你的样式保持一致。首先制作一个设计方案，这样安排这些内容时候，就会花更少的时间。

考虑详细信息

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主题，公开发行，需要考虑许多详细内容。下面是一些需要考虑的内容。

一致的标准的字体

As you work your Theme, 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:

设计主题时，字体起着至关重要的作用。许多缺少经验的网页设计人员的主题和样式中只有一种字体。整个网页没有整套的字体，而是只有一种字体。主题设计标签中有：

body {margin: 0; font-family: "Trebuchet MS", 
sans-serif; font-size: 1em;...}

body {margin: 0; font-family: "Trebuchet MS", 
sans-serif; font-size: 1em;...}

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 choose fonts that are readable and easy -to-read, keeping font-sizes large to avoid eye-strain yet sized to fit within your design.

当你选择字体并且设计主题的时候，确保你选择的字体是可读的而且容易阅读，将字体设置地大一点，避免阅读困难，同时使得字体大小与整体设计相配套。

评论 评论 评论

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代码时的情形吗？我打赌那时候，几分钟内你有一种歇斯底里的情绪。当你公开发行主题和样式的时候，记住可能瞥一眼深层内容，然后大叫着跑出了房间。

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.

评论是代码的一部分帮助设计人员和用户了解每个部分是关于什么的。评论帮助用户识别跨越模板的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 样式表

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 World Wide Web Consortium and the 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强调代码和样式文件应该是有效的而且用许多标签标记的，这样容易阅读。[1] 和 网络标准组织 强调所有的网页代码应该符合他们的标准。如果你准备打到这一点，你应该熟悉关于这些基本的标准。

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

一般来说，这指的是发行代码之前，对代码做一些内部管理。对，你需要确认代码并且在不同的浏览器上测试代码，但是让我们从一些简单的整理代码开始。

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.

使用好的搜索功能，并且替换文本编辑器，你能够迅速地整理这些，使得你的样式和代码，能够最快地载入。

压缩使用速记

It's a good idea to use 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 short tutorial for you.

使用 CSS的速记形式是个好主意。虽然这并不是必须的标准，但这却是代码最优化的一个部分。谨慎的使用这种方法，因为有的浏览器不能处理速记，特别是那些"较老"的浏览器。如果你不属性CSS速记，我们给你准备了简短的指南。

确认! 确认! 确认!

Make sure your codes and styles validate across the board. That means they have to meet the "strict" standards set by the 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.

要确认你的代码和样式在板块上得到了确认。这指的是代码和样式符合了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. The Your WordPress section in the 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.

确认并不是仅仅指通过网络推动的检测器检测网页，同时也指与朋友，亲戚，同事，你在大街上遇到的陌生人一起测试网页。每个人都有一个稍微不同的系统，因此，让让其他人测试你的主题和样式，再将主题和样式发行。WordPress 论坛中的你的 WordPress 部分是你在站点上运行，遇到麻烦的时候，专门让WordPress志愿者测试你的站点的地方，或者只能发出ooooh 和 ahhhhhhh的声音。

If you are unfamiliar with how to validate your web pages and style sheets, we've put together a list of resources and information to help you.

如果你还不熟悉怎样确认网页和样式表，我们收集了一列资源和信息帮助你。

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 Information and Techniques
• CSS: Fixing Browser Bugs
• CSS: Troubleshooting
• Positioniseverything.com

• WordPress CSS信息和技术
• CSS: 解决浏览器程序错误
• CSS: 发现并解决问题
• Positioniseverything.com

还要做什么...?

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

这些是发行主题和样式的时候，需要考虑的一些基本问题，但是这只是冰山的一角。记住，如果你的主题中有了问题，用户应该在你的网站上开始搜索帮助，但是用户经常到 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.

你的主题设计地越好，越适应网络标准和越能够在不同的浏览器中使用，你的主题也会越成功。就如我们所说的那样，关于设计，没有什么硬性的规定，在本质上，只有一些关于代码的指导方针。完全没有限制的规定。

宣传主题

Once your WordPress Theme has been validated and tested thoroughly, then it is ready for release.

WordPress主题得到了确认和彻底地测试之后，就要准备发行了。

Put all your Theme files, including a readme text file with information and description, in a zip file for easy downloading. If possible, provide two or more file compression types like RAR, ZIP, GZIP, etc. to maximize user choices. Be sure and include information on any custom tweaks, tips, plugins, or things the user must know in a readme file.

将你的所有的主题文件，包括拥有信息和描述的自述文本文件，放到压缩文件中，便于下载。如果可能的话，提供两种或者更多种类的文件压缩形式，像RAR，ZIP，GZIP，等等，使得用户拥有最多的选择。要确定在任何自定义tweaks，贴士，插件，自述文件中包含用户需要知道的信息。

Post a link to a page on your site with the following:

在你的站点上粘贴一个链接，链接到网页，拥有以下的：

• Demo or Screenshot of various page views
• Description
• Downloadable zip file

• 不同网页浏览的 Demo或者截屏
• 描述
• 可以下载的压缩文件

Go to the WordPress:Using Themes/Theme List and find the appropriate category for your Theme. Post a link to the Theme information and downloadable file, and add the name and keyword description of the Theme, per other examples. The more keyword descriptions you use, the easier it is for people to search through the list to find your Theme.

进入使用主题/主题列表，找到适合你的主题的类别。发表一个链接，链接到主题信息和可以下载的文件，并且每隔一个例子，添加上名称和关键词描述。你使用越多的关键词描述，人们就越容易搜索列表，找到你的主题。

Post a note about your new Theme on the WordPress Forum under Themes and Templates describing the Theme. The more descriptive keywords you use, the more likely people's search for Themes will turn up your request. Include links to your Theme and the downloadable zip file.

在WordPress支持论坛主题和模板下面发表一个关于你的新主题的通知，描述主题。你使用越多描述类的关键词，人们搜索主题的时候，更可能会出现你的主题邀请。在你的主题和可以下载的压缩文件上包含链接。

Check the other lists for Theme Resources on the WordPress:Using Themes article and check there for instructions on adding your Theme to their resource list.

在使用主题文章上查看其它主题资源的列表，查看关于将你的主题添加到这些资源列表上的指示说明。

It is preferable that you provide support for your Theme on your site with a link in the Theme and readme file for the support page, to help users. Also check the Forum frequently to see if people are having problems with your Theme and address their issues as much as possible and update your Theme if necessary. If you update, please add a note of the update with the version number in the Forum and on the Theme List in the Codex.

对站点上的主题提供支持，在主题和自述文件中添加一个链接，链接到支持网页，帮助用户，这种做法更可取。同时要频繁地查看论坛，看看是否有人有关于你的主题方面的疑问，尽可能地回答他们的问题，并且必须的话，可以更新主题。如果你更新了主题，请添加一个更新的通知，论坛通知和Codex主题列表上要有更新后的主题版本数字。