怎么制作wordpress的移动网站

手册/FAQ (427) 2015-12-22 11:02:19

      为wordpress制作移动版主要有三种方案,都是通过插件来让网站识别用户是否通过移动设备浏览网站,然后给用户加载移动界面。第一种具体的原理是直接把网站转为wap版,第二种则是为网站套用另一个主题。在这里我推荐使用第二种方法,第一种方法把网站转为wap版虽然方便,但是直接转的网站UI实在不是那么的好看,只是纯文字,加上最简单的至上而下排版,而且几乎没有任何让我们进行开发的地方。而第二种则可以让我们自己重新做一个UI面积小,而且与电脑版界面搭配的移动版界面。经过我用Android,诺基亚(Symbian),索爱(A200)3个操作平台和操作系统测试过后均能正确识别,加载移动版界面。

       下面先简单介绍制作移动版本的主角——WordPress Mobile Pack

WordPress Mobile Pack会自动识别用户是通过何种浏览器浏览wordpress站点,能在wordpress2.5或以上版本中使用。如果是用移动设备上的浏览器浏览,则会自动给用户加载移动界面,这个移动界面可以是用WordPress Mobile Pack自带的主题(4钟颜色),也可以用自己制作的主题。如果你使用的是插件自带的主题,那么在后台—外观—WordPress Mobile Pack (手机主题)里勾选第一个选项(启用诺基亚模板),则可以为诺基亚的浏览者提供更多的界面优化,同时该选项也支持为基于WebKit的移动浏览器提供丰富的主题,如苹果的iPhone和Palm Pre。当然为了更好地配合电脑版主题,我还是使用自己制作的主题,为了更好地适合移动设备浏览,这次的主题以简洁,体积小为设计理念,能不用的功能就不用,能用css background的就不用图片,loop、header和配色提取自一个模仿Blueberry的官方移动版主题,然后经过3天的努力,把sidebar和4个页面模板做好了!其中日志列表页面与电脑版的大不相同,没有使用loop而直接使用wp_get_archives调用日志列表,然后用css加以控制。留言板页面也是直接使用wp_list_comments和原生的嵌套回复,因此在各种移动设备上都有很高的外观与功能兼容性。

       然后就是把自己做的主题上传到wordpress的主题目录,在后台—外观—WordPress Mobile Pack (手机主题)里选择自己的主题。顺带把最后一个选项也勾选了,它会在你的电脑版和移动版界面的底部里加入一个链接,点击该链接可以把切换为另一种界面,防止有部分移动设备无法自动切换为移动版界面时可以让用户手动切换。

       这里建议使用WordPress Mobile Pack的汉化补丁,虽然是1.2.2版的汉化补丁,但测试后在该插件的最新版本1.2.4上也能正常使用。

THE END