WPtouch+MobilePress打造完美手机博客

  1. 1. MobilePress
  2. 2. WPtouch
  3. 3. WPtouch添加GoogleAnalytics
  4. 4. MobilePress添加Google Analytics

发现我最近写了好多手机博客的文章,今天再说下如何生成手机版

我找了很多插件,但是没有一款是完全满意的,虽然WPtouch很强大,生成的页面很漂亮,但是仅针对触屏手机而已,想Nokia的手机浏览器不支持JS的话,这就是华丽丽的浪费

而现在没发现一款既能很好的支持触屏手机,又能支持非触屏的手机

而且悲催的是,现在大部分插件都是为高端手机生成页面,当然几乎都是触屏手机了

而一般的非触屏手机访问时会访问原始的Web界面,这更加影响低端手机浏览效果

因此找了两个软件来配合生成手机版,选了WPtouch生成高端触屏手机页面,而选了MobilePress来生成低端手机页面

MobilePress

MobilePress已经很久没更新了,曾经也用过它,还算不错的一款插件

首先把两个插件安装启用,启用后两款软件的UA列表有部分冲突,不过WPtouch的优先级更高,冲突的UA还是访问到WPtouch生成的页面

这里你不可能真找那么多手机来测试,在FireFox里安装一个User Agent Switch来模拟不同的UA,查看对应访问的页面

chrome也有一个UserAgent Switch,但是这货从来没生效过,不管我改什么UA都没用

下面为了不让两个插件冲突,需要修改MobilePress的文件

需要修改/wp-content/plugins/mobilepress/system/classes/check.php,从32行开始

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
// If forcing iphone theme
case (isset($_GET['iphone'])):
true$browser = "iphone";
true$activated = TRUE;
true$theme = mopr_get_option('iphone_theme',1);
truebreak;

// ?nomobile renders the orignial website
case (isset($_GET['nomobile'])):
true$activated = FALSE;
true$theme = '';
truebreak;

// 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'])):
true$browser = "iphone";
true$activated = TRUE;
true$theme = mopr_get_option('iphone_theme',1);
truebreak;

// 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'])):
true$browser = "mobile";
true$activated = TRUE;
truebreak;

WPtouch

由于iphone、ipod我们都需要用WPtouch生成触屏页面,所以需要把iphone和ipod的判断注释了,另外53行的UA列表根据你的需求来修改,例如HTC的手机就没必要看用它生成,可以删除一些,也可以添加部分UA,不同UA直接用|分割,我修改后的代码如下

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
// If forcing iphone theme
/* case (isset($_GET['iphone'])):
truetrue$browser = "iphone";
truetrue$activated = TRUE;
truetrue$theme = mopr_get_option('iphone_theme',1);
truetruebreak;
*/

// ?nomobile renders the orignial website
case (isset($_GET['nomobile'])):
truetrue$activated = FALSE;
truetrue$theme = '';
truetruebreak;

// Apple/iPhone browser renders as mobile
/*case (preg_match('/(apple|iphone|ipod)/i', $_SERVER['HTTP_USER_AGENT']) && preg_match('/mobile/i', $_SERVER['HTTP_USER_AGEN
T'])):
truetrue$browser = "iphone";
truetrue$activated = TRUE;
truetrue$theme = mopr_get_option('iphone_theme',1);
truetruebreak;
*/

// Other mobile browsers render as mobile
case (preg_match('/(blackberry|configuration\/cldc|hp |hp-|iemobile|midp|mmp|mobile|nokia|opera mini|pocket|portalmmm|ppc;|sm
artphone|sonyericsson|sqh|spv|symbian|treo|up.browser|up.link|vodafone|windows ce)/i', $_SERVER['HTTP_USER_AGENT'])):

truetrue$browser = "mobile";
truetrue$activated = TRUE;
truetruebreak;

另外,这个文件里还有对bot的判断,如果你想让Google Mobile bot看到的是触屏页面,那也需要注释下面几行代码,在75行

1
2
3
4
case (preg_match('/Googlebot-Mobile/i', $_SERVER['HTTP_USER_AGENT']) || preg_match('/YahooSeeker\/M1A1-R2D2/i', $_SERVER['HTTP_USER_AGENT'])):
true$browser = "mobile";
true$activated = TRUE;
truebreak;

注释后你需要在WPtouch的配置里加上Googlebot-Mobile

上面的文件修改好后基本完成了工作,但是这样还有很多手机浏览的是原始页面,因为WPtouch的UA列表太少了,需要自己增加很多,我这里不列举,上篇文章有简单介绍

这里附上一个UA列表的文件,你可以从里面找出你需要的UA
下载链接,请右键另存为
完成上面的步骤后,访问是没啥问题了,不过如果你想统计手机浏览量,那还需继续

WPtouch添加GoogleAnalytics

对于WPtouch生成的页面,浏览这些页面的手机都是高端手机,肯定支持JS,因此只需要把Google Analytics的JS代码添加到header里就行

修改/wp-content/plugins/wptouch/themes/core/core-header.php,在head里的meta信息后插入JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head profile="http://gmpg.org/xfn/11">
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
</meta><meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=< ?php bloginfo('charset'); ?>" />
<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxx-x']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

< ?php if ( bnc_is_zoom_enabled() ) { ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" /></meta></head>

MobilePress添加Google Analytics

OK,触屏版的统计代码搞定了,MobilePress生成的页面针对低端手机,不支持JS,需要使用PHP代码

方法我上篇文章已经介绍过,不过当时针对WPtouch插件,今天针对MobilePress简单再说下

首先需要修改/wp-content/plugins/mobilepress/system/themes/default/header.php,在head前插入如下代码

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
< !DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
< ?php
// Copyright 2009 Google Inc. All Rights Reserved.
$GA_ACCOUNT = "MO-xxxxx-x";
$GA_PIXEL = "/ga.php";

function googleAnalyticsGetImageUrl() {
global $GA_ACCOUNT, $GA_PIXEL;
$url = "";
$url .= $GA_PIXEL . "?";
$url .= "utmac=" . $GA_ACCOUNT;
$url .= "&utmn=" . rand(0, 0x7fffffff);
$referer = $_SERVER["HTTP_REFERER"];
$query = $_SERVER["QUERY_STRING"];
$path = $_SERVER["REQUEST_URI"];
if (empty($referer)) {
$referer = "-";
}
$url .= "&utmr=" . urlencode($referer);
if (!empty($path)) {
$url .= "&utmp=" . urlencode($path);
}
$url .= "&guid=ON";
return str_replace("&", "&amp;", $url);
}
?>
<head></head></html>

然后再修改同目录下的footer.php文件,在body前插入

1
2
3
4
5
        
< ?php
$googleAnalyticsImageUrl = googleAnalyticsGetImageUrl();
echo '![]()';
?>

然后下载ga.php到你的网站根目录,下载链接如下
https://ssl.gstatic.com/analytics/20110726/mobile/ga.php

我自己直接这么使用貌似还有点问题,需要稍微修改下代码,具体方法见上文
为手机网站添加Google Analytics(PHP版本)

到此,你的博客已经打造完成完美手机博客,能智能的为不同手机提供触屏或者非触屏版手机页面了

如有任何疑问请留言

声明: 除非注明,小峰网络遨游记文章均为原创,转载请以链接形式标明本文地址

本博客原创文字只代表本人某一时间内的观点或结论,与本人所在公司没有任何关系。

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

第三方若用于商业用途的转载,须取得本人授权。

本文作者:

本文地址:http://xfeng.me/wptouch-mobilepress-generate-mobile-blog/

你可能还对下面文章感兴趣: