为你的wordpress制作移动版本

2019-03-20 11:26:56来源： kayosite.com 阅读 ()

在网站刚建了没多久之后，我就开放rpc-xml，并用官方的wordpress客户端浏览网站，结果那打开速度慢得吓人啊！然后用mini opera打开网站，可怜我的流量！于是便有了为手机等移动设备做一个移动版界面的想法。

终于选了一个最佳的方案，用了3天的时间，为网站做了一个移动版界面。

虽然这个移动版界面早在2月中旬便做好了，但一直都没有对它进行介绍，趁着今天总算大概把“涂鸦大赛”活动筹备好了，果断跟大家分享制作wordpress移动版的方法。

为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上也能正常使用。

WordPress Mobile Pack 汉化补丁

经过多次的局部修改，就有了现在大家看到的移动版界面：

用数据说话是最有力的，马上用手机进行浏览测试：

移动设备：N85

浏览器：UC

统计方式：UC流量统计

打开UC，查看流量，显示本次流量为2.33 K（说明UC打开时会自动联网并加载一些数据）。

然后直接打开我的网站，完全加载后再查看本次流量：9.62 K，即打开移动版的网站消耗了7.29 K流量。

再用网站底部的链接手动切换为电脑版主题，查看本次流量：51.67K，即打开电脑版主题消耗了42.05K流量。

经过测试，浏览移动版界面只需要电脑版1/6的流量。可见为wordpress制定移动版本的确能大大节省浏览者的手机流量（话说哥昨晚超流量了，不知不觉被扣掉GPRS费，结果早上起来十分悲剧的发现手机已经停机了，10086果然是世界上最关心我话费的人）。当然移动版界面的加载速度也是飞快的！

当初玩wordpress，就是希望能抛开各种繁琐的统计，追求简单的生活！简简单单的记录下每一个文字。也正像这个移动版主题那样简洁、快速！所以只从移动版界面投入使用后，几乎每天晚上睡前总会习惯性地用手机浏览一下网站。

编辑补充：推荐十个 WordPress 插件，可以让你网站更便于手机访问。

1. WordPress Mobile Edition

由 Crowd Favorite 开发，这个插件对于移动设备访问者提供一个简洁的洁面。当用户使用手机浏览器访问你的网站的时候，它能自动检测浏览器，并加载网站的手机版。你可以在设置页编辑移动浏览器的列表。这个插件可以对于特定的浏览器或设备加载指定的主题，比如 iPhone, Windows Mobile, Opera Mini 或者其他的手机网络浏览器。

2. WordPressMobile.mobi

最热门的 WordPress 插件之一，已被下载数千次。这个 WordPress 插件让你博客对手机更加友好，减少在手机浏览器中的加载时间，配置页面更加适合手机。

3. WordPress Mobile Pack

有一个 WordPress 手机浏览器插件。它能识别手机、重排版面并支持挂件。由于具有了手机识别、版面重排的功能，它可以自动调整图片大小，分割文章为多个页面，因此你的网站在任何移动手机上都会表现很好。他有移动管理面板，可以轻松进行管理。移动广告挂件允许在网页的手机版中显示手机广告。

4. MobilePress

你可以设置这个插件对特定的设备模式或者手机浏览器显示指定的主题，比如 iPhone, Opera Mini 等，这样你的博客外观更适合这些设备。这个插件也允许 WordPress 主题开发者开发自己主题的移动版本。

5. Mobile Admin

这个 WordPress 手机插件允许用户通过手机对管理后台进行友好的访问。这个插件转为 iPhone 和 iPod Touch 设备开发，在基本功能上也支持其他的浏览器。Mobile Admin 支持 WordPress 管理控制台的大多数功能，比如编辑文章、自动保存、标签、审核评论等等。

6. Mobilize

这个 WordPress 插件一旦安装，会自动检测任何访问你的网站的移动设备，并重定向到 Mippin 服务器。Mippin 将会重新组织你的页面内容来适应手机的型号。比如说，如果你的网站有土坡，Mippin 就会调整图片大小适应手机屏幕，视频会转换为 3gp 格式，因此用户会获得较好的使用体验，并乐于访问你的网站。

7. WPhone Admin Plug-in

这个插件允许使用移动浏览器来管理 WordPress 博客。他有两个移动管理界面，一个适合 iPhone/iPod Touch 或者其他支持 JavaScript 和 CSS AJAC 以及侧滑菜单的设备；另一个精简版适用于不支持 JavaScript 设备的手机。他在浏览器中可以在全功能版本和精简版之间进行自动切换。

8. Mowser

Mowser 是个可以让你的 WordPress 博客更适合手机浏览器或者其他手持设备的服务。这个插件自动检测使用移动电话的访问者，并重定向到博客经过优化的版本。

9. Wetomo WordPress to Mobile

Wetomo 插件将自动检测使用手机访问你的网站的用户。Wetomo 将会扮演一个你和用户之间的一个代理，调整你的博客来适应用户的手持设备，这样让你的博客在移动浏览器中更好看。

10. WP viewMobile

这个插件用来让你的博客为手机互联网时代做好准备。它会检测通过手机访问你的博客的用户。它可以自动发送经过优化适应移动用户的版本。他会调整博客中图片的尺寸来适应手机，如果手机不支持图片就会直接移除图片，这样用户访问不会有任何问题。