编辑“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代码的开源性，WordPress开发人员习惯于将用户能够接触到的WordPress工具设计得更加人性化，权限也相对宽松，方便用户操作。但在设计主题用于参赛或公共发布时，用户需要遵守一定的规则。与其说这些是严格的、需要遵守的规则，不如说它们是操作指南更为恰当。

利用[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 主题]快速更改网站外观样式自然是件令人兴奋的事，让别人使用自己开发的主题会更令人兴奋。为了持续这种感觉，在公开发布自己的作品前，我们需要了解发布主题的一些要求。

==熟悉主题制作过程==
我们可以在WordPress手册（WordPress使用指南）中看到很多关于主题的资料，包括创建主题、制作[[CSS]]样式、模板[[标签]]等内容。设计主题前最好先了解[http://www.wordpress.la/theme.html WordPress主题]的功能，模板里有关于这方面的详细文章列表。


==制作主题设计计划==
[http://www.csszengarden.com/ CSS Zen Garden]上有关于设计方面的资料。[http://www.csszengarden.com/ CSS Zen Garden]网站上的志愿设计者会利用一个HTML页面设计出数百种不同的网页样式。这不仅显示出了CSS设计的强大效果，也表现出了志愿者们丰富的想象力和创造力。然而这一切都需要进行事先计划。

下面是NuclearMoose（知名WordPress粉丝）对制作主题的计划，计划中用到了一些基本工具，但没有涉及电脑的使用。

首先我准备了一些纸张、铅笔、便签纸和彩色铅笔，大家一定很好奇为什么要用到这些东西，下面会慢慢向大家解释。

我用多张便签纸分别表示一个页面的不同版块。（大家可以用其它物品来表示。）然后我在便签纸上写上“链接”、“导航”等字样，把写了字的便签纸放在一张空白纸上。这样我就可以在空白纸上任意移动这些便签纸，为它们寻找合适的搭配位置。有时还需要重新剪裁这些便签纸，让它们能够更准确地显示出各自在页面上所占的比例。

达到理想的搭配效果后，我就该开始处理细节性内容了。首先要为各个版块填充不同颜色，同时还要考虑到颜色搭配问题。

接着我在一张纸上列出网站上需要的所有内容，然后计划各部分内容的细节，标注应该使用的字体、对齐方式、插件、背景图案以及其它可能用到的图片。

最后我会对页面上的结构、排版都了解得非常清楚。然后就可以收集网站需要的所有内容（图片、插件等），继而考虑开始编码了。

以上操作完全不需要用到电脑。我发现，这种方法对我构建网站起到了很大作用，我再也不需要傻乎乎地坐在空白的电脑屏幕面前发呆，看着光标在我的眼前不停地闪啊闪....

不过随身带着一两本CSS袖珍参考资料也无可厚非，至少这样可以避免犯一些不该犯的错误。

根据上面的介绍，我们要创建一个主题，事先需要计划以下几方面内容：

*结构布局——各个版块的位置 
*特定元素——日历、评论的样式 
*模板模块化元素——使用/添加什么样的模板/网站地图/页面，还是特别的日志页面 
*图形——各个区域应该用到的图形 
*颜色——会用到多少种颜色，分别用在什么地方，颜色是否有特殊用意 
*字体——要使用多少种字体，字号分别是多少 
*空白区域——空白区域是布局中的要点，是否需要留出空白区域 
*时间安排——用多少时间、怎样实现以上计划 

<strong>学习资源</strong>

设计主题和样式时会用到[[HTML]]和[[CSS]]引用，有时还要在代码中加入一些PHP代码，因此我们需要掌握一些学习资源以备不时之需。WordPress手册为用户收集了[http://codex.wordpress.org/Know_Your_Sources 一些有用的资源]，希望能够帮助用户顺利开始主题设计之旅。
==>从Default和Classic主题入手==
设计自己的主题前，我们可以先学习别人的主题或样式表。但如果要达到最佳学习效果，最好选择WordPress安装时自带的两个默认主题——Classic主题和Default（又被称为Kubrick）主题。

可能有人要问为什么要选择这两个主题，这是因为这两个主题不仅经过许多WordPress设计人员和测试人员的验证，更得到了无数用户的许可。这两个主题具有非常实用而坚固的代码，适合作为用户研究的样本。

<strong>参考资料</strong>
*http://codex.wordpress.org/Site_Architecture_1.5 Site Architecture   1.5]
*[http://binarybonsai.com/kubrick" href="http://binarybonsai.com/kubrick Kubrick]
*[http://boren.nu/archives/2004/11/10/anatomy-of-a-wordpress-theme/ Boren's   Anatomy of a WordPress Theme]
*[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 模板]
*[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E6%A0%87%E7%AD%BE.html 模板标签] 

==保留核心引用文件==
不要删除WordPress默认文件中 的[[CSS]]引用。

之前我们说过这只是使用指南，不是硬性规定，只要经过验证，设计人员可以随意进行设计。但这里我们要改变之前的说法了，这里有一个规定需要用户遵守。

设计[http://www.wordpress.la/theme.html WordPress主题]的重点是友好的用户界面。这种友好是指，保留模板和CSS文件中的默认代码元素，然后设计代码以更改样式，但不要删除代码引用。可以隐藏代码引用，但是删除是不可取的。

例如，在WordPress默认主题中，主题开发者删除了日志和日历中的作者标签（没必要在自己的博客中反复出现作者标签，因为作者就是自己）。但我们仍然能够查找到日历代码，下一位用户要编辑日历代码时也可以顺利进行。日历的样式仍然在样式表单中，即使激活，样式也不会遭到破坏。

无论我们是否喜欢细节性问题，都可以保留核心代码，以便满足不同用户的不同需求。

为了保证WordPress能够顺利进行语言翻译转换，我们可以用_e()函数来为模板文件中的标题编码。这样能让翻译文件更轻松地连接到WordPress，将标题翻译成我们网站所用的语言时也更方便。

访问模板文件前需要确保<div id="header">保持原来的状态。不要因为自己不喜欢“post”这个词，或者自己习惯于把页眉部分叫做fred，就把<div id="header">改成<div id="fred">。如果这时我们已经为主题添加了第四栏，或者某个新版块，又或者某个类标识项，我们可以为这个新事物赋予任何名称，但一定要在样式表单和模板文件中加以说明。

为样式表单中的新元素添加引用时，最好把这些引用和默认引用分开，这样新的引用就会被高亮显示。如果新引用由于相关元素而集中在一起，那么它们也会被加上标记，这样用户查找起来也更方便。在显示我们自己编写的样式代码的同时，我们创意的独特性也就一目了然了。

不过这些都是在设计主题用于参赛或公共发布时需要注意的事。如果只是为了方便自己使用而修改网站代码，我们完全可以随心所欲地进行修改。

==插件==
[http://www.wordpress.la/plugin.html WordPress插件]扩展了WordPress网站的功能和兼容性。使用某些插件时，用户需要先编辑主题文件，在其中加入一行代码来调用插件。如果主题中包括某个插件，用户可能希望自己决定是否使用这个插件。主题应该独立于插件，不能依靠插件完成自己的安装、运行。但WordPress论坛中很多用户都会反映这类问题。用户们希望知道，他们该怎样打开或关闭主题中的插件，以及“主题中的这些代码究竟是什么？”。

在主题中放入插件以支持运行时，我们需要注意以下几点：
*确保插件经过各方面测试，能够在多种条件下正常运行 
*在主题中加入插件或插件的链接 
*在主题文件中加入安装、卸载该插件的详细说明 
*说明模板中标签的编码方法，使插件关闭时主题能够正常运行（见下文）。 
*随时准备帮助用户解决使用主题和主题内插件遇到的问题。 
*如果插件内容有更新，在主题文件和网站上标明插件的更新链接 
*有些插件在模板文件中使用标签。如果插件未必激活，主题会中止运行并报告错误或无法加载。因此坚决不能让系统监测到被关闭的插件。

我们可以用function_exists()来判断插件是否被激活。 首先用if (function_exists())查看插件是否存在并运行已存在的插件。如果函数返回FALSE或"not found"，这时可以忽略插件标签，继续加载页面。
 <?php
 if (function_exists('FUNCTION NAME')) {
  FUNCTION_NAME();
 }
 ?>
例子中的插件用了一个叫做jal_get_shoutbox()的函数来输出它返回的内容：
 <?php
 if (function_exists('jal_get_shoutbox')) {
  jal_get_shoutbox();
 }
 ?>

==为模板文件设计样式==
在WordPress 1.5以前，WordPress用index.php文件来为页面中的所有元素服务。现在，WordPress可以用[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 模块化的元素]来组成整个页面。
WordPress的Default主题使用index.php, sidebar.php, single.php   (用于某个不同与存档内其它页面的单独页面), comments.php, header.php, and   footer.php等文件。如果我们设计主题或样式时只依赖index.php文件，而不考虑评论、页眉、页脚等其它内容，在设计后期会遇到很多问题。

WordPress找不到模块元素（比如说评论模板）时，会在默认文件夹中查找该模块元素。因此设计人员在进行主题设计时，如果不考虑到模块元素，网站的布局和样式可能会有些混乱。虽然仍然能够正常运行，但视觉效果不尽如人意。我们不必用上所有模块，只要将页眉和侧边栏放在index.php文件或single.php文件中，但一定要将这些模块看作是网站的一部分。

<strong>参考资料</strong>

*[http://www.wordpress.la/codex-%E6%A8%A1%E6%9D%BF%E5%B1%82%E7%BA%A7.html WordPress模板层级]
*[http://www.wordpress.la/codex-%E6%9D%A1%E4%BB%B6%E6%A0%87%E7%AD%BE.html WordPress条件标签]
*[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E5%BE%AA%E7%8E%AF.html WordPress主循环]
*[http://www.wordpress.la/codex-WordPress%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6.html 模板]
*[http://www.wordpress.la/codex-WordPress%E4%B8%BB%E9%A2%98%E5%BC%80%E5%8F%91.html WordPress主题开发] 
  
===样式表单结构===
到目前为止，人们仍然没有形成对CSS样式表单结构的统一看法。[[CSS]]样式表单布局的关键在于，要怎样才能让用户（和设计人员）更迅速更方便地找到他们需要的信息。有些人认为可以按字母顺序排列选择器（样式标识符），这样如果用户要查找#post就只需要滚动鼠标，在页面的最下方就可以发现#post了。

另外在设计主题时，同一元素（例如，链接）在不同版块上表现形式可能有所不同。这时我们可能会在<EM>post</EM>区域或<EM> a:link?</EM>下查找<EM>#post a:link</EM>。如果我们不知道<EM>#post   a:link</EM>在<EM>post</EM>区域中，就会在<EM> a:link?</EM>中查找。

有些设计人员会将相关的选择器元素放在一个组中，例如结构、链接、列表、标题等。这对用户非常有帮助。例如，用户更改结构时，对页眉高度所做的任何改动都会影响到内容和侧边栏。为了省去在页面中上下拖拽的麻烦，我们可以让所有元素集中放置，用   /* Structure */在样式表单中进行标识。如果用户想改变所有链接的样式，首先要将所有链接都集中到一个区域中。

关于这些操作，WordPress都没有给出特别限制。我们可以选择最适合自己同时也最方便终端用户的设计方式。尽量保持网站样式不变。可以在设计主题初期对所有版块和元素进行规划，避免后期花费过多时间重新排版。

==考虑细节问题==
为公开发布设计WordPress主题时还需要注意很多细节性问题。
===字体===
设计主题时，字体对整个版面起着重要作用。很多缺少经验的网页设计人员只用一种字体来设计主题和样式。他们指定的不是一个宽泛的字体风格，而是具体的某种字体。于是主样式标签中显示如下：
<PRE>body {margin: 0; font-family: "Trebuchet MS",   sans-serif; font-size: 1em;...}</PRE>

如果用户电脑中没有存储Trebuchet字体，结果会怎样？不要感到奇怪，这种事情每天都会发生。当用户电脑上没有代码中的字体时，通常系统默认显示Arial或类似无衬线字体，基本每台电脑上都有这种字体。如果我们可以接受这种字体那当然无话可说，但如果我们不想要这种字体，希望我们的主题能够使用独特的字体时，问题就来了。

为了让页面上能显示我们所希望的类似字体，我们可以在font-family里加上多个字体以供选择：

<PRE>font-family: "Trebuchet MS", Verdana, Futura, Arial, Helvetica, sans-serif;  </PRE>

如果浏览器查找不到Trebuchet字体，会查找Verdana，如果仍然找不到，继续查找Futura（Mac系统中），以此类推。

有些字体在Windows操作系统上很常见，在Linux、Mac等系统上却未必如此，选择字体时要尽量满足各个操作系统的需求。

我们选择主题字体时，还要保证字体是易于阅读的，同时字体大小不仅要赏心悦目，也要能够配合设计风格。
===注释码===
大家看过赛车引擎盖下面的摆设么？里面的各种附加功能会让新手根本摸不着头脑。我们第一次看到 [[PHP]], [[CSS]], 或[[HTML]]   代码时一定也是一头雾水。所以一定要记住，我们公开发布主题和样式时，用户可能也只是“打开引擎盖随便看看”，然后就无奈地离开了。

注释码也是代码的一部分，它能够帮助设计人员和用户迅速找到自己需要的内容。用户能够通过注释码识别跨模板的DIV标签，分辨模板的开始部分和结尾部分，查看设计人员对原始代码所做的所有改动。
编写代码时，我们要尽可能地使用注释码，让用户使用我们的主题时更加得心应手。
==精简CSS样式表单==
WordPress一直强调，代码和样式文件应该经过验证、应该列出各种各样的表方便阅读。[http://w3c.org/ W3C理事会]和[http://www.webstandards.org/ 互联网行业标准机构]也强调说，所有网页代码都要符合他们制定的标准。因此我们设计网页时首先要了解一些最基本的标准。

标准之一，样式表单和[[HTML]]代码要干净清爽。WordPress竞赛对这方面的要求较为宽松，但其他网页设计竞赛却非常看重这一标准。

基本而言，这一标准是要求我们在公开发布主题前整理我们的代码。我们要在不同[[浏览器]]上测试代码，但之前还要对代码进行简单整理。

代码和样式表单中的每个多余的空格、字符都会占用存储空间。占用的空间越大，加载页面时花费的时间就越多。我们减少这些文件的占用空间不仅对我们自己有利，也方便了用户。

我们可能会缩进显示代码，让代码看起来更美观。但在每行代码结束的位置、换行符前，会出现一个TAB[[标签]]。这些TAB都是不必要的，但它们总是会悄悄出现在代码段中。

用空格将代码分行也会占用一定内存。在大多数编辑器中，一个TAB标签被看做一个字符。模拟TAB缩进时会用到五个空格，相应地就会占用五个字符的内存。在代码和样式表中用两个空格来代替一个空格也会占用内存。

选择一个能够快速查找、替换内容的文本编辑器可以帮我们迅速清除多余空格和字符，优化样式表和代码，最后达到快速加载页面的目的。
===简写代码===
简写[[CSS]]代码不失为一个好方法。虽然这不算是强制性标准，但也是代码优化的一部分。有些[[浏览器]]，尤其是老式浏览器，不能识别简写的代码，因此我们使用简略代码时要特别注意。这里有一篇[http://www.wordpress.la/codex-CSS%E9%80%9F%E8%AE%B0.html 简明教程]可以帮助那些不了解CSS简写规则的用户。

===验证===
全方位验证我们编写的代码和样式表。这意味着，我们的代码和样式表不仅要符合W3C理事会的严格标准，还要经过CSS和[[HTML]]的各种验证。不同的验证程序会检验代码的不同方面。有些验证程序负责检查CSS，有些关注HTML，有些则会查看代码的可用性。如果希望为公众提供坚实可靠的代码，最好用多个验证程序来验证代码。

我们不仅仅用网络验证程序来验证代码。我们的朋友、亲人、同事都可以帮我们验证代码。每个人的系统配置都不完全相同，所以在将主题公布前，可以先请别人帮我们测试我们的样式表和主题。WordPress论坛中有一个叫做Your   WordPress的版块，WordPress用户遇到困难时可以到这里来寻求帮助，论坛上的志愿者会帮尽力帮我们解决所有问题。

这里也有一份[http://www.wordpress.la/codex-WordPress%E7%BD%91%E7%AB%99%E9%AA%8C%E8%AF%81.html 资源列表]供不了解网页和样式表单验证的用户参考。

===CSS和HTML BUGs===
WordPress主题和样式是WordPress用户智慧和想象力的结晶。在将自己的设计理念转换为实际操作时，所有WordPress用户都有一个共同点——无可避免地会遇到浏览器BUG。

有时可能我们在Microsoft的IE浏览器上调试了很多天，让网页看起来美观大方，但同样的网页在Firefox浏览器上，页面排版可能会出错。而如果在Opera上设计页面，在IE上测试时，侧边栏又会出问题。
不过我们遇到的问题，之前别人也可能遇到过。下面这些资料可以帮助我们解决一些CSS、HTML以及浏览器方面的问题。
*[http://www.wordpress.la/codex-CSS.html CSS]
*[http://www.wordpress.la/codex-CSS%E4%B9%8B%E4%BF%AE%E5%A4%8D%E6%B5%8F%E8%A7%88%E5%99%A8%E6%BC%8F%E6%B4%9E.html CSS之修复浏览器漏洞]
*[http://www.wordpress.la/codex-CSS%E7%96%91%E9%9A%BE%E8%A7%A3%E7%AD%94.html CSS之疑难解答]
*[http://www.positioniseverything.net/ Positioniseverything.com]
==其它==
以上只是为公开发布设计[http://www.wordpress.la  WordPress主题]时需要注意的常见问题，我们需要注意的问题还有很多。记住，如果我们的主题运行时出了问题，用户会下意识地到[http://www.wordpress.org/support/ WordPress论坛]而不是我们的网站上寻求帮助。所以我们一定要保持默认代码和样式引用的前后一致，这样出现问题时用户寻求帮助也更方便了。如果每个设计人员都按照这篇文章中的操作指南进行设计，用户在WordPress论坛上发表的就不是抱怨遇到的问题，而是对自己所用主题的夸赞了。

主题设计得越好，符合的互联网标准越多，在各个浏览器上表现得越出色，那么我们的主题可能就越受欢迎。就像我们之前说过的一样，设计主题时没有具体的强制性规定，大家完全可以自由发挥。
===推广主题===
WordPress主题经过全方位验证和测试后，就可以公开发布了。

我们可以将所有主题文件，以及一个包含主题相关信息的readme文件，打包成一个压缩文件，方便用户下载。如果条件允许，我们可以提供多种压缩格式的文件以满足不同用户需求，像是RAR、ZIP、GZIP格式等。确保readme文件中含有自定义的修改、提示、插件以及用户需要了解的其它信息。

我们可以在网站的某个页面上加上一个链接，链接到以下内容中：
*不同页面的演示效果图或屏幕截图   
*关于主题的说明   
*可下载的压缩文件 
在[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html 使用WordPress主题]一文上查找与我们主题相应的类型。加上主题说明信息和下载链接，然后根据别人上传的主题为例，为我们的主题起名，设置关键字描述。使用的关键字越多，被用户查找到的机率越大。

在WordPress论坛下的[http://wordpress.org/support/forum/5 主题和模板]版块中对我们的新主题做个简要介绍，附上主题和主题压缩文件的链接。介绍时使用的描述性文字越多，用户查找到我们主题的机率也越大。

[http://www.wordpress.la/codex-%E4%BD%BF%E7%94%A8WordPress%E4%B8%BB%E9%A2%98.html 使用WordPress主题]中还列出了很多主题来源，我们也可以把自己的主题上传到这些来源中。

我们可以在主题和readme文件中加上一个帮助链接，用户使用主题遇到问题时可以通过这个链接向我们寻求帮助。还可以经常性地访问WordPress论坛，查看是否有关于我们主题的反映情况，及时帮助遇到麻烦的用户解决问题，必要时升级主题。升级后及时在WordPress论坛上和WordPress手册的Theme   List中更新主题的版本信息。

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

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