主站MusicSter上 一次更换主题是在2010年初，采用的是Obox Design的“selecta”主题。这款主题效果够炫，页面样式设计的也很漂亮，首页还有一个“Featured video slider”区可以展示在线视频，对于我这种经常在文章中添加视频的人来说很实用。但是使用这半年多来，陆陆续续也发现了很多毛病，比如主题代码十分复 杂，而且不提供技术文档支持（没办法，谁让人家本身就是做付费主题的呢，能做一款免费的就不错了），我又不懂PHP、CSS和JavaScript代码， 所以使用起来比较不顺手，想自定义一些东西都觉得无从下手；再加上有点审美疲劳，所以就萌生了更换主题的想法。

从上周一开始我就一直在寻找各种主题模板，在国内的各大WP论坛和网站逛了一个遍，又去国外的几个著名设计博客找了一遍，最开始想使用的是一款游戏主题“Peacekeeper”，这款主题的特点是细节处理的符合我的审美观，首页头部还有一个Flash幻灯片特效，很酷。但是在本地测试的时候发现了几个问题，一是文章标题由于使用了一款比较漂亮的英文字体导致无法显示中文，虽然这个问题在修改了CSS文档后得以解决，但是又发现那个很酷的Flash特效在提取文章摘要时也不支持中文，不过这个貌似是WP本身的问题。耗费了一天的时间在本地修改、测试这款主题，最终我还是放弃了，当然，主要原因还是因为我水平太菜，很多问题不知道怎么去解决。

到最后我选择的是Hybrid的一款子主题(Child Theme)：Old School。 最开始选择这款主题是迫于无奈，因为在这之前，我对这种基于某个框架的主题根本没有深入了解，只是在看过演示页面后觉得效果还不错，设计简洁、美观，就下 载到本地测试了。在测试的过程中不可避免的要做一些细节上的修改，这一修改不要紧，我算是迷上了Hybrid这个主题框架(Theme Framwork)，因为这个框架本身包含了十分丰富的功能，各种我想要的功能和页面模板都有，子主题只承担外观的表现，不涉及核心功能。对于我这种不会 PHP代码的人来说，只需要对内置的功能稍作修改就可以直接拿来用，十分方便，从昨天开始，我就一直在调试这款主题，一直忙了两天。就在这里记录一下我所 做的主要修改，以备以后升级主题时所用。

1. 更改字体大小

主要是我觉得主题默认的字体有点小，文字一多看起来就不舒服，所以找到主题中的style.css文件，进行如下修改：
1) 找到：

将上面font里面的12px设置为13px。
2)找到：

将上面font里面的12px设置为13px。
3)找到：

将上面font里面的12px设置为13px。

2. 汉化Hybrid

Hybrid官网上提供的汉化文件是以前版本的，所以新版本中的一些新词语和语句就没有对应的翻译，而且之前的汉化有一些错别字和用语上的不当，于是我就在这个老版本的汉化文件上做了更新，重新编译了一份汉化文件，可以在这里下载。

3. 修改404页面

这个是我每次安装主题必须要修改的项目，主要原因是自从2010年1月份更换网址结构后，因为很多搜索引擎抓取的旧页面没有更新网址，造成了很多404错误页面，这些流量浪费了很可惜。所以将404页面修改的更加实用和人性化点有助于留住访客。

4. 修改Google自定义搜索引擎的样式

这个也是每次必须修改的，WordPress本身的搜索功能很垃圾，而我因为使用了Google网站管理员工具，平时积极提交Sitemap，所以 Google对主站的收录很全很及时，因此我一直使用Google的自定义搜索引擎来实现站内搜索功能。这次更换了主题，需要重新设置搜索的样式、颜色和 宽度等。大家可以在主站右上方的搜索框，或者上面的404页面里的搜索框中搜索一下查看效果。

5. 加入了延迟读取图片的特效

这个特效是通过“jQuery lazy load plugin” 插件来实现的。它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。在包含很多大图片长页面中延迟加载图片可以加快页面加载速度。浏览器将会在加 载可见图片之后即进入就绪状态。在某些情况下还可以帮助降低服务器负担。主站和本博客都启用了这个插件，大家可以查看一下效果。

不过这个插件有个问题，那就是它是对整个页面的图片都采用延迟加载的，这样就会对侧边栏中某些Widget里面的图片产生不可预料的影响，解决方法如下：

在插件目录里的jq_img_lazy_load.php文件中找到如下代码：

因为我们主要是想给正文内容部分加入延迟加载图片的效果，所以可以查看首页的源代码，找到正文内容的div标签，比如div标签的id为content，就可以将这句代码改为

如果div标签的class为entry-content,就将其改为

这样就不会影响Widget了。

6. 加入了“仿纽约时报推荐阅读下一篇文章”的特效

这个特效是通过“upPrev: NYTimes Style “Next Post” Animated Button” 插件来实现的。对于这个特效稍后我会专门写一篇文章详细说明，这里只记录一下我针对主站所做的修改。这款插件功能上没有问题，修改的只是样式，默认的样式不适合主站“深色背景、浅色文字”的整体效果，所以打开插件目录里面的upprev_flyout.css，找到ID选择器“#upprev_box”，将里面“background-color”的值修改为“#09415F”；找到ID选择器“#upprev_box h6”，加一句修改文字颜色的代码：

修改完毕。

Tagged as: hybrid, jQuery, lazy_load, musicster, old school, upPrev, wordpress