2011-06-6
为你的wordpress站点增加一个wap站
改變字體大小： 默认 | 较大 | 特大 | | |Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
最近来访的老朋友可能都会发现，我的网站右上方的标题导航栏中多了一项“手机版”的链接，这是因为我给我的网站增加了一个供手机浏览的wap子站点。
这个wap子站点我已经创建了很长时间了，不过一直以来没有重视，这些天不过是将其优化了一下。我的这个wap站点是用的WP-T-Wap（wordpress to wap）这个外掛程式搭建的，安装并启用这个外挂之后，它会在你的wordpress博客的根目录创建一个名为wap的子目录，这样你就可以通过http://www.liboxia.com/wap这样的网址来访问这个手机版的站点了（这个目录目前已被我通过301重定向禁止访问，原因下文会介绍）。但是这样一个复杂的带有二级目录的网址却并不便于记忆，好在我用的godaddy服务器可以无限绑定子目录，因此我将二级域名http://wap.liboxia.com绑定在了wap这个子目录上，这样通过这样一个二级域名网址便可实现手机站点的快捷访问。与此同时，我还通过301重定向，将http://www.liboxia.com/wap这个包含二级目录的网址屏蔽掉，以免出现多个网址访问到一个网站的情况。
其实单就上面这点内容着实没什么可说的，需要说的在后面。
创建好这个wap站点之后，我在标题栏导航里加入了http://wap.liboxia.com这个链接。但是这里面又一个问题，就是这个本来提供给手机访问的站点却通过电脑、手机均可以访问，这一点并不太符合我的想象。
有一个很明显的例子：比方说手机腾讯网的网址是http://wap.qq.com，如果你用手机等移动设备访问这个网址，会打开一个手机腾讯网的页面，而你通过电脑的浏览器访问却并不能打开手机腾讯网的页面，而只会打开一个手机腾讯网的宣传页。另外一个例子：腾讯网有一个iPad版本，地址是http://ipad.qq.com，如果你用苹果的ipad、iPod、iPhone等设备访问这个页面，这个页面是可以正常加载的，但是当你使用windows系统的计算机访问时，便只会打开一个iPad版腾讯网的宣传页。从这两个例子就很好的说明了我的想法，就是不允许通过电脑访问的用户访问到真实的手机版页面，而只是打开一个推广页；只有当你真正使用手机等移动设备访问http://wap.liboxia.com这个子站点的时候，才会打开真正的手机版页面。然而这样的功能如何实现呢？
在网上一番查找，终于找到了答案。原来无论是腾讯还是新浪等各大网站识别用户是否是通过移动设备访问网站的，方法都是一个，那就是检测浏览器的标识符。
这个浏览器的标识符具体涵义我也解释不清楚，所以放到一边，单说实现的方法。在网上一番搜索发现Changing ‘s Blog提供了这样一段通过php判断来访者的来访设备的方法，他提供的代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | // If viewing the mobile website switch(TRUE) { // Apple/iPhone browser renders as mobile case (preg_match('/(apple|iphone|ipod)/i', $_SERVER['HTTP_USER_AGENT']) && preg_match('/mobile/i', $_SERVER['HTTP_USER_AGENT'])): $browser = "mobile"; break; // Other mobile browsers render as mobile case (preg_match('/(blackberry|configuration\/cldc|hp |hp-|htc |htc_|htc-|iemobile|kindle|midp|mmp|motorola|mobile|nokia|opera mini|opera mobi|palm|palmos|pocket|portalmmm|ppc;|smartphone|sonyericsson|sqh|spv|symbian| treo|up.browser|up.link|vodafone|windows ce|xda |xda_)/i', $_SERVER['HTTP_USER_AGENT'])): $browser = "mobile"; break; // Wap browser case (((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'text/vnd.wap.wml') > 0) || (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0)) || ((isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE'])))): $browser = "mobile"; break; // Shortend user agents case (in_array(strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,3)),array('lg '=>'lg ','lg-'=>'lg-','lg_'=>'lg_','lge'=>'lge'))); $browser = "mobile"; break; // More shortend user agents case (in_array(strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4)),array('acs-'=>'acs-','amoi'=>'amoi','doco'=>'doco','eric'=>'eric','huaw'=>'huaw','lct_'=>'lct_','leno'=>'leno','mobi'=>'mobi','mot-'=>'mot-','moto'=>'moto','nec-'=>'nec-','phil'=>'phil','sams'=>'sams','sch-'=>'sch-','shar'=>'shar','sie-'=>'sie-','wap_'=>'wap_','zte-'=>'zte-'))); $browser = "mobile"; break; // Render mobile site for mobile search engines case (preg_match('/Googlebot-Mobile/i', $_SERVER['HTTP_USER_AGENT']) || preg_match('/YahooSeeker\/M1A1-R2D2/i', $_SERVER['HTTP_USER_AGENT'])): $browser = "mobile"; break; } if($browser){ header("Location: http://ichanging.org/wap"); } |
之后面临的一个问题就是，把这段代码插在哪？
众所周知的，每一个网站都绑定在一个目录上，访问一个网站实际上就是对这个网站所绑定的目录中的文件进行访问。在http协议下，系统会首先查找用户所访问的网址所绑定的目录中是否有index文件，如果有则会首先访问这个index文件。
所谓index，即索引，它是这个网站服务器上最原始的访问起点，所以上面这段代码必然要写入在index文件的某一部分。
我打开了网站服务器上的wap文件夹，里面有三个包含index的文件，这些文件都是有WP-T-Wap创建的。其中两个文件是index-wap.php和index-wap2.php，这是两个不同版本的xml手机网站的版本，一个1.1版本，一个2.0版本。而index.php这个文件便是真正的索引文件，上面那一段判断来访者访问设备的代码便需写在这个文件中。
经查看，这个index.php中的代码结构是这样的：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?php /* +----------------------------------------------------------------+ | | WP-T-Wap | Copyright (c) 2007 TangGaowei | | File Written By: | - TangGaowei | - http://www.tanggaowei.com | | File Information: | - 手机能浏览的HTML页面 | - index.php | +----------------------------------------------------------------+ */ require_once('wap-config.php'); _wp('pagename=&category_name=&attachment=&name=&static=&subpost=&post_type=post&page_id='); if ( get_option("wap_wml_11") == 'yes' ): header("location:index-wap.php"); else: header("location:index-wap2.php"); endif; ?> |
这段代码中，除了前面一大段注释以外，后面的一段代码是通过判断wordpress中WP-T-Wap外挂的设置来决定加载xml1.1版本首页抑或是xml2.0版本首页。我将Changing ‘s Blog提供的代码添加在了注释与这段代码之间，将原先if成立时的执行内容去掉，将原index.php中的代码嵌套进了这个if语句中，便实现了这一功能。
之后我又在后面加上了一个if条件不成立的语句，如下：
1 2 3 | if($browser<>"mobile"){ header("Location: http://www.liboxia.com/mobile"); } |
这样整个index.php便修改完成了。
完整的代码是这样的，当然你可以将其中的注释内容删掉，并按需要将最后的if不成立的跳转位置改成你需要的页面：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | <?php /* +----------------------------------------------------------------+ | | WP-T-Wap | Copyright (c) 2007 TangGaowei | | File Written By: | - TangGaowei | - http://www.tanggaowei.com | | File Information: | - 手机能浏览的HTML页面 | - index.php | +----------------------------------------------------------------+ */ // If viewing the mobile website switch(TRUE) { // Apple/iPhone browser renders as mobile case (preg_match('/(apple|iphone|ipod|ipad)/i', $_SERVER['HTTP_USER_AGENT']) && preg_match('/mobile/i', $_SERVER['HTTP_USER_AGENT'])): $browser = "mobile"; break; // Other mobile browsers render as mobile case (preg_match('/(blackberry|configuration\/cldc|hp |hp-|htc |htc_|htc-|iemobile|kindle|midp|mmp|motorola|mobile|nokia|opera mini|opera mobi|palm|palmos|pocket|portalmmm|ppc;|smartphone|sonyericsson|sqh|spv|symbian|symbianos|browserng| treo|up.browser|up.link|vodafone|windows ce|xda |xda_)/i', $_SERVER['HTTP_USER_AGENT'])): $browser = "mobile"; break; // Wap browser case (((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'text/vnd.wap.wml') > 0) || (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0)) || ((isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE'])))): $browser = "mobile"; break; // Shortend user agents case (in_array(strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,3)),array('lg '=>'lg ','lg-'=>'lg-','lg_'=>'lg_','lge'=>'lge'))); $browser = "mobile"; break; // More shortend user agents case (in_array(strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4)),array('acs-'=>'acs-','amoi'=>'amoi','doco'=>'doco','eric'=>'eric','huaw'=>'huaw','lct_'=>'lct_','leno'=>'leno','mobi'=>'mobi','mot-'=>'mot-','moto'=>'moto','nec-'=>'nec-','phil'=>'phil','sams'=>'sams','sch-'=>'sch-','shar'=>'shar','sie-'=>'sie-','wap_'=>'wap_','zte-'=>'zte-','noki'=>'noki'))); $browser = "mobile"; break; // Render mobile site for mobile search engines case (preg_match('/Googlebot-Mobile/i', $_SERVER['HTTP_USER_AGENT']) || preg_match('/YahooSeeker\/M1A1-R2D2/i', $_SERVER['HTTP_USER_AGENT'])): $browser = "mobile"; break; } if($browser){ require_once('wap-config.php'); _wp('pagename=&category_name=&attachment=&name=&static=&subpost=&post_type=post&page_id='); if ( get_option("wap_wml_11") == 'yes' ): header("location:index-wap.php"); else: header("location:index-wap2.php"); endif; } if($browser<>"mobile"){ header("Location: http://www.liboxia.com/mobile"); } ?> |
通过这段代码，可以实现自动判断来访者的访问设备，从而实现当用户通过普通计算机设备访问http://wap.liboxia.com时，自动跳转到http://www.liboxia.com/mobile这样一个推广页面；而当用户通过手机等移动设备访问时，则打开真正的wap页面。经过测试，主流的塞班、安卓、苹果和kjava系统都可以正常实现访问。
至于那个推广页的制作，便不用多说，只是一个很普通的page页面，不过我将其设置为了二级页面，即放在了关于页面的下一层，这样在标题导航栏中就不会出现这个页面了。
您可能對這些感興趣：
