阿黎私家主题正式发布

34条回复

经过4天折腾，阿黎的个人博客终于换上新皮啦。这次的主题由阿黎自己亲手设计制作，风格大变身。

阿黎的博客是在7月20号正式开张的，开张的时候使用的主题是Asusena，这个主题是在Wordpress后台安装主题的地方搜索黑色找到的。当时觉得那个主题挺酷的，开张之后一直在按照自己的想法去不断的修改。期间我有看了很多套Wordpress主题教程，印象最深的是我爱水煮鱼博客的那一套教程，它很长，我看了很久。在8月10号左右，我在google reader上面看到一个关于jQuery的入门教程，感觉jQuery很有趣，可以做很多东西，我也开始去看一些jQuery的入门教程。然后后面大概在8月18号有看到一个叫做捣鼓笔记的博客，觉得用户体验很棒。现有主题的框架限制我不能做很多东西，在上面的基础知识积累之后，我开始萌生要自己制作主题的想法。

在8月18号的晚上，我画出了新博客主题的第一版设计图，如下

这个设计图很水啦，当时是把现有主题页面的样子截了一个图，然后换了一些文字的颜色，换了背景和logo，有点坑爹对不。

基本的思路是用的改用比较明亮的蓝色调，风格有点小清新哈，其实很多东西都是在制作的实际过程中不断的修改的。在设计图弄好的第二天，我开始动工，不算是从零开始啦，其实我是copy了一份原来的主题再做修改的。第一个修改的地方就是把样式表清空了，博客的页面顿时化为一堆文字，后面开始自己重新设计div框架，去掉原来一些hack用的内嵌样式，在一点一点把样式表写出来。

我大概用了两天的时间来做主体框架的模板index.php及其样式，然后用了一天的时间去做各种代码实现。现在本站的边栏没有采用WordPress本身的动态边栏，而是在sidebar.php边栏模板中纯代码实现。一开始看到很多博客大虾说着各种代码实现，自己感觉好厉害啊好高级啊，其实做起来难度不算太大，再说了很多大虾公布了很多代码，搜一下就能找到。我的新主题的制作当中找了很多的代码，自己也写了很多，在这里就不一一列出了。

当然了，直抱着接照搬的心态的话是不行的，很多代码需要根据你自己的情况再去修改或者优化。其实有时候代码实现也是不得已而为之，像边栏这个部分，调用WordPress自身动态边栏小工具就一个函数，顺序就是按照小工具里面排的顺序，你想在系统输出的动态边栏中间插入一个自己的代码实现的模块，就不行了（用各种特殊技巧“曲线救国”的话不算，例如拿jQuery移动dom节点）。这些小工具有很多局限，想要自制一个模块的话可以用文本小工具写一点html，但是又不能放php。

除了边栏之外，其实很多插件都是可以用少量代码直接实现的，有很多特殊的功能其实用不着。对比起旧主题，在插件方面，首先我删掉了很多已经不用的插件，听说不启用的插件放在那里也有一定的性能影响。另外我做了如下改动：

1.代码实现了相关文章，去掉efficient-related-posts插件
2.代码实现了给力语录，去掉了quotes-collection插件（回想自己真是傻叉，这么简单的一个东西，之前优化博客的时候只是想到把这些语录放在数据库，还是改存在文件比较快呢？现在的方案是直接写在php里面，一个数组）
3.用了WordPress原生的嵌套评论，去掉wordpress-thread-comment插件，同时代码实现了ajax评论提交和评论邮件回复。
4.代码实现了首页的分页，去掉了wp-pagenavi插件，这个插件很有名；评论的分页我没有做，因为这个博客还不是很热啦；正文的分页不是很好做，我文章很长，像上一篇文章在旧主题里面页面长度居然达到了7k+像素，我准备以后写文章尽量少废话，复杂内容分多篇文章写成专题这个方案来解决。
5.去掉了sns分享，去掉了wp-sns-share插件，貌似除了我自己打小广告会在sns发我的文章链接之外，还没有人把我的文章蛋疼的分享到sns吧，而且我自己还是直接在sns上面发的而不是用这一个插件。
6.代码高亮插件wp-syntax直接去掉了，发现我贴代码的情况还不算太多。
7.Db Cache Reloaded数据库缓存插件换成了WP Super Cache插件，同时利用我在国内的基本没什么用的双线主机给博客静态内容做了一下CDN加速。 厄，开了cdn之后留言提交不到，在测试测试吧，暂时关闭（理论上对php的请求是不应该被cdn的）   好吧，是comment-ajax.js的问题，里面在最开始获取script的路径然后计算出提交用comment-ajax.php的路径还有几个状态图片。因为js是会被cdn的，所以它就获得了cdn那边的路径，这样可不行，强制重新定义了路径，有兴趣可以具体看一下那个js，有注释，没压缩。

目前阿黎的个人博客启用的插件只有5个，分别是Akismet，Google XML Sitemaps，WP-Cumulus改造版本，WP-PostViews和WP Super Cache。第三个插件是3d标签云，很多博客大虾都不用的，我个人认为这个东西的体验不错，很多童鞋觉得这个东西好看又好玩，所以我把它留下了。这个插件为了给标签云的flash传参会在页面写出一大坨代码，这一点很不好。

后面阿黎还用了大半天的时间做了一下jQuery的效果，包括左侧的滑动导航，页面的淡入淡出效果（IE不显示），页面图片的延迟加载，右上角rss按钮的闪烁，长文章滚动到下面的时候的侧栏随动，文章标题链接点击效果。

这些效果大部分只会在非ie6的浏览器上面显示，ie6这个问题后面再写专题探讨。在ie6之下已知的问题有左侧导航栏无法点击的问题（经典的ie6 z-index bug!），劝还在使用ie6或者各种马甲ie6的童鞋赶紧换用现代的浏览器吧，ie6是十年前的产品。

关于新主题的发布，我要感谢很多大虾，他们提供了很多很好的代码，是他们让WordPress变得更美好。还要感谢主机格调群里面帮助过支持过我的博友们。还有就是在前期博客设计图出来的时候给过意见的威威和阳阳，还有彦宇哥哥，彦宇哥哥眼光很独特，能够发现很多细节的问题。

这篇就暂时说到这里，不知道文章会不会很长呢，下一篇我会讲一下在主题制作过程中学到的东西。

《阿黎私家主题正式发布》有34个想法

    1. horsley 文章作者

      最好有点别的语言基础，例如c语言，然后再配一份手册就好了，我也经常要翻jquery的手册和php的手册，chm格式，有索引，可以快速查到某个东西是干嘛的

      回复 ↓
    1. horsley 文章作者

      感谢大虾的支持，我在你的博客学到很多东西，包括设计的理念和代码。ps:akismet把你评论放到了垃圾评论，汗一个

      回复 ↓
  14. harry_L

    我就使用我现在的主题了，感觉一大堆冗余代码，抽时间整理一下。当初我修改的时候生怕注释不详细，先干掉那么多的注释，压缩一下css和js。

    回复 ↓

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。