phpcms实现手机端与PC端双模板的方法与详细教程

phpcms v9电脑pc站+手机wap移动端双模板共用数据库数据同步可同步生成静态文件，并且电脑站和手机站网址页面一一对应，非插件，程序二次开发版。
详情如下：
1.phpcms v9电脑版+手机版两套模板，自动识别电脑或手机设备，访问对应的版本；
2.phpcms v9电脑pc版+手机wap端数据同步，只需一个空间，一个顶级域名；
3.一个后台操作，生成电脑版静态文件的同时，程序自动生成手机版静态文件，（不同于插件，插件需要单独去点击生成手机版静态文件）。
4.手机版可绑定二级域名，前提是虚拟空间支持伪静态或绑定子目录。
5.电脑版和手机版的页面与网址一一对应，示例如下：
首页：
电脑版  www.xx.com  对应  手机版 m.xx.com
频道页或栏目页或单页：
电脑版   www.xx.com/about/  对应  手机版 m.xx.com/about/
文章页：
电脑版   www.xx.com/news/1.html  对应  手机版 m.xx.com/news/1.html

现在随着智能手机的兴起，我们网站开发移动端版本也显得越来重要了，但是现在phpcms还没有开发手机版，下面我们就教大家如何让phpcms实现手机版访问，一般正常情况下我们电脑版的域名为http://www.你的域名/，而手机版的域名一般为http://m.你的域名/

这样就需要我们给手机端另外做一套模板，实现网站双模板。下面是具体方法：

首先给phpcms添加自适配的代码，找到并打开/modules/content/index.php文件，在里面找到如下代码：

1. include template('content',$template);

复制代码

将其修改为如下代码：

1. if(substr($_SERVER['SERVER_NAME'], 0,1) == 'm'){
   
2. include template('content_m',$template);
   
3. }else{
   
4. include template('content',$template);
   
5. }

复制代码

如果不想手动修改，可以直接使用我们已经修改好的文件下载覆盖就可以了，下载地址如下：

http://pan.baidu.com/s/1c02nT1Q

本地下载：

phpcms双模板.rar (4.72 KB, 下载次数: 334)

2016-12-9 15:04 上传

点击文件名下载附件

以上代码的意思是当前页面url中第一个字符为m时则调用content_m模板，否则调用content模板

但是由于phpcms把文章的url都固定写死在数据表中，所以页面中的标签不能在使用{$r[url]}

而要改成{str_replace('http://www.','http://m.',$r[url])}

意思是截取url，把http://www.你的域名/ 替换成http://m.你的域名/

这里我们就完成了手机版的设置了，然后我们在制作一套手机端模板content_m就可以了。

如果我们要在PC端的内容里面加上当前页面手机端的链接，链接地址写法如下：

1. http://{str_replace('www.','m.',$_SERVER['SERVER_NAME'])}{$_SERVER['REQUEST_URI']}

复制代码

反之，手机端加上PC端的链接：

1. http://{str_replace('m.','www.',$_SERVER['SERVER_NAME'])}{$_SERVER['REQUEST_URI']}

复制代码

如果你使用的是静态页面，那么只要在模板页头加上以下JS代码就可以实现判断手机端自动跳转到手机端了。

1. <script type="text/javascript">
   
2. function browserRedirect() {
   
3. var sUserAgent = navigator.userAgent.toLowerCase();
   
4. var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
   
5. var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
   
6. var bIsMidp = sUserAgent.match(/midp/i) == "midp";
   
7. var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
   
8. var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
   
9. var bIsAndroid = sUserAgent.match(/android/i) == "android";
   
10. var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    
11. var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    
12. if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    
13. {if $catid=='' and $id==''}
    
14. window.location.href="{APP_PATH}/index.php";
    
15. {elseif $id=='' and $catid!=''}
    
16. window.location.href="{APP_PATH}/index.php?m=content&c=index&a=lists&catid={$catid}";
    
17. {else}
    
18. window.location.href="{APP_PATH}/index.php?m=content&c=index&a=show&catid={$catid}&id={$id}";
    
19. {/if}
    
20. }
    
21. }
    
22. browserRedirect();
    
23. 
    
24. function closewindow() {
    
25. $("#register-box").hide();
    
26. }
    
27. function openwindow() {
    
28. $("#register-box").show();
    
29. }
    
30. </script>

复制代码

随着智能手机日益发展，人们上网不再追求电脑上网，手机浏览网页超过电脑必成大势，故移动站制作已非常重
要。目前各大CMS都附带着手机门户功能，但往往功能不全，毕竟很多都是免费使用。

下面说说phpcms v9同一系统如何利用双模板制作电脑站及移动站，本文参考网上资料加以整理。最后得出功能是PC站与移动站共用一个数据库，做到内容发布同步，通过伪原创得出PC站网址与移动站网址一一对应，比如如：http://www.66fww.com对http://m.66fww.com,只是网址头部不同，并且通过判断用手机浏览网站时自动跳动到移动站网址及模板，每个网址一一对应跳转。表达能力有限，越说我都越糊涂了，下面一点点修改吧

第一步：网址解析

绑定三个网址：http://www.XX.com、http://m.XX.com、http://XX.com。

第二步：做网址伪原创
栏目伪原创后网址如：
http://www.XX.com/list-1-1.html，内容页网址：http://www.XX.com/show-1-1-1.html。
对应移动站网址：栏目伪原创后网址如：
http://m.XX.com/list-1-1.html，内容页网址：http://m.XX.com/show-1-1-1.html。
至于怎么伪原创不是本文的重点，不会伪原创另外讨论。

第三步:修改phpcms/modules/content/index.php。
在31行处找到 include template('content','index',$default_style);
修改为：
if(substr($_SERVER['SERVER_NAME'], 0,1) == 'm'){

include template('content_m','index',$default_style);

}else{

include template('content','index',$default_style);

}

分别在203、265、278行处把

include template('content',$template);

修改为：
if(substr($_SERVER['SERVER_NAME'], 0,1) == 'm'){

include template('content_m',$template);

}else{

include template('content',$template);

}

意思是，当域名头部为m时选择content_m文件夹里的模板，www时选择content文件夹的模板。

第四步：把存放模板的文件夹content复制一份，重命名为content_m。
里面的模板文件名一样，里面基本文件 header.html,footer.html,index.html,category.html,list.html，show.html。

content文件夹内模板为PC版调用，content_m 为移动站调用，移动板文件建议用html5制作。

第五步：在PC版模板加入跳转脚本判断为移动端自动跳转网址

脚本写法：<script src="{JS_PATH}uaredirect.js" type="text/javascript"></script>

<script type="text/javascript">uaredirect("要跳转到的移动站网址");</script>

首页、单页、栏目页、内容页各自调用单独的头部模板，方便写跳转网址。

1、首页跳转的网址写法为：

<script type="text/javascript">uaredirect("http://m.XX.com/index.php");</script>

2、单页、栏目页跳转的网址写法为：

<script type="text/javascript">uaredirect("http://m.XX.com/list-{$catid}-{$page}.html");</script>

3、内容页跳转的网址写法为：

<script type="text/javascript">uaredirect("http://m.XX.com/show-{$catid}-{$id}-{$page}.html");</script>

脚本uaredirect.js的文本为：

function uaredirect(f){try{if(document.getElementById("bdmark")!=null){return}var

b=false;if(arguments[1]){var e=window.location.host;var

a=window.location.href;if(isSubdomain(arguments[1],e)==1){f=f+"/#m/"+a;b=true}else{if(isSubdomain

(arguments[1],e)==2){f=f+"/#m/"+a;b=true}else{f=a;b=false}}}else{b=true}if(b){var

c=window.location.hash;if(!c.match("fromapp")){if((navigator.userAgent.match(/(iPhone|iPod|Androi

d|ios)/i))){location.replace(f)}}}}catch(d){}}function

isSubdomain(c,d){this.getdomain=function(f){var e=f.indexOf("://");if(e>0){var

h=f.substr(e+3)}else{var h=f}var g=/^www\./;if(g.test(h)){h=h.substr(4)}return h};if(c==d){return

1}else{var c=this.getdomain(c);var b=this.getdomain(d);if(c==b){return

1}else{c=c.replace(".","\\.");var a=new RegExp("\\."+c+"$");if(b.match(a)){return 2}else{return

0}}}};

个人建议脚本尽量放在靠前位置比较好吧，因为加载网页时尽早触发脚本，跳转到移动网页会不会快点呢，这是

我的个人意见，不知对否请高手指正。



第六步：content_m中模板调用的更改

由于phpcms把文章的url都固定写死在数据表中.所以,页面中的标签不能在使用{$r}，而要改成{str_replace('http://www.','http://m.',$r)},

意思是,截取url,把http://www.替换成http://m.，其它琏链接的标签参考此法。

PC版首页可以生成静态，也可以是动态。双模板伪原创好处是写百度适配非常简单,直接三句：

http://www.xx.com 对 http://m.xx.com

http://www.xx.com/list-(\d+)-(\d+).html 对 http://m.xx.com/list-${1}-${2}.html

http://www.xx.com/show-(\d+)-(\d+)-(\d+).html 对 http://m.xx.com/show-${1}-${2}-${3}.html

当然PC站静态也可以的，不过移动站就不能静态或伪静态了，因为只能生成一个静态页面，起码我不会弄，但可以跳转到移动站的动态网址，跳转网址可以参考伪静态的，无非是三个参数的对应。好了，这是我用双模板制作PC手移动站的一点点心得，完胜系统自带的手机门户站吧，手机站和PC
站一样的标签调用。如有看不懂的地方可以提问。