07月20, 2011

发布一款Google+版wordpress主题

Google+出来后,立即被它简洁的界面吸引了。并且用了ajax+history.pushState等技术,以及一些键盘事件,对用户体验有非常大的提升。

正好最近想给自己的博客做个wordpress主题,顺便学习下制作wordpress主题的过程,于是就想到了借鉴google plus的界面了。

下面是gplus版主题的预览图:

使用到的技术及特色功能

1、完全基于html5+css3的实现,使用了header, footer, section, article, nav, aside等html5标签,使用圆角,阴影、动画等css3技术

2、使用ajax+pushstate技术进行无刷新浏览,并且可以改变页面的URL。

3、使用localstorage技术对数据进行本地存储,即使下次打开页面访问也是直接读取缓存。内容有更新后可以通过接口清除缓存。

4、使用manifest技术可以将静态资源在本地缓存,这样之后的访问可以直接读取本地缓存文件,完全不用发送http请求到web server。

5、文章列表页面支持键盘事件,可以通过J键查看上一条,通过K键查看下一条,并且有动态自定适应到对应的位置。

6、使用了支持PHP语法的HTML压缩技术,对HTML进行了压缩。

7、对主题使用的js和css进行了压缩,包含style.css文件。

8、使用渐进增强的原则,IE下不支持这些新技术特性,没有额外的操作,不会发生JS请求。

9、可以自定义logo图片,替换默认的标题文字。在主题选项里设置,下面介绍。

10、可以自定义404页面题图。在主题选项里设置

11、可以自定义是否显示文章作者。

12、默认将页面头部固定,可以设置页面头部不固定。

13、可以自定义顶部导航的展示,默认展示自定义页面。具体的下面介绍

14、其他等很多细小特性。

自定义顶部导航

可以在控制台 -> 外观 -> 菜单 里新建菜单,自定义要显示的菜单,如:

自定义主题选项

可以在控制台 -> 外观 -> 主题设置 里设置主题选项,如:

主题下载安装

 

点击这里下载主题,下载后解压并上传到wp-content/themes下,然后在后台启用gplus主题即可。

 

源代码下载

该皮肤的代码已经开源,放在了github上,可以通过这里访问

 

ps: 第一次制作wordpress主题,问题可能比较多,大家多见谅,有问题麻烦通知我, 我会及时修复的。谢谢

本文链接:http://welefen.com/post/google-plus-for-wordpress-theme.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。