【原创】手把手教你修改帝国CMS手机模板（含视频教程）

来源：互联网 编辑：思良 发表时间：2015-05-14 关注度：2115 次

思良：可以看视频（点全屏，虚拟机分辨率1024*768的，不用太大哦，没加载请刷新）也可以看下面的文章和视频教程一起做,或者下载：http://img.jygawx.com//jc/2016/2/wap.mp4，(没错两个//)

最近把网站模板搞好，随便想搞下手机模板，发现帝国cms自带的手机模板太难看了，想到网上找一些漂亮的模板，搜索了下几乎没有，帝国接触不多，修改网站模板的时候就搞死人了，但至少还有教程，帝国手机模板教程，几乎没有，只能自己摸索，搞了几天，终于做出一个像样的模板了。高手勿喷，新人可以学习下。如果觉得好，可以转载，如果参考学习，我将提供下载，包括本站手机模板所有文件，拷贝过去就能用，当然要修改对应的栏目名称和超链接。

本文很多图片，但是我不想把图片发到网站去，只能写到百度空间里，此文只写文字教程，图文教程可以参考百度空间链接：(刚想到百度发文，发现百度又改版了------是删除了百度空间，一个字草！又的意思是去年才改风格，不能自定义模板，么想到现在直接不搞了，本网站空间是终身，域名占时为5年，5年后我会改域名，以后就不改了，这个域名本是单位的，没报销只能自己用了，将就用5年吧)
第一，帝国手机模板制作要知道的一些事

a此教程使用的是帝国cms7.2

b访问帝国cms手机版就是网站域名后面加/e/wap/，在首页模板加段代码就可以实现手机访问域名时自动跳转到手机版。

c制作思路：去网上下一些漂亮的模板，静态的，响应式的都行，适合手机浏览的即可，最好有首页，列表页，内容页，修改时就和修改网站模板一样，在对应的地方插入帝国标签，只是手机版标签和网站标签不同而已，后面会说明。

d帝国手机模板文件就3个文件index.temp.php，list.temp.php，show.temp.php，位置：\e\wap\template\1，即网站首页模板，列表模板，内容模板，把下好的模板修改后替换这3个文件就可以用了。但是有个小问题，如果我们在建立栏目是有三级怎么办了？网站模板是通过修改封面模板来实现显示三级栏目的列表。手机模板怎么办了，我想到一个简单的方法，通过导航，把所以栏目都加到导航里，这样点击栏目时，直接访问该栏目的列表模板了，那么首页模板就自定义好了，不要显示很多内容，就用简单的图标做成超链接（大部分下到的模板也是怎么搞的），修改列表页和内容页时上面做个导航即可。

第二，添加自动跳转的代码
只需添加下面2行代码，就可以实现手机访问网站时自动跳转到手机模板上去。
将代码拷贝到网站首页模板 <head>里，下面的网址可以换成你的：
<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script>
<script type="text/javascript">uaredirect("http://www.jygawx.com/e/wap/");</script>

为什么我的前面有个/www/，因为我的网站，一个空间，N个域名，通过代码可以实现访问什么域名跳转到什么文件夹，从而实现一空间多网站，想知道这个代码可以参考我其他的文章，百度空间也有。

第三，首页模板制作

帝国CMS自带的wap模板是这样的，旁边是我做的，

1：先去网上下载一个漂亮的手机模板首页（最好包括列表页和内容页，当然也可以用我的，下面有下载），百度下手机模板，注意不是帝国cms手机模板，帝国的几乎没有，找一个漂亮的首页即可，比如下面。（大家可以去搜索关键字：微站模板，比搜索手机模板多的多）

2：把下好的模板文件拷贝到编辑软件frontpage里自带站点文件夹my web sites里。并在frontpage里移动模板文件里的css,js等文件夹到新建的文件夹，比如bj，frontpage有个这样的功能，如果在frontpage里移动文件夹，会把用到这个文件夹的代码自动修改路径，减少我们的编辑时间，打开index.html文件，查看代码，是不是自动改成bj/css了，Dreamweaver有没有这个功能我就没测试过了，如果没有请自己手动改好，不动文件夹也可以，看个人习惯。

3：以本地测试为例：把bj文件夹拷贝到wap跟目录下，既e/wap下，访问手机网址时就可以直接调用了（上面说了，不移动也可以，wap下就有点乱了，如果你想用几套模板，还是建个文件夹才好）。

4：修改首页模板，手机模板文件放在template文件夹里，有1和2两个文件夹，分别对应2个模板，我们去后台wap设置里可以看到。（我自己做的一个所以多了一个文件夹3），修改首页模板就是找到默认模板对应的文件夹，比如我现在用到是手机版，对应的文件夹是1，那么我们就修改\e\wap\template\1里的index.temp.php

5，通过编辑软件打开首页模板index.temp.php，和下下来的模板文件index.html，把index.html里的代码全部拷贝到index.temp.php里，替换原来的代码。

6：修改index.temp.php里面的代码，只要改几个地方

a标题

手机版标签：<title><?=$pagetitle?></title>

网页版标签：<title>[!--pagetitle--]</title> 和手机版不同，只能按手机版的样式写，如果不知道，可以参考没修改过的模板，

b超链接，

以我的首页模板为例，我网站就4大专栏，把原来的模板修改成我4大专栏，超链接就是他们对应的列表页，

代码：<a href="/e/wap/list.php?classid=1&style=0&bclassid=1">兴趣爱好 </a>

这里要说下，classid是本栏目ID bclassid是父级栏目ID，我们可以去后台栏目管理参考到栏目对应的ID，上面兴趣爱好是一级栏目，父级ID就是自己，ID是1，所以写成classid=1&style=0&bclassid=1

举例：服务器架设栏目，本身ID是31，父级建站软件是36，所以写成：<a href="/e/wap/list.php?classid=31&style=0&bclassid=36">服务器架设</a>

超链接就是怎么修改的，修改对应栏目ID即可。

c版权，等其他细节，

思良：如果想在首页显示某栏目文章列表可以使用下面代码：

<?php

$wapsql=ewap_eloop(35,4,0,1,'isgood=1');

while($wapr=$empire->fetch($wapsql))

{

$wapsr=ewap_eloop_sp($wapr);

//时间格式，不需要可以不用

$wapr[newstime]=date($pr['wapshowdate'],$wapr[newstime]);

<p><a title="<?=$wapr[title]?>" href="<?=$wapsr[titleurl]?>" data-ajax="false"><?=$wapr[smalltext]?><?=$wapr[newstime]?></a></p>

</div>

</a>

</li>

}

说明：

$wapsql=ewap_eloop(35,4,0,1,'isgood=1'); 35栏目ID，显示4条，论坛已经说明过了。

<?=$wapsr[titleurl]?>调用超链接

<?=$wapr[titlepic]?>调用图片，就是这个图片，一直出问题，后来搜索帝国论坛，才发现，多了个s就不行，没看清楚定义的函数。

<?=$wapr[title]?>调用标题

<?=$wapr[smalltext]?>调用简介

<?=esub($wapr[smalltext],40)?>控制显示数字

<?=$wapr[newstime]?>调用时间

显示的是ID为34的栏目列表，如果想加时间，在标题后面加入<?=date("Y-m-d",$r[newstime])?>即：<li><a title="<?=$wapr[title]?>" href="<?=$wapsr[titleurl]?>" data-ajax="false"><?=$wapr[title]?></a><?=date("Y-m-d",$r[newstime])?></li>，样式自己调。

此代码我是在帝国论坛上找到的（http://bbs.phome.net/ShowThread/?threadid=337326&forumid=31），

感谢提供者，虽然模版做的不好看，但是能实现很多功能，比如在首页显示某栏目列表，还可以显示图片，正是我们想要的，

具体代码查看template里的3文件夹，不要拷贝替换（替换了，不一定显示的出效果），只要找出自己要的代码即可，

原效果：http://www.suolalube.com/e/wap/

下载地址：http://pan.baidu.com/s/1c1rkLJM 下不下来可以留言，我把我保存的共享出来。

第四：列表页修改

1，列表页主要是导航的制作，可以百度手机导航菜单代码，很多漂亮的(中间)，不过没几个支持三级导航，我只能找一个支持3级的CSS导航（右边），第一个是自带的列表页效果图。

2，代码修改，在对应位置插入对应代码。

a标题标签<?=$pagetitle?>

b列表名标签<?=$pagetitle?>和标题一样的

c文章列表标签代码

<?php
while($r=$empire->fetch($sql))
{
$titleurl="show.php?classid=".$r[classid]."&id=".$r[id]."&style=".$wapstyle."&cpage=".$page."&cid=".$classid."&bclassid=".$bclassid;
//截取字数
if($pr['wapsubtitle'])
{
$r[title]=sub($r[title],0,$pr['wapsubtitle'],false);
}
//时间格式
$r[newstime]=date($pr['wapshowdate'],$r[newstime]);
?>
<a href="<?=$titleurl?>"><?=DoWapClearHtml($r[title])?></a> <small>(<?=$r[newstime]?>)</small>
<?php
}
?>

当然可以把时间代码删除了， <small>(<?=$r[newstime]?>)</small>，本来手机浏览不方便，加个时间标题字就跟少了。

我自定义了样式，显示标题前面的三角形，代码修改成<li><a href="<?=$titleurl?>" class="news_li" rel="external"><?=DoWapClearHtml($r[title])?></a></li>。如果用到CSS，可以自行添加。

d分页标签代码，

<?php
if($returnpage)
{
?>
<?=$returnpage?>
<?php
}
?>

显示条数，标题数都可以在后台wap管理修改。我设置显示15条，而自发布了3条，所以上面抓图没出现分页。

e版权其他细节

第五内容页修改

1，和列表页一样上面做个导航，对应位置插入手机标签

a标题标签<?=$pagetitle?>
b信息标题:<?=DoWapClearHtml($r[title])?>
c发布时间:<?=date("Y-m-d H:i:s",$r[newstime])?>
d所在地: <?=DoWapRepF($r[myarea],'myarea',$ret_r)?>
e信息内容:<?=DoWapRepF($r[smalltext],'smalltext',$ret_r)?>
f发布者: <?=DoWapClearHtml($r['username'])?>
g联系邮箱: <?=DoWapClearHtml($r['email'])?>
h联系方式: <?=DoWapRepF($r[mycontact],'mycontact',$ret_r)?>
i联系地址: <?=DoWapRepF($r[address],'address',$ret_r)?>

上下一篇代码

<?php

//上一篇代码示例

$wapsql=ewap_eloop($classid,1,0,0,'id<'.$id.'','id desc');

while($wapr=$empire->fetch($wapsql))

{

$wapsr=ewap_eloop_sp($wapr);

}

<?php

//下一篇代码示例

$wapsql=ewap_eloop($classid,1,0,0,'id>'.$id.'','id asc');

while($wapr=$empire->fetch($wapsql))