Home » Tech » zSnos(Veezy Edition) 主题折腾手记

zSnos(Veezy Edition) 主题折腾手记

对折腾WP主题这件事我是这么想的,要是一个技术博客+技术作者或是技术爱好者,发些没人折腾过技术文既方便了WordPress的功能完善和普及,又交到了不少朋友和和订阅者,这样蛮好;要是一个像我这样的非计算机专业+伪技术流+代码小白,还总是没完没了的发一些Copy过来的内容就没意思了。有这个时间还不如学学PHP、JS什么的,或者让WordPress发挥它最初的功能——写博客。

所以规定下自己一个主题只发一篇折腾文,以作为对代码作者的感谢和主题的盘点。

这是我第一次写主题折腾手记,与其说是折腾手记,不如说是向各位无私的WP技术帝们的捶背(Trackbacks)文,我对函数代码主题样式什么的也不是很在行,也没必要班门弄斧了,直接把我学来的东西用链接引向原作者的博客,也省得信息大面积重复。

先看看Yslow和PageSpeed吧,还是比较满意的,1月30日测的,可能现在又降了点。GTmetrix的测试结果还是很值得参考的,不过也没必要太在意,毕竟博客是放文字的地方。最近刚把所有的统计代码包括Postview插件都删除掉了,让流量和排名飞,我好好享受写博客的过程就是了。

2011年1月底的zSnos(Veezy Edition)就折腾完了,期间还有一位朋友发邮件问我这个主题会不会出售,受宠若惊,因为不是我设计的主题,当然不能答应。其实我这里99%的改动都是能够在网上找到的,稍微懂一点点PHP就能把这些功能全部实现。经过修改之后和原版zSnos差别还是挺大的,尤其是在颜色样式和侧边栏上。东拼拼,西凑凑,于是zSnos(Veezy Edition)的最终版就诞生了。

关于做的修改,用PhotoWall(iPad的Pro版限免过,非Pro版有3次的使用限制)做了个拼盘。

1月底截的图,有些地方又做了小幅修改和去除,比如归档页和相关文章等。

一处一处来盘点吧,非原创的内容直接用链接引向原作者,自己修改的部分会上代码,CSS部分就不放了,主题色调不一样,需要的自己扒就好。此外所有的代码都先“参考”一下再“Copy”,毕竟每个主题都是不同的。

主体部分

主题整体设计和构架为zww大哥的原版zSnos,字体搭配和文字样式参考了Alan的G-White良心的Viper,头部导航上层为页面,下层为分类,均最多支持到2级导航,头部下banner为快速订阅和联系栏。配色改为绿色调,首页数据库查询数为6次左右(喂,Veezy同学,实事求是点好不好,什么时候低于过6 = =)。

整体的CSS阴影和样式参考如下几篇文章:

Mijia的《颠覆网络35天 ─ 使用文字阴影来烘托效果》(这篇很好,有些英文的资料)、老肥的《CSS 文字阴影在网页设计中的应用》(批评一下老肥同志的博客将近一年不更新)、自力的《优化文字显示CSS样式》(被墙中)。

首页文章自动截断

参考自zww大哥的《简单的文章截断方法, 支持 Read more 加上 nofollow》,后来改用了mb_strimwidth函数。

友情链接(Blogroll)页面

Copy自:Carrie姐的《WordPress 主題製作學習筆記:幫你的主題加上「友情連結」頁面並「自動獲取連結Favicon」》 以及木木的《给友情链接添个 Favicon 美化美化》。

左侧的滑动导航按钮

参考了木木的:《滑动导航栏也来滑动》,还有这篇《[jQuery] 滑动导航代码小更新》

为Willin的Ajax评论提交加速

参考了自力的《精简wordpress评论[再编辑]及相关功能》,建议同样需要精简的博主手动精简,毕竟主题的评论样式不同,直接Copy文件可能不会完全兼容。

评论框内的图片背景

参考自灵龙空间的《在WordPress评论框内增加个性的用户体验文字或图片》

Twitter循环展示栏

获取最新twitter的方法参考了万戈同学的《WordPress 非插件调用 Twitter 修订版》。循环展示依然借鉴了万戈的《JQuery 循环滚动展示 Twitter 公告》

热门、最新、随机文章和标签云的JQuery Tab切换

参考了Alan的《jQuery 实现网页选项卡》

至于最新最热和随机文章在Google一搜全都有,在这里就不一一例举了。

在热门文章里我们有可能会遇到一个小问题,就是Guestbook(留言板)页面也出现在了文章列表里:

这样看起来很不和谐,怎么去除呢?先看原来的代码:

<?php $result = $wpdb->get_results(“SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 你要显示条目的数量”);
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>”>
<?php echo mb_strimwidth(get_the_title(), 0, 34,”…”) ?></a> (<?php echo $commentcount ?>)</li>
<?php } } ?>

其实只要在“if ($commentcount != 0)”前或后面加一个判断“if ($postid !=留言板的ID)”就可以了,页面的ID去后台页面的管理找,鼠标焦点在编辑上,浏览器底下的地址栏就能看到post=XX,那便是ID:

隐藏老用户的评论资料框

全盘照抄Alan的《jQuery 隐藏老用户评论资料框》

标题滑动效果

Copy的N大哥的《Jquery右偏移效果》,

文章标题点击后的Loading…效果

依然是N大哥的《Jquery loading效果 》,不过要注意JQ选择器的范围,以适应自己的博客。

图片缩放特效(Slimbox2)

参考自木木的《jQuery 图片特效插件: Slimbox2》,注意JQ选择器的范围,适应博客需求。

其他修改

Willin大师的一些基础的代码不一一累赘了,比如邮件提醒、ajax评论提交、小墙、头像本地缓存等等。其他地方都是CSS的修改,没什么写的价值。

Hellyeah,基本就是这些,估计近期是不会再折腾主题了,想要的功能和风格基本都实现了。在此对所有以上提到的名字和博客链接的作者表示感谢。

吐吐槽,身体健康。

上午重新编辑了全新的“About”个人介绍页面,欢迎围观,不再转向到about.me了。

还在侧边栏放了个小图,美化一下空旷的右边,顺便多认识些爱好差不多朋友。

Twitter、WordPress、Dropbox、Flickr、Chrome、Apple、Ubuntu、Google、北京国安、阿森纳、斯图加特、拉齐奥、温格、亨利、Kanye、Dr.Dre、Damu、老电影、30Rock。大小实在有限,选择性的挑挑拣拣。

继续吐槽,昨晚和阿培还有闷闷去浅草吃日本料理,也算实现了阿培去吃日本料理小小的心愿。我们仨从7点一直吃到打烊,各种聊天各种扯淡,时间过的很快,闷闷4月份就去日本了,正在修日语,打算在那边参加日本的高考,阿培打算考研的时候去韩国上学,也在学语言呢。其实做朋友的听到这些感觉很好,哥儿仨都不想做啃老族,我们的家庭也不允许我们啃老。还没毕业慢慢的都各奔前程了,既高兴又失落,估计以后向这种没心没肺的饭醉也会越来越少,不过也在所难免。

另外有件超囧的事,2月22号那天,foer涨到222了。。。为什么非要是那天。。。

其实最近想写的东西很多,不过全都是半成品,草稿已经堆了不少了,比如大罗退役、文章博主和博客、我的GTD流程等等,很想等考完试静下心来好好坐在电脑前敲上个两三个小时,好好排版,好好梳理句子。无奈3月12号考试,在这之前就再也不会更新了,本来决定2月底考的,结果杯具的没报上名,就这么稀里糊涂的拖到了3月12号,之前一些旅行和学习阿拉伯语的计划也乱掉了。在这儿吐槽下ETS的官网,你丫的服务器真是卡到坑爹啊。

说道3月12号,一想到这一天就超有动力。

12号上午考完试,四五点回家收拾一下,晚上和@Canopy 去看老鹰的演唱会,晚上一起饭醉,凌晨去魏避看阿森纳VS曼联的足总杯(前提是我厂战胜莱顿东方的话),wut a damn good day!

那么,祝各位开学的上班的学习和工作都顺利了,又是一年新的开始,KEEP MOVING!

ps.为我厂今晚的联赛杯祈福,6年第一冠!

本站遵循 BY-NC-SA 3.0.0 (署名-非商业性使用-相同方式共享) 共享协议. 转载请注明转自 Weitian Zhao's Blog
Filed under Tech. Tags: ,



154 responses to 《zSnos(Veezy Edition) 主题折腾手记》.

↓Click to reply
  1. 谭博的个人网站 谭博的个人网站

    楼主挺用心的 感谢 🙂

    #1
  2. mjnesgfwgwe mjnesgfwgwe

    qqqqqqqqqqqqqqqqq

    #2
  3. 测试~~ 测试~~

    测试~~~~~~

    #3
  4. Andrew Andrew

    字体感觉有点小,看着累

    #4

Leave a Reply



* Press Ctrl + Enter to send | Design your own Gravatar

Trackbacks and Pingbacks: