WordPress主题开发总结(上):设计与思考

Table of Contents

经过几天松松散散的开发,总算把主题开发完了。昨天换到乐魂上之后,遇到一些问题(浏览器的兼容性,屏幕分辨率),以及 星星沙 提的一些想法,晚上进行了一些修改,今天上午依旧在改 CSS ,现在终于问题不大了。

结束了之后,打算写两篇文章,一篇用来做技巧性的总结,为什么不是技术总结,而是技巧总结?就技术来说,CSS,PHP,WordPress,我都了解的不太多,所谓技巧就是从这里摘一段,然后改改,实现了某个功能,相对技术这个冠名次而言业余一些吧。另外一篇用来总结一下网站设计和开发过程中,引发的一些思考。以下是上篇《设计与思考》。

新事物产生的原因往往都是一样的,因为有人不满足,便有人去尝试,去探索,于是新的事物就出现了。同理,因为旧的主题(MusicSoul)不能满足我的需求,所以我决定开发一个新的主题。

1 谈一谈MusicSoul

MS(即MusicSoul,以下均简称为"MS")的开发本身,就是我的一次尝试,有人觉得挺不错,我只能说看似不错,觉得不错只是因为那几个图片的映衬产生一个华丽丽的表象。

[[http://www.perfect-is-shit.com/2013/01/08/wp-theme-design-and-thinking/musicsoul/][musicsoul.png]]

  • 站在设计者的角度来说。首页(index.php)的突破性比较大,包括最近发布音乐和一个背景音乐播放器。首页的设计为这个主题的增加了一个亮点。乐魂的最大缺陷在于不能连续播放歌曲,一个音乐网站如果不能连续播放歌曲这将是多么大的一个败笔!加上一个音乐播放器之后,别人一打开网站不用任何操作就可以连续的听到歌曲。而与此同时,MS 的问题也出在首页上,要想听最近发布的歌曲的时候,需要进行页面的跳转,然后点击视频,这需要两次点击。就设计而言最大的问题在于,首页和其他页面找不到一个关联点,不知道你能否理解这种感觉,举个例子来说:就好像西服里面穿的是毛衣而不是衬衫领带一样。给我的感觉就是很别扭,在一个网站设计中首页和其他页面的设计理念完全不一样。首页的突破性和其他页面的平庸脱节太严重。还有一个问题是网站太"长"了,sidebar 和 index 两者时间的长度差距很大,整个网站很不协调。
  • 站在开发者的角度来说,MS 的问题在于细节做的很差,尤其是评论那一块,所以在上传到 WP 以后,我立刻使用了多说评论来替代。在因为网站的后台是 WordPress ,每次更换首页歌曲都需要改 index.php 文件,这是很麻烦的一件事情。我们都知道很多开发者在开发过程中做的很多工作都是分离,耦合性越低越好。
  • 站在用户角度来说,网站提供的信息量不够和信息表现方式太杂乱。最重要的一点是:我要在最短的时间内可以听到最新发布的歌曲,其他音乐分类要有,音乐标签要有,热门音乐要有,搜索功能要有。网站的杂项表现方式仅仅在于一个侧边栏,因此导致侧边栏变的很长很长。
  • 站在乐魂的拥有者来说,我希望乐魂成为一个音乐网站,而不是音乐博客。是希望他成为一个听音乐的地方,而不是一个记录音乐的地方。首页做到了,而其他页面没有做到,到处充满了博客的气息。希望别人到了这个地方,觉得"哇,我找到了一个听歌的地方,里面好多好听的音乐",而不是"哇,这个站长好喜欢音乐,写了好多关于音乐的博文"。这个观念的转变只有通过主题来体现,MS 没有做到。

MS 成功的地方在于:

  • 主页的突破性设计。
  • 增加播放列表,实现了连续播放(尽管使用的是别人的播放器,但是这不重要)。
  • 配色的尝试。
  • 它的失败产生的思考。
  • 技术积累。

2 重新设计

我有重新设计的想法其实在开发完 MS 之后就有了,迟迟不做只是苦于没有灵感。前段时间翻了翻《CSS网站布局实录 (第二版)》,里面有些网站的链接,我点进去看了看。把 MS 存在的问题想了想解决方案,以及我想乐魂成为什么样的产品。于是我有了以下想法。

功能需求类: 1. 坚决不做博客记录形式的音乐网站,首页不能提供一堆的文章。那放多少呢?一篇,对,只放一篇最新歌曲即可。而且这应该占据网站的主要位置。还有一个观点支持我这个想法:我想来乐魂的用户中无非分成三类,第一类是一直关注的忠实粉丝,那么他/她关注点只在于新发布的文章;第二类是误打误撞进入网站,这类人只需要给他留下一个很好的印象即可,那么简洁,整洁是一个很好把握点;第三类是通过搜索引擎搜索而来的,那么他将停留在固定的文章页面。也用这个观点来回复星星沙的问题,她觉得在最近发布下面应该有一个翻页的按钮一直可以翻页。我觉得这个完全没有必要的,一个音乐网站有成百上千首音乐,通过翻页来实现是非常不明智的。取而代之的应该是良好的音乐归类,音乐标签和搜索功能。

提供音乐搜索,并且音乐搜索一栏应该放到网站一个醒目的位置上。搜索功能对于一个大量数据的网站中,其作用是不言而喻的。

  1. 良好的音乐分类,这也是一个很重要的点,和搜索的重要性等同。 4.

要有连续播放的播放器。 5. 文章要显示阅读次数和评论次数,阅读和评论次数可以说明一个文章的热度,也就对其中的音乐受欢迎度一种肯定。

  1. 首页应有热点文章列表。 7. 首页应有热评文章列表。 8.

首页应有最新发布文章列表,并标明发布日期。这一来提供了一定的简便性,二来也可以告诉用户网站发布歌曲的频率。

  1. 网站的数据统计,尤其是音乐的收录数量可以为网站增添不少充实性。

基本常识需求(也就一个网站必须有的部分):

  1. 菜单栏(顶部),可能有人会说导航菜单应该是最重要的才对,但是对于乐魂来说,真正的导航应该是音乐分类。
  2. 底部声明。

按照模块的重要性进行排序:

"最新音乐>分类=搜索>背景音乐播放器>最新发布文章列表=热点文章=热评文章>数据统计>菜单栏=底部声明" 基于以上我进行了如下模块布局:

<div id="menu">
</div>
<div id="wrapper">
    <div id="content">
        <div id="newpost">
        </div>
        <div id="list">
            <div id="newpostlist">
            </div>
            <div id="hotclicklist">
            </div>
            <div id="hotcommentlist">
            </div>
        </div>
    </div>

    <div id="sidebar">
        <div id="searchbar">
        </div>
        <div id="subsidebar">
            <div id="category">
            </div>
            <div id="other">
                <div id="bgmusic">
                </div>
                <div id="siteinfo">
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer">
</div>

不上传图片了,因为现在网站的布局是经过的改动之后的,过程中并没有留下截图(我写东西的时候,不喜欢被打断,通常在完成之后再进行总结)。这次的布局我不打算采用居中对齐的方式,而是从左向右的流动。MS 其中一个问题是太"长"了,所以新主题固定了模块个数,采用了三栏的布局方式,希望达到不需要什么鼠标的操作,把所有想表现出来的信息映入眼帘。WYWG,所见即所得。

颜色选择采用了 MS 的主题色(暗色),我想通过颜色表达出来的不是一个苍白无力的感觉,也不是绚丽夺目的感觉,而是那种清新、简洁、干净的感觉。所以色调偏暗,颜色不能太多,也不能单一,但是要统一并且通过颜色的不同突出模块。

另外一个想法是希望在新主题上把 LOGO 体现出来, 我觉得做东西内部的耦合性越低越好(相对开发者而言),而表现出来的耦合性越高越好(相对设计者而言),达到的效果是不需要你多么的强调,而是别人下意识的觉得这两者是一体的。LOGO我想采用绝对定位,这是我模仿一个网站做的。

新主题的名字很难起,不得不说,起名字是一个很艰难的过程。后来思考了好久,决定命名为 "Shoo",远离尘世的喧嚣纷杂,静静的听音乐。

抱着以上的这些想法,我就开始编码了,编码的过程中遇到的技术问题,及其解决方案,我会在另外一篇《技巧》中整理。开发的过程中,我尽量把细节的部分做好,就这一方面 Shoo 要比 MS 强的多。

(此处略去开发相关N多个字……)

就这样网站开发完毕了,上传 FTP,然后告诉 星星沙 这一喜讯(星星沙负责网站的内容,我负责网站的维护),没想到碰了一鼻子灰。当时我真是有点愤怒。当你觉得非常优秀的一个产品,告诉别人时,可是别人觉得一无是处或者感觉平平淡淡的时候。我能怎么办?愤怒之后是无奈,无奈之后呢?改代码呗,有什么办法。于是那一个晚上我都在亢奋中度过,乃至第二天早上我躺在床上都在思考如何解决问题。

问题是这样的,她在她的PC上打开布局"失真"了,sidebar 跑到了 content 的下面,很凌乱。(后来我也在想为什么这个主题她不喜欢呢,现在我想答案是人的第一感觉不好,后面的感觉很难调整过来。)遇到这种情况,我第一反应是浏览器兼容性问题。她是 360,IE6。我就建议她下一个 firefox 试试,因为我这边使用 firefox,chrome,IE 9,我怕是兼容的问题,后来她下了一个 firefox 还是问题依旧。很快我想到了第二个问题,主题太宽了,如果屏幕分辨率低的话,可能会出问题。她的分辨率是1280,我的是1366,当时调成 1280 时,问题重现了。

问题已经知道了,就是主题宽度的问题。可是我没法去修改,因为能调整的只有左边距之外,最近发布、热点文章、热评文章 的 200px 已是底线,也就是说 content 部分需要 600px ,而 sidebar 中音乐播放器的宽度 250px 是不能减少的,category 和 音乐播放器是并列的所以也需要 250px 。200px * 3 + 250px * 2 = 1100px。这仅是内容宽度,边界和间隔 180px 是不够的(不要忘了,最左侧还有一个LOGO)。改本身不需要多少技术难度,只是布局的背后藏着设计的理念,如果理念改了,整个的主题存在的意义就不大了。

怎么办呢?我想到两种方案,要么横向紧缩,要么把纵向扩展。不管哪种方案,中间的 600px 位置是不能变的。

横向紧缩

  1. 缩小 LOGO 的大小,减少左侧的间距。
  2. 音乐播放器的大小不能变,只能缩小 category 的大小。

这个实现,很简单。她说多久能好,我说 2 分钟,2 分钟之后她刷新还是不行。我改屏幕分辨率之后,我这边是没有问题,她那边还是不行。问题出在哪里,我也不知道了。这个方案我很快就放弃了,我也没有去纠结为什么她那边不行(现在明白了是浏览器 cache 在作怪,已经证实),原因是我很不喜欢这么做。1.LOGO 缩小的太小,已经没有存在的意义了。2.音乐分类和音乐播放器并列,但是宽度相差太远,及其不协调。

纵向扩展

3 栏布局变两栏,把 搜索、分类、音乐播放器 和 siteinfo 放到一栏中。这样就节省了 250px+ 的宽度,但是这样一来的话,MS 存在的问题依旧在 Shoo 中存在:侧边栏太长了,光音乐分类一栏和 content 本身的长度相差无几,总体效果可想而知。

这两种方案,都被我否决了。

与此同时,星星沙反馈给我两外几个信息:

  1. 左侧的 LOGO 感觉和整体不协调。
  2. 没有 MS 简洁,她还是喜欢 MS 的主页面。
  3. 以前的那个球怎么不用了?!(解释一下:她说的是很早以前的主题通过 WP Cumulus 这个插件实现的 3D标签云)。
  4. 最近发布这一块,应该有一个翻页的东西。

第二天我进行了一些思考,我需要一些权衡,做了以下决定:

  1. 左侧的 LOGO 删除。
  2. 音乐播放器模块删除,后补。
  3. siteinfo 模块删除,将站点信息放置于footer(网站底部)。
  4. 网站居中,固定大小,而不是从左向右流动。
  5. 增加音乐标签这一模块和音乐分类并列。
  6. 在 footer 加上网站的测试环境和分辨率要求。

由于没有了音乐播放器,sidebar部分减少了 100px,删除了 LOGO 部分,减少了 100+px。因为总体宽度的估计,我也可以明确的告诉别人网站需要的屏幕分辨率是多少了。把音乐播放器独立了出来,也就有了这个页面:http://www.yuehun.in/musictaste.html 这也是无奈之举。

[[http://www.perfect-is-shit.com/2013/01/08/wp-theme-design-and-thinking/musictaste/][musictaste-1024x497.png]]

在这之后,也就成了现在的 Shoo:

[[http://www.perfect-is-shit.com/2013/01/08/wp-theme-design-and-thinking/shoo/][shoo-1024x749.png]]

以上就是WordPress主题 Shoo 中的设计和开发历程。下面说一说站在设计和开发之上产生的一些思考。

3 思维的局限 **

每次写东西(软件,文章等等),总感觉很陈旧,想突破却难以突破。

是技术的问题?技术和人的思维是相互促进,相互阻碍的。有的时候,你会发现如此简单的问题,却想的如此之难;有的时候,觉得技术上的不可行,导致了思维上的不敢想。

是视野的问题?视野太窄,坐井观天。突然的变通、视觉的冲击,觉得难以理解和接受。

4 牢笼 **

我一个人去做一个产品,需求、设计者、开发、测试、维护,同时我还是用户。这几个人的角色同时强加一个人的时候,很难去驾驭这几个角色,在做需求的时候,总是牵扯到技术的实现点,可行度,而不是抛开一切,去想这个产品;在做开发的时候,设计总是随着略微的变动,并不是因为设计的需求而去,而去这么做,有的时候,是因为技术上我能做什么,不能做什么决定了去做什么,不去做什么。有点本末倒置,但又无可奈何。最难以驾驭的是用户这个角色,让我有这个感慨是当我让星星沙看网站之后,她的着眼点和我的着眼点完全不同,我首先看的是网站的功能实现,包含的信息量有多大,信息的表现形式,细节处理,两个主题的差别优劣势,而她不是。她突然提出"球"怎么没有了,让我突然不知所措,觉得她的问题很滑稽、很不可理喻的同时,我也在反思,我是不是陷入了自己的"牢笼"中。想让一个人切实的站在不同的角度去思考一个问题,我觉得是不全可行的,因为有"障"。

5 权衡 **

现在 Shoo 和我一开始中想象中的 Shoo 还是有一些差距的。后来,我想通了。我需要这种权衡来将理想变成现实,我不可能让所有人的浏览器分辨率都和我一样是1366,也不能让所有都用IE9。整个的开发过程中,都面对着这样的问题,当可行性与理想遇见冲突时,需要两者都作出相应的退让,将理想模糊,同时通过技术,让理想变的可行。这种权衡并不是妥协,让步,而是用更好的策略、更好的技术,逐步像理想靠近。抛开技术,生活中,相信也是同样的道理。

本文结束,感谢阅读!

Date: 2013-01-08 09:55:46

Author: JerryZhang