33

乐园新装: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、评论的默认头像之类;还有什么自己没想到的…

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

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

分享到:
上一篇:
下一篇:

相关日志

让紫色轮回——晓美焰WordPress新主题
让紫色轮回——晓美焰WordPress新主题

让你的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!

拍手

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

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

Opera 10.10 Opera 10.10 Windows Vista Windows Vista
2010-01-30 at 21:36

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

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

Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
2010-01-30 at 21:37

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

IE 8.0和FF 3.6都如此。

Firefox 3.5.7 Firefox 3.5.7 Windows 7 Windows 7
2010-01-30 at 21:37

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

Opera 10.10 Opera 10.10 Windows 7 Windows 7
2010-01-30 at 21:40

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

Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
2010-01-30 at 21:41

又好了,真神奇。

Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
2010-01-30 at 21:42

宋体杯具了

Google Chrome 4.0.302.2 Google Chrome 4.0.302.2 Windows XP Windows XP
2010-01-30 at 21:43

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

猫塚
Firefox 3.0.17 Firefox 3.0.17 Windows XP Windows XP
2010-01-30 at 21:53

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

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

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

于是我很想指着大喊:

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

Firefox 3.5.7 Firefox 3.5.7 Mac OS X 10.6 Mac OS X 10.6
2010-01-30 at 22:40

目前装的4个人已经被你刷出3个了,而且比例基本正确…还有一个2%概率的哟。

Firefox 3.6 Firefox 3.6 GNU/Linux GNU/Linux
2010-01-30 at 22:05

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

Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
2010-01-30 at 22:07

主题不错 喜欢。。。。

Safari 4.0.4 Safari 4.0.4 Mac OS X 10.6.2 Mac OS X 10.6.2
2010-01-30 at 22:28

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

Hermit
Firefox 3.5.7 Firefox 3.5.7 Windows Vista Windows Vista
2010-01-30 at 22:36

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

Tr.
Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
2010-01-30 at 23:01

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

某宅.
Google Chrome 5.0.307.1 Google Chrome 5.0.307.1 Windows 7 Windows 7
2010-01-30 at 23:21

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

Google Chrome 4.0.249.30 Google Chrome 4.0.249.30 Windows 7 Windows 7
2010-01-31 at 00:02

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

Firefox 3.6 Firefox 3.6 Windows XP Windows XP
2010-01-31 at 01:27

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

Sai
Firefox 3.6 Firefox 3.6 Mac OS X 10.6 Mac OS X 10.6
2010-01-31 at 01:38

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

Google Chrome 3.0.195.33 Google Chrome 3.0.195.33 Windows XP Windows XP
2010-01-31 at 04:46

+1 真那啥简单呢 _,-

Google Chrome 5.0.307.1 Google Chrome 5.0.307.1 Windows Vista Windows Vista
2010-02-01 at 21:39

真简单 +1 _,-

Firefox 3.6 Firefox 3.6 Windows XP Windows XP
2010-02-11 at 20:38

貌似数字越大越好啊

Safari 4.0.4 Safari 4.0.4 Windows 7 Windows 7
2010-01-31 at 01:56

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

Safari 4.0.3 Safari 4.0.3 Mac OS X 10.5.8 Mac OS X 10.5.8
2010-01-31 at 08:55

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

Lunascape 6.0.1.20094 Lunascape 6.0.1.20094 Windows 7 Windows 7
2010-01-31 at 19:03

用Lunascape6来体验棱角分明~

Internet Explorer 8.0 (Compatibility Mode) Internet Explorer 8.0 (Compatibility Mode) Windows XP Windows XP
2010-02-01 at 00:54

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

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

我喜欢绿色,赞一个~

sigma
Internet Explorer 7.0 Internet Explorer 7.0 Windows Vista Windows Vista
2010-02-01 at 11:38

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

Firefox 3.6 Firefox 3.6 Windows 7 Windows 7
2010-02-01 at 23:51

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

Safari 4.0.4 Safari 4.0.4 Mac OS X 10.6.2 Mac OS X 10.6.2
2010-02-02 at 23:47

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

Firefox 3.5.6 Firefox 3.5.6 Windows XP Windows XP
2010-02-05 at 22:28

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

Spike
Firefox 3.5.7 Firefox 3.5.7 GNU/Linux GNU/Linux
2010-02-15 at 21:11

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

Firefox 3.5.7 Firefox 3.5.7 Mac OS X 10.6 Mac OS X 10.6
2010-02-15 at 23:25

简单地说,它是出现在屏幕上的一个挂件,通常会以特定的角色形象显示出来,除了给玩家解闷外还可完成一些其他电脑功能。
更具体的可参考维基百科:
http://zh.wikipedia.org/wiki/%E5%81%BD%E6%98%A5%E8%8F%9C

Safari 4.0.5 Safari 4.0.5 Mac OS X 10.6.3 Mac OS X 10.6.3
2010-03-25 at 13:16

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

吐个槽吧

Don't forget. Always. Somewhere. Someone is fighting for you -- As long as you remember her, you are not alone.
晓美焰