iNove改进版(仿NeoEase的paled主题)

[2012.01]   mg12制作的WordPress主题iNove无人不晓,堪称当年WordPress主题的经典之作,在此都已无需多说。但iNove主题虽然经典,只是个人并不喜欢,最大的原因是它的色调太过于暗淡,会让人有一定的压抑感,个人反倒更喜欢他早期的Elegant Box主题,一直沿用许久,但此次博客搬家换域名,心想风格也正好也换换口味,毕竟Elegant Box主题已经老矣。我想,NeoEase网站现在用的paled主题,应该大家都有垂涎,只是mg12一直不肯放出。虽然网上有精仿的iNeo主题,甚至连这个仿的主题还出现了解密版,但还是不敢用那,最简单的来说,NeoEase的script.js文件都无法解密,更不用说其他我所不了解的文件了,改起来也许真不是易事,所以我迟迟未用。最终,我决定使用iNove主题,看不惯的头部、背景色等都可以自己改嘛,结果是越改越停不下来,断断续续修改了半个月,最后就改成了这个iNove改进版,取名为iNove Plus(这个名字有点过分,不过我确实想不到太好的名字),具体效果请见本站或下边图片。

iNove Plus主题的特点

1、延续iNove主题所有特点,风格更时髦、支持小工具、不需要任何插件支持;
2、代码改动较小,连语言文件都没有重新编译(会导致少量无法汉化之处),页面布局等均未做大动;
3、将风格修改成近似NeoEase的风格,但依然保留iNove原有小细节;
4、菜单功能增强,除菜单上可以同时显示分类和页面外,还可以选择自定义菜单;
5、将订阅和推特选项功能放在主菜单右侧,并实现了淡入淡出滚动二级菜单;
6、在文章页面的相关文章处,实现了相关文章、最多评论文章、最多浏览文章和随机文章的列表显示;
7、默认提供了面包屑功能,同时支持面包屑插件,使用插件功能更强;
8、增加了文章浏览数量的显示,需要插件支持;
9、增强了SEO的部分优化,比如标题、面包屑、标签等;

iNove Plus预览和下载

iNove_Plus_v1.0_screenshot

下载地址:http://sharesh.googlecode.com/files/iNove_Plus_v1.0.zip

推荐安装的插件

Google XML Sitemaps:毋庸置疑的必装插件
WordPress Related Posts:我爱水煮鱼开发的相关日志插件。(iNove Plus主题的相关日志功能需要此插件支持)
WP-PageNavi分页导航:优秀的分页导航插件
WP-PostViews:优秀的计数插件。(iNove Plus主题的显示浏览量和最访问最多文章功能需要此插件支持)
WP-RecentComments:近期评论插件,比自带的最近评论功能要强。
WP-UTF8-Excerpt:日志摘要输出插件。(iNove Plus主题默认全文输出,使用此插件可以以摘要方式输出)
Yoast Breadcrumbs:面包屑插件。(iNove Plus主题默认有面包屑功能,但此插件功能更强大)

相关说明

菜单功能的改进

菜单除了原有的将分类列表作为菜单和将页面列表作为菜单外,增加了分类列表和页面列表同时显示到菜单上,以及自定义菜单的功能。在后台选项中可以看到这两个选项。

menu options

(PS:为了不改动语言文件,对这两个选项直接使用了英文表述,所以看不到汉化中文。)

顺便说说自定义菜单功能的使用。点击菜单,输入菜单名称,点击创建菜单,然后将链接加入到刚刚创建的菜单中,比如我创建了一个叫mainmenu的菜单:

image

然后将刚刚创建的mainmenu菜单设置到主题上,如下图所示:

image

如果这个主题不支持自定义菜单,那么主题位置的选项为灰色不可用。

相关文章的显示

我们尚且把文章内容之下、留言内容之上的区域称之为相关文章区域吧,如下图所示:

image

这个区域一般会根据tag来显示相关日志以及最热门文章,我这里共可以四种状态切换,即:相关日志、最多留言日志、最多浏览日志、随机日志。

默认不安装插件的情况下,左侧显示最多留言日志,右侧显示随机日志。若安装了WordPress Related Posts插件,则左侧显示相关日志。若安装了WP-PostViews插件,则右侧显示最多浏览的日志。

由于未修改语言文件,所以相关日志、最多柳岩日志、最多浏览日志和随机日志均直接使用了英文,同时在code里写死了5条记录,所以建议对相关日志插件按照下图设置:

image

特别注意,相关日志标签务必使用div,因为我在CSS里用了div,而没有使用h3等标签。另外postviews插件设置的Most Viewed Template选项建议去掉浏览量的显示,以做到文章列表的统一。

顺便说一下,如果你安装了WP-PostViews插件,除了在这里可以显示最热门文章外,还可以在文章内容页显示文章的浏览量,如下图所示:

image

关于面包屑

主题本身自带面包屑功能,但相对比较简单,若需要更强大的面包屑,则可以使用Yoast Breadcrumbs插件,具体的使用方法请见mg12的文章,建议是修改该插件以适合己用。

缺陷和后续改进

1、IE6下订阅和Follow me下的二级菜单无法显示(若谁能把这个js问题改好请提供反馈,谢谢);
2、下拉式二级菜单显示存在bug,我在代码里就取消了分类和自定义菜单的二级菜单显示,所以建议不要使用二级菜单和分类(实际上这个主题本身也并不适合显示下拉式二级菜单);
3、微博菜单显示后,默认显示推特、新浪微博和腾讯微博,并且需要连接一样,需要自行修改header文件;
4、部分文字依然英文显示,未能得到汉化(需要修改到语言文件);
5、部分功能定义比较死板,需要修改代码,比如最多浏览日志默认为5;
6、部分JS的改进;

最后,欢迎大家使用这个改进版的iNove主题,欢迎大家提出宝贵意见。

[2012.07]   自从上次发布iNove改进版(仿NeoEase的paled主题),已经有半年时间了,陆续也见到一些朋友使用,也收到一些反馈,最近把自己的多个wordpress进行了合并,所以准备改进一下这个主题。今天花了一天的时间,把主题重新整了整,加了几个功能,顺便修复了一下1.0中的bug,虽然有朋友反映评论务必要改改,但个人觉得功能没有问题,加上精力有限,所以就懒得改成NeoEase的样子了,等以后再说吧。

Changelog

1、增加了回到顶部的按钮;
2、增加了百度和新浪微博的分享按钮;
3、改进了Google自定义搜索的支持;
4、增加了对WP-PostRatings插件的支持;
5、改进了头部的搜索框;
6、改进了页面模板中的推特模板;
7、修复了IE6下二级菜单无法显示的bug;
8、标题区做了简单更新;
9、清理了部分垃圾代码;

下载地址

http://sharesh.googlecode.com/files/iNove_Plus_v1.1.zip

详细说明

1、增加了回到顶部的按钮。

这个功能可以看NeoEase的jQuery 跟随浏览器窗口的回到顶部按钮一文,拿来直接用即可,但也有朋友发现了直接使用后图标会紧靠浏览器左边显示,而非右侧。这个问题原因在于,init GoTop对象的时候,少了distanceToPage参数,你调用的时候把这个参数加上即可。不过要用这个功能,必须加载jQuery.js,所以我加了jQuery到header.php文件中,如果有朋友已经加载了jQuery避免重复加载,可以将我加载的jQuery去除掉,这个在header.php文件中修改。

另外,原文还讲到了jQuery ScrollTo这个js文件,使用后会有动态滚动到头部的效果,但我又不想再多加载更多的js了(体积越大,加载越慢,不然NeoEase也不会用异步加载的方式去加载所有的js了,这一招我也暂时还没有学会),后来发现在原来的iNove主题底部有一个回到顶部的功能,并且也有动态滚动的效果,于是我修改了go-top.js文件,判断没有ScrollTo的jQuery插件的情况下,采用iNove提供的回到顶部功能,效果也非常的不错,我觉得挺满意。

2、增加了百度和新浪微博的分享按钮。

这个功能也是看了NeoEase的百度分享按钮和喜欢按钮一文,看了后觉得对SEO有好处,至少对百度收录、百度搜索有好处,于是乎,我也加了。本只加一个百度喜欢按钮,但看到NeoEase加了新浪微博分享按钮,于是我也加上了(一个的话,太单调了),后来又想考虑腾讯微博分享按钮,但Qshare功能竟然还需要绑定网站和域名,为了保证这个主题的公用性,最后放弃了(新浪微博分享有一个分享后@你自己的功能,我没有把我的UID写进去,这样保持了中立公用,也避免给我带来无用信息的麻烦)。具体效果见下:

image

不过需要多说一句的是:我搞不懂为什么这两个按钮都用iframe。同时,这两个iframe在IE6下加载缓慢,显示都有可能有不全的情况,比较不解,所以觉得没有必要的朋友可以自行删除这一段代码。

3、改进了Google自定义搜索的支持。

这个功能其实很早就做好的,但对比1.0版的时候,发现发布的时候并没有添加,于是也拿来说说。进入后台的当前主题选项,第一个就是关于Google自定义搜索,你可以启用这个搜索以减轻wordpress搜索的压力(当然,你的文章够多的话才可能会有一定的压力),同时我们也觉得Google的搜索更专业,反正,我是用了这个功能:

image

其实在1.0版本身也是支持Google自定义搜索的,只是会弹出新的页面并跳转到Google搜索页面,这是我所不能接受的。后来网上找了一下简单的方法,可以实现wordpress内搜索,不让跳转到Google去,效果如下:

image

但有一点瑕疵:

image

不过也应该能够接受吧,待搜索结果出现后就消失了,时间非常短。不知道大家有什么更好的方法?不会让我继续扒NeoEase的吧:)

4、增加了对WP-PostRatings插件的支持。

其实我也一直希望日志能够被Vote或Rating,所以看见百度喜欢和新浪微博分享按钮右侧空间足够,所以就把这个插件放到右侧吧,也算是有投票加星的功能了。大家只需安装这个插件,并启用,就可以在右侧看到效果了。

image

同时,在后台设置中对Rating text的五星到一星改成了很好、好、还行、差、很差,这个是参考了大众点评网的vote,同时在Rating模板设置中,将一些英文显示的内容去除掉,这样看起来就不会那么突兀了。具体的大家自行研究吧。

5、改进了头部的搜索框。

就是改进了头部搜索框的图片,同NeoEase保持一致,美观性更佳。(原来搜索框有2个像素蓝色的border,有点抢眼)

image

顺便说一下,关于搜索框右侧放置广告的问题,这次改进后应该容易多了,因为原来是搜索框同广告是一个图片,但这次分开了,右侧广告可以自定义,做法是现在右侧的纯色图截屏下来后,用此作为图片的底,在此之上做广告图片,然后将广告代码加入到主题选项设置中的横幅内容中,这样应该可以达到类似NeoEase现在展示的右侧广告效果。

6、改进了页面模板中的推特模板。

在新建页面的时候,可以选择twitter的模板,这样你就可以在内容之下显示你的推特信息内容列表了。如下图:

image

这个页面采用了推特信息作为微博列表,如果你不是以推特为主的微博,以及你的主机不在国外,那这个推特页面模板也是没有用的,至于是否可以改一个新浪微博或腾讯微博的微博页模板出来,这个我暂时也没想好怎么弄。

7、修复了IE6下二级菜单无法显示的bug。

这个问题在1.0发布的时候就提到了,最近对这个问题也进行了分析,最后发现竟然在数据类型转换上出了问题,Chrome以及FireFox都可以自动转换,唯独IE不可以,最后我把parseInt删除掉了,竟然问题就解决了。真是够神奇的。现在,你不管在哪个浏览器下,都可以看到订阅和Follow me的下拉二级菜单了。

8、标题区做了简单更新。

这个是指将原来的150像素宽改为240像素,以适应我现在的标题内容。并且,我将该width属性由原来ID为caption的标签移至A标签,NeoEase也是这么做来避免IE6下出现错乱的问题。各位如有必要,请自行修改这个宽度。

9、清理了部分垃圾代码。

对部分<!--和-->标签做了下清理,以让加载内容少那么一点点,也许,速度会快那么一点点。本想把js和css也压缩一遍的,但考虑到主题的可读性,所以还是放弃了,以后再压缩吧。

增加和修改了这些功能后,这个主题又满意了一点点,虽然也许觉得评论部分不出彩,但这还是以后再说吧。欢迎大家使用这个主题,并提出宝贵意见,如有问题请留言。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: