本站启用新主题:汉化精简版 Twenty Twelve

本站自从2008年5月1日建站以来,未曾更改过主题,也就是说,那款旧主题竟然孜孜不倦地用了五年零七个月!呵呵,可见我有多么的懒,更何况这两三年都没有更新过内容,也就无所谓要改变什么,一直保持着网站能正常访问,已经是一种坚持。

话说时光飞逝,到了2013年的年底,犹豫过这个破域名是否仍要续费(12月31日到期),于是就顺便想到把WordPress主题也改变一下!最初是打算直接选用某款主题,对比预览过一些:TwentyFourteen很新,却看似太繁琐,有太多东西要修改才适合自己用;TwentyThirteen不错,功能完善,很值得仔细把玩;相对还是喜欢简简单单的TwentyTwelve,本来只是简单的改改字体和样式就直接用它了,无奈手有点痒,改的细节比较多,都不太像原来的样子了。

wpcn-twelve-view

汉化了什么?

将所有调用语言包的位置直接改为普通文本,脱离语言包。

许多 WordPress 主题是因为要适合不同语种的用户,所以代码中会有多处要调用语言包。但如果只使用中文,并未打算“国际化”发行,那么就不用那么繁琐,直接简单化,一目了然。

修改相关字体样式,更适合中文浏览习惯。

修改全局字体样式,文章标题字体样式及大小,……

精简了什么?

啥?外观明显没有原版那么简洁嘛,谈何精简? 没错,说的是精简了代码,而不是外观。

简化CSS样式文件体积,去掉不必要的样式

TwentyTwelve 的外观看似很简单,但样式文件 style.css 有35kb(1754行),各方面考虑得很周全完善。例如大量的注释内容(英文),例如 Print 就占了98行(其实绝大多数人用不上),另外由于它要遵循 WordPress CSS编码标准,……,简化之后的 style.css 大约13kb(仍然嫌大,用一段时间看哪里要修改,以后待完善)

剔除不需使用的功能(随之删除相关文件)

例如:自定义页头背景图像(custom-header),优点是便于从后台使用,却伴随着相关的不少东西。其实我们并不是经常要频繁地修改使用,真正要改的时候直接在FTP替代图片或改CSS就可以了。……

删除多余的目录和文件,简化某些文件

在不影响主要功能的前提,删目录 inc、languages、page-templates,删除及简化某些文件。
其中 functions.php 从17.3kb 变到 1.8kb (因为删除了不需要的功能和冗余的注释);
所有 php + css +js 文件(不计算图片),从120kb 变到 38kb(觉得还是有点大,待完善);
至于图片素材,原主题不使用任何图片,我目前用了五个图片共 21.8kb。

题外话:简化了代码,有什么弊端?

众所周知,如果要把主题发布到 WordPress官方平台,供全球用户下载使用,那么就必须遵循 WordPress 的 PHP编码标准CSS编码标准 等等,因为要方便所有用户对代码的阅读及修改使用。如果没有这个需求,那么也就无所谓遵循相关标准了,能简洁就简洁吧,你可以去查看百度首页的源代码,所有 html,css,js 都写在同一行!但那样也就非常非常的不便阅读和修改,我们没必要那么干,适当就可以了,权衡于简洁与便利之间。

增改的细节:

1)文章页面(single)页头meta 自动生成 description 与 keywords

此处的斟酌:某些主题(包括我以前做的)喜欢统一在 header.php 用 if 语句判断是否为 single,如果是,用摘要作为 description,如果不是,用网站简介作为 description,细想会发现问题是:single之外的绝大多页面会有相同的description,无疑这是个弊端。

于是决定:只对 single 生成 description 与 keywords,其它页面没有这两个东东,让搜索引擎根据内容自由发挥(肯定比使用大量相同的 description 更为友好)。同时,为了减少多余的 if 行为,让 single 加载 get_header( 'single' ),调用的不是 header.php,而是 header-single.php(比其它多了几行内容)。依此类推,如果觉得有必要,如果喜欢对分类和标签也添加描述,亦可让它们调用个性的 header,别忘了 get_header 是支持参数的。

2)增加对常用插件 wp-pagenavi、wp-postviews 的支持,及相关样式

例如:当没有启用 wp-pagenavi,看到页面导航是这样的:

pagenav-without-plugin

如果有启用该插件,则自动是这样的:

pagenav-with-plugin

3)添加边栏默认显示的基本内容(而不是空白)
4)边栏列表内容不换行(超出宽度截断…)
5)增改某些样式效果,例如:blockquote 、pre、……

这里是 <blockquote> 的效果,没什么特别。
虽然尽量精简,节俭并不等于吝啬,该有的还是要有的。

/* 这是 pre 的示例,如果时常要插入代码,应该考虑便于阅读 */
a{outline:none;color:#168;text-decoration:none;}
a:hover{color:#4ac;}
6)分类页、标签页、作者页,支持显示描述介绍

支持显示描述(如果已经描述),想法是增强用户体验,且避免站内有太多的相似页面。

meta-author

meta-tag

7)评论分页的翻页导航

comment-nav

8)评论列表对不同楼层与嵌套的样式

奇数与偶数的楼层,背景颜色略有区别,相对更易于阅读。另外对于回复嵌套,既要有不同颜色也要节省代码,于是就用 rgba() 半透明效果了,无论盖几层,都与上一层的背景略不同(其实都是同一句样式)。

评论列表对不同楼层与嵌套的样式

9)评论提交表单,利用 html5 直接检测,改善用户体验

虽然 WordPress 程序本身会对评论提交作检测:是否有填写必填内容,邮件地址是否有效,……,但那都是在点击提交之后才进行的,如果漏填或填错了邮箱地址,是在新页面显示错误提示,这样多少有影响用户体验。

如果想在这处改善用户体验,且降低 WordPress 的负担,其实利用 html5 的两个新参数就可以简单解决。在三个必填位置加上 required="required",在邮箱栏加上 type="email",就可以了。虽然可以对链接栏加 type="url",但那会导致必填由 http:// 开头,所以尽量不要加。

评论提交表单,利用 html5 直接检测,改善用户体验

上面的截图是在火狐浏览,什么都不填,直接点提交看到的效果,不同浏览器略有不同。

10)暂时没有第十点了,现在是先试用试用,细节问题有待发现再完善。

因为有待完善,所以暂不分享。如果您浏览时发现哪里问题或建议,欢迎留言告诉我,谢谢!

至于 IE6 不支持 rgba、html5、css3、……,这些就忽略了,没必要为了 IE6 搞得加倍繁琐。

本文现有 22 条评论:

  1. 这个主题真的非常漂亮。得知博主是个wordpress主题作者,特前来观摩,看到第一篇就膜拜了!!

    • 董建说道:

      感谢你的浏览与回复,这是2014年的第一条评论。
      呵呵,你太言重了,愧不敢当,……

      • 没人评论是因为你很久没更新了。你上一篇还是11年的。。无论怎么讲,博主都是很厉害的至少是我们这些普通人无法比拟的。让我看这些主题的文件,我或许能模糊地看懂,可自己写的话...今天看到这个比较有意思就学一天,明天看到另一样东西,又想学学。我什么都懂,可什么都不精啊。

  2. loekman说道:

    这是不是意味着博主准备“活”过来啦

  3. 年鉴网说道:

    不错,果然很简洁。

  4. 陌羽说道:

    挺清新的,但是分页的按钮那里“...”看着不舒服

  5. 涂红伟说道:

    很不错的模板

  6. lenyu说道:

    看到楼主这么华丽的模板实在令我心动。。。。以前也看过类似的模板但还是差点。。。看的最多的就是免费部落的那个模板。。。。在楼主博文一看是博主的作品。。。。实在佩服。。。在这提个小小的意见。。。就是回复没表情。。这个差点。。看过了此模板再看其他网页对眼睛刺激很大。。。
    最后很不好意思的问下楼主能否把此模板修改成熟后共享下。。。。

  7. Kunr说道:

    觉得还是简洁点比较好。

  8. 子叶先生说道:

    不错。支持了

  9. Johnc336说道:

    Hi there, just became aware of your blog through Google, and found that it is really informative. Im going to watch out for brussels. Ill be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers! cggdkfegddde

  10. Andrew说道:

    喜欢简洁的主题

  11. eviljelly说道:

    我感觉不是很好看!

  12. 挖金人说道:

    非常好看,喜欢

  13. 拉萨虫草@来路自动链说道:

    很奇怪,你的没手机版吗?

  14. qiuyming说道:

    设计不太现代,本来不错的twenty twelve改的不好看了,可以试下twenty sixteen,或者别的wp主题,外面主题都很不错啊,别死在官方主题这一条沟里

发表评论

5 x 6 =