整了个自己喜欢的WordPress主题

2010-05-14 23:57

之前那个主题名为monochrome, 当时觉得挺好看的, 这么长时间没有审美疲劳, 也不容易了... 那么, 无论如何, 你也已经看到了, 现在偶更新了页面的主题, 希望大家看起来更清爽一点. 夏天到了, 大家都要淡定, 主题也要淡定...

现在的主题基于wlsy的simpleG, 主题包里给的链接是

http://www.g9net.com/2009/02/05/wordpress-theme-simpleg.html
, 不过貌似已经失效了... 偶把这个主题改了改, 以更符合偶被广泛批评的审美观.

说明下, 当你看到这篇文章的时候, 偶的施工已经基本完毕了. 所以很多东西你是没法具象地理解的, 所以这篇文章对你来说没有太大作用, 是的, 现在你就可以停下来了. 偶的文笔很一般, 技术就更烂了. 下面这些乱七八糟的你本来就不感兴趣, 指不定里面还有很幼稚的错误. 读下去对你有百害而无一利. 你还想继续围观? 好吧, 随你, 偶已经提醒过你了...

TODO

开工, 首先明确需求, 有哪些不太爽的地方:

步骤

工欲善其事, 必先利其器. 首先要做的事情是把以前懒得没去装的web开发插件装上, Colorzilla, Firebug, Measureit, Web Developer. 还算比较大路货吧.

接下来的没有绝对的步骤之分吧, 偶是想到哪个就做哪个...

首先看到字体, 原主题作者给出的字体替换顺序是:

"Lucida Grande",Verdana,helvetica,Arial,Tahoma,Sans-Serif;

为了让偶自己觉得好看点, 我在最前面加上了苹果的圆体:

"Vera Sans Yuanti", "Lucida Grande", Verdana, helvetica, Arial, Tahoma, sans-serif

据说有句俗话是一人吃饱全家不饿, 本着类似的精神, 剩下的字体替换顺序偶就懒得变了...

接下来处理的是pre, 这个tag相对来说比较独立, 比较容易处理, 找到这一行:

pre {background:#ccc;border:1px solid #DDD;overflow:auto;padding:10px;}

这一段我有几点不太喜欢: 首先是背景太深, 其次是上下的padding有点太大了, 另外, 这段里面border加了之后基本没感觉, 于是拿过来改了改:

pre {background:#ddd; border:1px dashed #aaa; overflow:auto;padding:5px 20px;}

现在的border比较明显, 但是也没到影响读者注意力的程度. 至于留空, 上下的留空我改小了, 左右的留空我改大了.

写到这儿, 偶发现页面宽度要早点改为好, 后面发现问题也容易补救. 拿Firebug看了看, 貌似正文宽度是在content这个div里被指定的. 跑过去一看, 发现已经给到960像素了, 哎哎, 再加大那么一点点也没啥实际意义了, 宽度这一点就算了吧.

接下来偶处理的是导航条, 原主题作者估计是和他的博客有相应的整合, 所以有这种导航条的配置. 导航条的内容在menu.php里面定义, 偶把这个文件改成了:

<li> <a href="/">首页</a></li>
<li> <a href="/about/">夏恺</a></li>
<li> <a href="/books/">书单</a></li>
<li class="rss"><a href="/feed/rss/">Feed</a></li>

对, 原来的动态内容全部静态化了, 这样的问题是如果我需要在首页上添加一个主页面时, 我会需要编辑menu.php这个文件, 不过我想这个我还能接受. 另外, 这样的好处是理论上能够更快那么一点点... 现在的问题是, 这儿的空间浪费比较严重, 不符合我的习惯. 于是我想把这个导航条放到上面去. menu.php这个文件是在header.php这个文件里被导入的. 打开这个文件后我又发现可以静态化的东西了, 顺手修了一把, 然后发现工作量就开始变大一点点了. 偶要把logo, 描述以及导航条放到适合的地方, 不过还好这边的定位还不算太困难. 在把网页拿到本地编辑了十分钟后, head的问题就搞定了~

博文标题字体大小也是比较容易调的, 找到那一行, 原始大小是18像素, 调成20就可以了.

页脚要弄简单点? 还有什么能比没有更简单呢? 反正本来也不太需要页脚来着...

下一个问题是将发文日期精确到分钟, 这个日期是由the_date函数给出的, 稍微搜索了wp的源代码, 发现这个函数是能够接受一个时间格式做参数的, 于是也是速度搞定~ 改完后, 这儿是酱紫的:

<?php the_date("Y-m-d H:i"); ?>

右边边栏的文字间距, 实际上也就是最近评论这一项的间距有点不正常, 这个也是比较容易搞定的, 找到对应的内容修改就可以了. 我在widget_recent_comments这个class里面增加一点点上下的margin就搞定了.

写到这儿, 基本上只剩下超链接风格统一和i18n的问题了, 后面那个虽然比较碎, 但是不算纠结, 于是先搞定i18n吧. 在几个页面上找了找, 改了一群php文件的内容就搞定了~ 剩下一个日历的月份貌似还没改, 也懒得看了...

配色... 现在的黄瓜色我还是蛮喜欢的, 不过稍稍有点深了, 于是改亮了一点~ 原来是8aab46, 现在统统改成了7d7. 改完之后发现和header的颜色有点小冲突, 于是把header的背景色改掉.