乐园新装:Glassy Garden 绿迎新春

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

grassy-garden-screenshot

  • 这是乐园的第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的一些基本元素,包括<html>、<head>和<body>。顺带填好<head>里的内容,偷懒的话可以去别的主题里复制一些通用代码。现在可以去WP后台启用该主题了,当然,新主题页面内什么都没有。

三、热身

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

<div id="page">

<div id="header">
</div>

<div id="content">

<div class="post">
</div>

</div>

<div id="sidebar">
</div>

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

</div>

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

四、合体

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

五、抽出

确认首页完成及其整体结构不变后,将index.php进行分解,把header、sidebar和footer剪切到对应的.php文件中去,并将index.php中空出的位置补上<?php get_header(); ?>等响应代码。此时index.php中就只剩下主体代码了,其中<div class="post">这个显示日志的部分是可以给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、评论的默认头像之类;还有什么自己没想到的…

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

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

Twitter Follow me on Twitter | Tencent Follow me on Tencent | Follow me on Moefou

相关日志

让你的Picasa畅通无阻 - Picasa相册排毒手记
让你的Picasa畅通无阻 - Picasa相册排毒手记

MP-Ukagaka伪春菜插件 for WordPress 萌化你的博客
MP-Ukagaka伪春菜插件 for WordPress 萌化你的博客

WordPress Plugin: WP No Keyword 防关键字屏蔽插件
WordPress Plugin: WP No Keyword 防关键字屏蔽插件

Merry Christmas! 乐园09年终总结
Merry Christmas! 乐园09年终总结

Baidu Sama!
Baidu Sama!

WordPress Plugin: WP-Clap
WordPress Plugin: WP-Clap

«上一篇
下一篇 »

拍手

无力吐槽,就来拍下手吧~
现在已有11次拍手,平均拍手11次。

“乐园新装:Glassy Garden 绿迎新春”有 33 条吐槽

  1. A.L.吐槽曰:

    咱刚开始独立的博客刚好要折腾主题~~虽然自己制作还能力不足,文章还是收做参考之用~~之前主机问题也得到园长的建议,在此感谢Thank uuu..

    另:咱Opera10.10没有圆角效果>.<~~还有关于xI4oh4o的链接有点错误……

  2. venusxx吐槽曰:

    CSS完全无效,白色一片,什么原因- -

    IE 8.0和FF 3.6都如此。

  3. xmxjq吐槽曰:

    新主题很绿很好啊~~~GJ~~~
    嘛 也祝园长新春快乐了 有事没事常上推~~~

  4. xmxjq吐槽曰:

    换了Opera10.10之后马上就没有圆角效果了……另外好像回复完以后FireFox3.5.7也变成白色一片了……是咱网络问题或者RP问题么……

  5. venusxx吐槽曰:

    又好了,真神奇。

  6. Decmes吐槽曰:

    宋体杯具了

  7. 吖Bee吐槽曰:

    无力吐槽....等待春菜能被调戏..

  8. 猫塚吐槽曰:

    哦哦哦、左下角会换人的,好奇妙!

    如此奇妙以致我把首页连刷了十遍!

    change的结果是战场原4、正装抚子5、裸抚子1……

    于是我很想指着园长大喊:

    喵的玩什么花样啊!!好好地把主题固定在抚子裸装ver啦!!ww

  9. HicroKee吐槽曰:

    在Linux+FF3.5下不错~ 我要刷~

  10. Qsar吐槽曰:

    主题不错 喜欢。。。。

  11. lovee吐槽曰:

    Mac Safari下显示效果完美>w<

  12. Hermit吐槽曰:

    大好き.并静候伪春菜插件

  13. Tr.吐槽曰:

    好主题~很吸引眼球
    抚子福利大好
    嘛~就是左下角的战场原有点崩 =_=|||

  14. 某宅.吐槽曰:

    發覺撫子裸装很親睞我= =.
    刷10次6次裸= =.
    其他4次中3次撫子= =.

  15. LIGHT吐槽曰:

    啊,很漂亮,半透明背景最近好似很流行呢。

  16. zkg03mjmk吐槽曰:

    颜色很清爽,不过个人还是喜欢把标签林放到侧栏上呢

  17. Sai吐槽曰:

    不好意思,我直接看源码把随机图看光了=www=

  18. Akibarika吐槽曰:

    safari发来贺电~ 左下角欣赏完毕,待右下角伪春菜启动=ω=

  19. Delacour吐槽曰:

    Safari in iPhone os can't handle "bottom:0px", sadly sad.

  20. eachgo吐槽曰:

    用Lunascape6来体验棱角分明~

  21. tojary吐槽曰:

    好好好清新的主题~~~~~~~

    某兔是找个结构比较合适的开始改。。。最后改到面目全非。。。。

  22. 掌柜的马甲吐槽曰:

    我喜欢绿色,赞一个~

  23. sigma吐槽曰:

    咱很认真的把4个人刷出来了~~~

  24. Dreamix吐槽曰:

    好久不见园长啦,新主题真美~

  25. lancee吐槽曰:

    主题很漂亮!
    好像刷到2%了

  26. mike吐槽曰:

    好想有一个像园主一样的主题呀..可惜自己不会弄

  27. Spike吐槽曰:

    这个 Blog 的 UI 真不错,不知道春菜究竟是怎么个玩意,能够简单描述一下么?

  28. Chakane048吐槽曰:

    -_,- blog终于好了。。。。
    现在开始改吧,要累死

吐个槽吧

欢迎光临~
伪春菜for WordPress插件V1.4已经发布,猛击这里获取~
战场原