乐园新装：Glassy Garden 绿迎新春

Ariagle — Sat, 30 Jan 2010 13:01:50 +0000

最近本人在博客和Twitter上都相对不太活跃，那是因为我在赶制新Galden和WP主题。尽管我不想在新主题上花太多精力以至于占了Galden的道，但这次主题依旧花了不少时间。本次换装距上一次已有半年之久，参考了不少设计类的站点，简介如下。

这是乐园的第5款私有正式主题。
继承以往风格，以绿色为主。采用透明背景，增加视觉享受。
保留原先的整体布局。尽管之前考虑过新型布局以整合正文及侧栏日志，但最终因比较复杂和时间问题而放弃，还是保留大家的习惯。
通过W3C验证。另，用CSS私有属性实现圆角，因此IE用户只能看到冷冰冰的方框而不是圆角。
正式不兼容IE6。IE6将无法正常显示乐园的主题，我们会在侧栏对IE6用户发出提醒。此外主题在IE7下似乎也不算正常。
继承以往的特点，采用变换式背景，不同背景出现的概率各异。
在Mac中显示的效果比在Win中的要好。

正如各位所见，本次除了换上新主题外，还启用了伪春菜插件。当然，这只是个预览版，插件仍在研发之中。在将来的日子里各位也许能在乐园看到伪春菜不断更新，直至正式发布。

此外，应xI4oh4o的要求，启用了HighSlide特效。尽管我在最开始崇尚简介、轻量，但增加用户体验也是必要的。不喜欢HighSlide的园友可通过浏览器超级拖拽等方法自行解决。

为了照应主题，本期不谈ACG，我们将目光放在WordPress主题制作。我曾经谈过个性主题的重要性，因此我们坚持制作符合极乐园的私人主题。要想正经弄好博客，属于自己的主题是不可少的。如果你是WP初心者，我爱水煮鱼的主题教程对于入门进阶应该会有一些帮助。如果实力不济或是精力不足，也可选择WP JAM等组织代做，尽管本人并不推荐。无论怎样，官方文档永远是你折腾WordPress时的好伙伴，此外WordPress啦翻译的中文文档也可成为利器。

下面仅谈谈园长的主题制作个人习惯，只谈大体过程而不涉及具体细节。虽然没有巧妙的高招及所谓正规的方法，但毕竟是自己摸出的一些方法，相信对制作WP主题的初心者会有些许用处。

一、脑补

首先考虑的是是否到了该换主题的时候，当然这其中最重要的还是你想不想弄主题。接下来要考虑新主题的样子。要把博客装扮成怎样，脑子里要有个印象。如果脑子不够用可以画下来，当然园长一向用的是脑补，我们不是设计师。同时得收集好主题制作中需要用到的素材。这一过程也许会花很长时间。

二、前戏

策划好后，就开始初步的编码了。当然很多时候我们是边写边设计。

想好你主题的名字，并以此命名一个新文件夹，在里面新建index.php和style.css。按照WP的规则写好style.css里的说明，然后在index.php里写好HTML的一些基本元素，包括、和。顺带填好里的内容，偷懒的话可以去别的主题里复制一些通用代码。现在可以去WP后台启用该主题了，当然，新主题页面内什么都没有。

三、热身

接下来为主题搭建基本的骨架，包括header、content、sidebar和footer等内容。对于基本的二栏布局，本人习惯以下模式。

然后可以写一些样式来确定它们的布局，比如float。

四、合体

现在可以开始为主题正式添加内容及样式了。可以从顶部开始，一路做下来。这时得把整个博客首页弄出来，包括顶部尾部信息、日志部分和侧栏部分，因此工作不少。工作对象是index.php和style.css，因此最后得到的是完整的首页（访问日志等页面时会自动调用首页index.php模板）。

五、抽出

确认首页完成及其整体结构不变后，将index.php进行分解，把header、sidebar和footer剪切到对应的.php文件中去，并将index.php中空出的位置补上等响应代码。此时index.php中就只剩下主体代码了，其中

这个显示日志的部分是可以给single、page等页面重用的，可将其保存到post.php中在将它include进来。

完成后新建single.php和page.php，将index.php的代码复制进去，这样single页和page页就有独立的模板了，待会可以对其进行特殊编辑。如果你想做细，可连search.php、archive.php等模板一并写好。

六、第二炮

刚刚做完了整体的样式，接着还有一个更令人头疼的东西：评论部分。评论部分可以说是整个主题制作中最难最麻烦的部分，要是你没有下定决心禁用博客的评论功能，只有啃下这块硬骨头。初学最好的办法是复制一份默认主题里的comments.php，读懂大致意思后再开始制作。

整个评论部分又可分为两块，一块是评论列表，一块是输入框。最麻烦的是列表部分，得在functions.php中加上wp_list_comments()中callback需要的函数，这一部分请自行寻找教程。如果允许评论嵌套，还得考虑缩进等问题，这可不是省事的活。折腾好后将其加到single.php和page.php即可。

七、尾戏

此时主题已基本弄好了，但还未正式完成。需要再次微调，使整体协调；要为涉及到的插件编写新样式；要检查浏览器的兼容性，IE或许会让你眉头一紧；把一些细节补完，比如screenshot.png、评论的默认头像之类；还有什么自己没想到的…

当博客正式换上新主题而又没什么问题的时候，就基本完工了。当然在这之后的使用期间还会有无数次的调整。

最后，预祝大家新春快乐。

标签: Blog, Theme, WordPress 33条吐槽

霉运走开，好运快来

Ariagle — Fri, 10 Jul 2009 12:59:16 +0000

希望放假以来的所有霉气，能在极乐园新主题发布之际全部退散。没错，我们换上了WordPress新主题。现在距离换上之前那套简陋的主题，已有差不多半年之久了，是时候抬头换面了。以下是这次新主题的相关说明，使用RSS阅读器的园友请点进来看主题。

名字又长又臭又土。
同先前一样继续使用绿色为核心，配色以绿+白+灰为主。
结合了以往见过的一些WP主题的元素，看起来不陌生但又不失个性。
放弃三栏布局，回归两栏主题。我还是更喜欢宽度大一些的正文区域。
Header和Footer采用变换式背景。图片有十多张，权重各有不同，各位温柔点刷哟。
通过W3C验证。

在做这款主题之前，对于主题具体要做成什么样子我并没有很具体的想法。只好在实际制作过程中一步步将模糊的印象具体化。配合某些背景图后，最终效果跟印象中的已经比较接近了。制作这款主题花费了我不少时间，主要还是因为技术不足。前期悠悠荡荡，直到最近这两天才下狠功夫攻下这主题。不少时间都花在了一些脑残的小问题上，都是因为自己不够料。不过对于自己这种业余初段小白来说，最后做出来了，还是可以小小高兴一下。不过，跟上一次比，制作这款主题的时候确实上手了很多，过程顺了不少。至于最后的图像问题，也许是我没有天赋，自己解决不了了。感谢Sai教会我处理图像渐变，尽管这个问题相当初级……

制作过程中最大的障碍，仍是调和IE的问题。主题崩溃程度与IE版本号成负相关关系，而在非IE内核的浏览器中主题效果几乎一模一样。主题已在Firefox 3.5、IE7、IE6、Opera 9.6、Safari 4、Chrome 3下测试通过，其他版本的浏览器未作测试，但效果已经基本相同了（IE6会差些...）。虽说通过了W3C验证，但主题实际上还是有些硬伤。

空壳主题是符合W3C标准的，但不能保证博客日志产生的内容符合W3C。
很久以前的巨型贴图会将布局撑破，导致侧栏在IE6中崩出。
较长的日志标题会撑开，导致标题与井号前缀换行分离。

希望熟悉CSS的园友能提供关于后面两点的帮助。至于没安有微软雅黑的同学，乖乖看宋体吧，IEer也请自重。其实这次主题最难的应属评论部分，差不多花了我一天的功夫。以前我一直奉行简单为主的原则，评论都很“原生态”，要回复人的话就手动[at]。这次使用了WP提供的wp_list_comments来生成评论，实在是乱了我一把。在这里提醒各位想要制作WP主题的园友不要忘记加上callback来自定义布局。现在吐槽已经支持嵌套了，最多可套6层，以后就不用手动加[at]了。至于其它一些细节的地方，作为初级选手的我已经抠不到了，发现了再改吧。最后就是更新了Logo。

另外，萌园似乎已经关闭很久了。我们争取在近期完成备案并转入新空间。再另外，Bangumi的Beta4也于昨日上线了，真让人有种带队搬家的冲动呢。

标签: Blog, Theme 23条吐槽

Lo极乐园 » Theme