基于“Twenty Twelve”的子主题,“胜利之Y”启用!

锵锵!时隔两年半,换主题!循例先让前任主题上场告别!

从时间上看,此任主题在位最长。通常如果我觉得博客主题要换,就会快快动手。但前任主题真的很长一段时间都没让我有换掉的冲动,尤其是顶部的阶梯,每次看都觉得激励上进。

“前任主题”这样叫法,因为两年前我没为她命名,下文且继续如此累赘称呼。这段时间学习研究了很多网站,我发现虽然从美观上前任主题还能看,但技术上颇需要动大手术。

首先,这两年也是智能手机、平板电脑等大普及之年,很多网站都设计成自动识别浏览器宽度并反应出不同布局,但前任是固定显示,要缩放;其次,网站设计渐渐多采用HTML5标准,为了规范也该升级主题。

WordPress为用户提供了非常方便改主题的方法——子主题。简单而言,是“你的是我的,我的还是我的”,此模式可以令子主题代码非常简洁,也不怕失手改错却难找问题代码。

似乎从Twenty Ten(2010)开始,Wordpress就以此命名自带主题。当日Twenty Eleven出现,我稍看过,不喜欢其单篇文章没有侧边栏的布局,且觉得它比Twenty Ten复杂不少,就没换。到Twenty Twelve,认真看其代码,的确比两位前辈优秀。而且有子主题如此方便的修改方式,何乐而不换?

Twenty Twelve已经很优秀,但“不多”修改还是花了“不少”时间,若干心得记录下:

1. 标题下的时间。Twenty Twelve默认文章标题下是留言数,文章分类和时间则在全文底部。由于Twenty Twelve把分类和时间写在同一函数,一度觉得很麻烦不想改,但我觉得时间细节相当重要,自己看文章也非常关心发文时间,而且希望看完标题就知道而不是看完全文。结果我用笨方法,从Twenty Ten复制旧式的时间和分类函数,反正它们都同个Wordpress娘家不会水土不服。和之前一样,我把它们向右对齐,相对于标题和正文的左对齐有点错开,不至于扎堆在左边。

2. 内边距。我猜这个细节不是很多人注意到,因为我发现很多大站都有同样问题。这主要涉及选择文字时,譬如你想选择文首的“锵”字,如果你从左边滑鼠标到右边,很多时候会整段都选了,因为字紧贴边框,一选就会选中一段。我摸索到用margin(外边距)会有“贴边”问题,用padding(内边距)则没有此问题。

3. 留言嵌套的ie兼容。我用firefox浏览器,完成小部分修改后,开傲游、ie8、Chrome看看兼容,却发现傲游和ie8都有大问题!字过分大,而且留言嵌套不了。此时子主题优势充分显示:我先改回父主题,即没修改过的Twenty Twelve,显示正常,所以是子主题出问题。我才修改了四个子主题文件,逐个排查也不太复杂。

结果发现问题主要有二:子主题命名不能有“-”减号;ie似乎不认原有的children标签语句(style.css 1580行“.commentlist .children”),排查良久才发现可能是定义和命名问题,改成“comments-area .children”ie就认得了。

4. Px和rem和%。Twenty Twelve大部分涉及长宽大小的语句都用了px和rem两种写法,据说是为了浏览器缩放大小之方便,涉及整体布局部分用%较多,我不知道这多大程度影响不同媒体的显示效果,我照样用%布局,px和rem兼用,保险。

5. 大背景。基本完成大小布局后,则轮到最“面子”的部分。审美观点多年不变:白底黑字最好阅读、简朴才耐看、视觉冲击越厉害越容易审美疲劳……但全白也稍觉沉闷,有点很淡不起眼的图案颜色稍微点缀下为佳。如同前任主题的石阶,淡得若隐若现,耐看。我突然想起半透明效果,于是在本地用一张泰国蓝天白云大照片测试,配以白色半透明衬底——惊艳!好像做了本漂亮的杂志!

但,不合适。虽然网络比两年前颇有进步,似乎不该顾忌用大图,但我总觉得大图影响网页加载速度,而且不能认为所有人的网速都快;其次,“视觉冲击越厉害越容易审美疲劳”之顾忌,我不认为自己有闲情像换桌布一样换博客背景;其三,阅读体验问题,在有图案的背景上阅读,看歌词或杂志小段文字没问题很漂亮,但阅读稍长的文字就觉不够“利索”。

我试着取半透明后的蓝天色做纯色背景,效果却相当难看。为什么几乎是同样的蓝色,在一个不起眼的位置飘点白云和没有白云效果差这么远?想来大图做背景有其优势,它令页面整体质感变化不是小图能代替。两年来我去多旅行拍得好多靓照片,选一张做背景,时空相应,也省工作量。

说来之前某日,我翻起前任主题的设计文件,才想起导航栏的纹理取自上海世博会西班牙馆的“藤”,所以以自己照片做素材不是第一次了。但页头的石阶我一直想不起其出处,直到今天中午新主题背景定案后,猜想是华山,找原图,果然:

看得出来吗?我截了上面有护栏的部分。当年新主题上任我提及“无奖”竞猜页头图片出处,没人猜。时隔两年开估,连设计者都差点忘记答案。这张照片在华山爬行记里没放出,难怪没人知道。

花很多时间测试了很多照片,简单PS,令图片几乎全白却还带些许纹理,算是继承前任页头图片风格,也因为我两年依然喜欢如此风格。看似简单的要求实际去做才发现有不少细节要点:1440×960 px,大小50k以下(本来30k,放宽标准了),细节不能损失很严重有明显马赛克,纹理在右侧,左侧平滑点方便阅读,背景平铺,上下左右衔接不要太突兀……

最终选定了一张“胜利之Y”。前任主题我就把SNOWYY藏在不常识背后,这次也把Y藏在大背景。(你们都看到还叫“藏”吗?)不知这次会否有人发现其出处?背景原照片没有在游记出现过但它的姐妹照出现过。(提示:当年华山是我走上的最高海拔;这次则是后来走上的最高海拔。确定选背景时倒没想到这个共同点。)猜到……依然无奖。关键是不好奖,同城熟人还能送几分钟按摩,留言区的重酬照片你们都不领奖,叫我如何奖好?

6. 手机模式。(第5点写得好长!)新主题下用手机看不常识不用缩放,用手机翻煲不常识旧文就方便了!——有这样的骨灰粉丝咩?但可能有些许bug在博客标题和博客描述区域。尤其是博客标题,因为换成了图片式的(老字号)招牌,如果你手机上网不加载图片就看不到不常识的大标题。类似问题还出现在打印预览,我简单看了几个大站都有类似问题,包括wp娘家Wordpress.org,firefox下的打印预览都不见了标题。留待以后看能否解决吧。

7. “胜利之Y”。日语里倒常听到“胜利之剪”,石头剪刀布的剪,和胜利手势一样。“Y”也是胜利手势!换博客主题隐约和换生活方式相关……?感觉之前每换博客主题都有个新开始,那我也以此新主题送给自己,祝愿自己创业顺利,困难肯定有,如同当日在那座山做“胜利之Y”的手势,迎难而上!

以上,新主题还有一部分未完全设置好,如相关文章、所有文章等,我想试试换些插件。其它小细节如错版错位等等,如果诸位博友发现请热心提出,博主我诚意感谢。

还是惯例,展示以前历任主题。

前任主题图片如文首,旧文链接在此

kaiba留影

前前任,Kaiba,如上。(旧文

前前前任,growing up,如上。(旧文

前前前前任如上。(旧文

“胜利之Y”是建博至今第六任主题,除了第一任主题几乎完全用现成模板未多加摆弄,后五任都亲手设计修改。所以Snowyy设计sense如何变化?……

“胜利之Y”与她前辈都不一样者,有两“最”:图片最少;图片最大。

S for Shouri(勝利),S for Shengli(胜利);Y for yes,Y for Yeah!

(鼓掌,谢幕。)

32 Thoughts

    1. Vicia

      YY酱,お久しぶりです!お元気ですか?
      新主题清爽大气,用手机看了下,也十分舒服!
      话说在背景图的上下交接处可以看到藏着的Y?~\(≧▽≦)/~
      新主题生日快乐!祝你的主人一切顺利,收获满满!(;> ω <)/

      1. Vicia

        话说本来是一次性Po出来的,结果只出现了一个表情。= = 还好用back功能找回了全文。先写表情后面文字就会被吞掉的事情在别处不止一次遇到,莫非是WP的问题?>.<

        1. Snowyy Post author

          ヽ(;▽;)ノ 新主题刚上任就炸出了老熟人!!
          先打表情留言被吞掉的问题我在本地测试了下,没问题,貌似我也从来没遇到这样的问题哦……

          这张背景图总共有3个Y!两个很明显,有一个隐身得密点。(*´∇`*)

          元気です!最近看些AKB,脑中盘旋得不少日文~~

          Vicia不怎么写博了呢。快毕业了吧?祝愿一切顺利!

    1. Snowyy Post author

      哎????¢( ̄□ ̄;) 会眼花吗?眼花的错觉是什么感觉?看着舒服还是不舒服呢?

      1. sandy

        昨天用的台式机大液晶显示器,今天用的笔记本,角度不一样,真不容易看出来呢

        1. Snowyy Post author

          我发现用手机看才不容易发现呢。屏幕有色差,在我的屏幕看来隐藏效果挺不错的,若隐若现,如果全隐到看不到就没意义嘛,“犹抱琵琶半遮面”才好,呵呵……

  1. yuccy

    哇塞,以前用过黑色啊!嗯,还是后来清淡些,越来越顺眼。

  2. Vicia

    (;> ω <)/ 咦,嵌套回复只有一层?
    我距离毕业还有一段时间,最近越来越懒了,也不知道该写啥。= = 而且从变成了からてバカ以后,一写就是からてばかり……Orz

    1. Vicia

      ╮( ̄▽ ̄”)╭ 很好,证明表情那个问题是浏览器的问题,换成Firefox就没问题了。= =

    2. Snowyy Post author

      嵌套回复是3层哦,不过我设置缩进得没以前明显。(这家伙设计的东西都喜欢藏着藏着呢。)【补充,刚才特意看看css,原来那个缩进的px和rem不对等有点失误,调整好后缩进稍微明显了点,谢谢提醒啊!】

      からて才衬你的头像啊!!!有机会我们对打下?(您姐姐手下留情,pia飞但别pia太远~)

      浏览器对表情水土不服,发现冷知识了~

    1. Snowyy Post author

      ¢( ̄□ ̄;) 看到您的ID我真是旁边的表情!欢迎光临小博,谢谢建议!

      好像之前查资料在某些网站的留言区见过您的ID,所以一眼就认出了,系统何以判spam?幸好没错删!

      大发兄觉得默认评论不好看吗?我倒觉得挺简洁还不错。好像从来改主题都没怎么动评论区呢,可能觉得靠“发现错字”和颜文字增了点光,就觉得默认样式还可以。

      您的网站很好看!收藏了,要好好学习下。个人感觉一些做设计的网站本身做得太花哨不好看,您的网站真设计得不错,颜色搭配得挺好,也看得出用了很多“技术”。

      您网站评论区按“表情”是没有反应的,是bug吗?

        1. Snowyy Post author

          ¢( ̄□ ̄;) (惊讶)谢谢土木兄欣赏!我也加了您的链接和大发兄的链接!链接暂时在侧边栏随机展示5个(过犹不及太多反而没人点),链接页待修改就没放上来。

          最近有点忙没空更新频繁,呃,或者说通常都不更得频繁,但自信质量对得起土木兄的推荐!(;> ω <)/

      1. 大发

        哈哈,你讲话不要这么客气~好别扭,默认那个meta和reply_link都不好看,还有就是官方的字体都是以EM为单位的,之所以这样是因为国外比较注重无障碍什么的~实际上这样的中文字体实际体验并不是太好~个人推荐中文字体表”Hiragino Sans GB”,”Microsoft YaHei”,”WenQuanYi Micro Hei”,这样windows linux mac下都有不错的体验,个人建议哈。

        1. Snowyy Post author

          羞涩怕生,礼貌点好。(*´∇`*)

          默认的meta指显示时间的部分吧?大发兄觉得不好看吗?我觉得那算是大众脸不出彩但也不算不好看吧?~~(°°;))))

          官方字体现在是rem不是em呢,据说rem是新潮流= =|||,Twenty Twelve是rem和px都有,我自己加代码上去时也这样写两行了。

          我测试时有试着换好看的中文字体,但dw里的好像都一样,就优先照顾了英文字体,因为这边没汉化得很全,好几处都有英文,英文好看也挺重要啰。回头测试您的推荐,感谢tips!!(;> ω <)/

        1. Snowyy Post author

          pku的校友?人不在帝都,也没在大公司上班过,如果不是wp独立博客,我们不会有交集吧,妙哉善哉。<( ̄︶ ̄)/

  3. A.shun

    新主题更加秀气了。
    Snowyy 酱也是折腾达人啊

    几个主题用的时间不短,不经常更换比较好。即使这样也用过五个主题,好资深。
    怀念前前任那个卖萌的订阅图标,我是那个时代发现这个博客的
    前前前前任 那个好猎奇 ¢( ̄□ ̄;)

    1. Snowyy Post author

      可惜现在随着GR退役,订阅这种方式就更少人用了吧,所以我把订阅链接放在不算显眼的顶部了。

      所谓简单久了必复杂,复杂久了必简单。(呃,没这说法吧?)这次的主题几乎简得不能再简了,下次怎么折腾好?φ(..)

  4. A.shun

    背景很有意思,不过我只看到两个 Y,另一个真隐蔽,我这渣 TN 屏幕的角度和色差也不好发现。
    胜利之剪,一般是 V 么,英文和姿势都是。不过 y 和你的名字沾上边了当然更偏心

    话说现在功能更上时代了
    怎么不把 颜文字表情做成按钮呢,方便 广大 访客 (;> ω <)/,也不浪费这么好看的表情
    虽然现在拖选后拉下来也不太麻烦,但是能省步骤则省,懒人原则。好像以前就提过 – –

    1. Snowyy Post author

      另一个Y,应该是白得几乎看不到,是人爪版的胜利手势哦。

      V自己是站不稳的,要有y这样小腿顶着才够胜利。(什么y论?= =||)

      因为如果颜文字做成按钮,首先颜文字本身会变成图片。我觉得图片表情已经太多,所以能纯用字符表现表情更好玩些,而稍有点麻烦的复制粘贴正是显示那是文字符号而非图片,算是颜文字乐趣其中一环吧。要玩久不能怕麻烦,好吧这是我的懒人y论。~~(°°;))))

      1. A.shun

        多虑了。
        wp 的表情机制是用一段 php 把表情代码转换成对应的表情图片,这发生在生成静态页面的时候。
        平时你在其他博客上看到的表情按钮,一般只是 js 方式的用于快速插入表情短代码的而已。这里需要的也只是这一部,不需要去加图片和加转换的代码。
        就是这么回事 → 😛

        1. Snowyy Post author

          但说到底一个“按钮”都要是图片格式吧?字符做不成按钮……这个笑脸小头也因为有现成的小图片存储在wp自带的系统里啊。

    1. Snowyy Post author

      哇哈哈~高技术含量哦!

      把“第二层”背景色设置为none,代码是“background:none;”,你试试。

      折腾WP乐无穷~~(°°;))))

Comments are closed.