分类： 系统运维
2011-04-29 02:27:56
业界动态 | 收购融资 | 门户动态 | 搜索引擎 | 网络游戏 | 电子商务 | 广告传媒 | 厂商开发
站长在线 .站长报道 | 好站推荐 | 站长聚会 | 站长访谈 | 站长茶馆 | 网站排行
网站运营 .建站经验 | 策划盈利 | 搜索优化 | 网站推广 | 免费资源
设计在线 .酷站推荐 | 网页设计 | WEB标准 | 视频处理 | 设计活动
网络编程 .Asp编程 | Php编程 | .Net编程 | Xml编程 | Access | Mssql | Mysql
联盟资讯 .联盟动态 | 联盟介绍 | 联盟点评 | 网赚技巧
服务器 .Web服务器 | Ftp服务器 | Mail服务器 | Dns服务器 | Win服务器 | Linux服务器 | 安全防护
会员投稿 匿名投稿 投稿指南 RSS订阅 站长资讯通告: 搜索: 智能搜索 搜索标题 您的位置：站长之家网站运营建站经验阅读资讯：为你的wordpress制作移动版本 function Digg(divId,aid){ var taget_obj = document.getElementById(divId+""+aid); var myajax = new DedeAjax(taget_obj,false,false,"","",""); myajax.SendGet2("/digg.php?action=digg&aid="+aid); DedeXHTTP = null; } 为你的wordpress制作移动版本 2011-04-15 11:47:16 来源:kayosite.com 【大 中 小】 评论：2 条 收藏本文 转发至：document.write("".replace(/%url%/,encodeURIComponent(location.href))); function postToWb(){ var _t = encodeURI("为你的wordpress制作移动版本"); var _url = encodeURIComponent(document.location); var _appkey = encodeURI("258efff116d2466da9b7513cbae7de0b");//你从腾讯获得的appkey var _pic = encodeURI("");//（例如：var _pic="图片url1|图片url2|图片url3....） var _site = "";//你的网站地址 var _u = ""+_t+"&url="+_url+"&appkey="+_appkey+"&site="+_site+"&pic="+_pic; window.open( _u,"", "width=700, height=680, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no" ); }站长交易（）友情链接交换 建站更简单，就找313！招募分销商
在网站刚建了没多久之后，我就开放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，就是希望能抛开各种繁琐的统计，追求简单的生活！简简单单的记录下每一个文字。也正像这个移动版主题那样简洁、快速！所以只从移动版界面投入使用后，几乎每天晚上睡前总会习惯性地用手机浏览一下网站。
