为公开发布设计主题

0条评论

为公开发布设计主题

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

利用主题快速更改网站外观样式自然是件令人兴奋的事,让别人使用自己开发的主题会更令人兴奋。为了持续这种感觉,在公开发布自己的作品前,我们需要了解发布主题的一些要求。

熟悉主题制作过程

我们可以在WordPress手册(WordPress使用指南)中看到很多关于主题的资料,包括创建主题、制作CSS样式、模板标签等内容。设计主题前最好先了解WordPress主题的功能,模板里有关于这方面的详细文章列表。

制作主题设计计划

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

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

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

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

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

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

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

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

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

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

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

学习资源

设计主题和样式时会用到HTML和CSS引用,有时还要在代码中加入一些PHP代码,因此我们需要掌握一些学习资源以备不时之需。WordPress手册为用户收集了一些有用的资源,希望能够帮助用户顺利开始主题设计之旅。

从Default和Classic主题入手

设计自己的主题前,我们可以先学习别人的主题或样式表。但如果要达到最佳学习效果,最好选择WordPress安装时自带的两个默认主题——Classic主题和Default(又被称为Kubrick)主题。

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

参考资料

保留核心引用文件

不要删除WordPress默认文件中 的CSS引用。

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

设计WordPress主题的重点是友好的用户界面。这种友好是指,保留模板和CSS 文件中的默认代码元素,然后设计代码以更改样式,但不要删除代码引用。可以隐藏代码引用,但是删除是不可取的。

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

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

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

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

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

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

插件

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可以用模块化的元素来组成整个页面。

WordPress的Default主题使用index.php, sidebar.php, single.php (用于某个不同与存档内其它页面的单独页面), comments.php, header.php, and footer.php等文件。如果我们设计主题或样式时只依赖index.php文件,而不考虑评论、页眉、页脚等其它内容,在设计后期会遇到很多问题。

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

参考资料

样式表单结构

到目前为止,人们仍然没有形成对CSS样式表单结构的统一看法。CSS样式表单布局的关键在于,要怎样才能让用户(和设计人员)更迅速更方便地找到他们需要的信息。有些人认为可以按字母顺序排列选择器(样式标识符),这样如果用户要查找#post就只需要滚动鼠标,在页面的最下方就可以发现#post了。

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

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

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

考虑细节问题

为公开发布设计WordPress主题时还需要注意很多细节性问题。

字体

设计主题时,字体对整个版面起着重要作用。很多缺少经验的网页设计人员只用一种字体来设计主题和样式。他们指定的不是一个宽泛的字体风格,而是具体的某种字体。于是主样式标签中显示如下:

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

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

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

font-family: "Trebuchet MS", Verdana, Futura, Arial, Helvetica, sans-serif;  

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

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

我们选择主题字体时,还要保证字体是易于阅读的,同时字体大小不仅要赏心悦目,也要能够配合设计风格。

注释码

大家看过赛车引擎盖下面的摆设么?里面的各种附加功能会让新手根本摸不着头脑。我们第一次看到 PHP, CSS, 或HTML 代码时一定也是一头雾水。所以一定要记住,我们公开发布主题和样式时,用户可能也只是“打开引擎盖随便看看”,然后就无奈地离开了。

注释码也是代码的一部分,它能够帮助设计人员和用户迅速找到自己需要的内容。用户能够通过注释码识别跨模板的DIV标签,分辨模板的开始部分和结尾部分,查看设计人员对原始代码所做的所有改动。

编写代码时,我们要尽可能地使用注释码,让用户使用我们的主题时更加得心应手。

精简CSS样式表单

WordPress一直强调,代码和样式文件应该经过验证、应该列出各种各样的表方便阅读。W3C理事会互联网行业标准机构也强调说,所有网页代码都要符合他们制定的标准。因此我们设计网页时首先要了解一些最基本的标准。

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

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

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

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

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

选择一个能够快速查找、替换内容的文本编辑器可以帮我们迅速清除多余空格和字符,优化样式表和代码,最后达到快速加载页面的目的。

简写代码

简写CSS代码不失为一个好方法。虽然这不算是强制性标准,但也是代码优化的一部分。有些浏览器,尤其是老式浏览器,不能识别简写的代码,因此我们使用简略代码时要特别注意。这里有一篇简明教程可以帮助那些不了解CSS简写规则的用户。

验证

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

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

这里也有一份资源列表供不了解网页和样式表单验证的用户参考。

CSS和HTML BUGs

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

有时可能我们在Microsoft的IE浏览器上调试了很多天,让网页看起来美观大方,但同样的网页在Firefox浏览器上,页面排版可能会出错。而如果在Opera上设计页面,在IE上测试时,侧边栏又会出问题。

不过我们遇到的问题,之前别人也可能遇到过。下面这些资料可以帮助我们解决一些CSS、HTML以及浏览器方面的问题。

其它

以上只是为公开发布设计WordPress主题时需要注意的常见问题,我们需要注意的问题还有很多。记住,如果我们的主题运行时出了问题,用户会下意识地到WordPress论坛而不是我们的网站上寻求帮助。所以我们一定要保持默认代码和样式引用的前后一致,这样出现问题时用户寻求帮助也更方便了。如果每个设计人员都按照这篇文章中的操作指南进行设计,用户在WordPress论坛上发表的就不是抱怨遇到的问题,而是对自己所用主题的夸赞了。

主题设计得越好,符合的互联网标准越多,在各个浏览器上表现得越出色,那么我们的主题可能就越受欢迎。就像我们之前说过的一样,设计主题时没有具体的强制性规定,大家完全可以自由发挥。

推广主题

WordPress主题经过全方位验证和测试后,就可以公开发布了。

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

我们可以在网站的某个页面上加上一个链接,链接到以下内容中:

  • 不同页面的演示效果图或屏幕截图
  • 关于主题的说明
  • 可下载的压缩文件

使用WordPress主题一文上查找与我们主题相应的类型。加上主题说明信息和下载链接,然后根据别人上传的主题为例,为我们的主题起名,设置关键字描述。使用的关键字越多,被用户查找到的机率越大。

在WordPress论坛下的主题和模板版块中对我们的新主题做个简要介绍,附上主题和主题压缩文件的链接。介绍时使用的描述性文字越多,用户查找到我们主题的机率也越大。

使用WordPress主题中还列出了很多主题来源,我们也可以把自己的主题上传到这些来源中。

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