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

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

思良:可以看视频(点全屏,虚拟机分辨率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>

new_pa1.jpg

new_pa1.jpg

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

第三,首页模板制作

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

new_pa2.jpg

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

new_pa6.jpg

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

new_pa4.jpg

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

new_pa7.jpg

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

new_pa3.jpg

new_pa4.gif

new_pa5.jpg

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

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

a标题

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

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

new_pa8.jpg

b超链接,

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

new_pa9.jpg

代码:<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

new_pa10.jpg

举例:服务器架设栏目,本身ID是31,父级建站软件是36,所以写成:<a href="/e/wap/list.php?classid=31&amp;style=0&amp;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]);

?>

 

<li><a href="<?=$wapsr[titleurl]?>">

<div class="thumb"><img src="<?=$wapr[titlepic]?>"></div>

<div class="content">

<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导航(右边),第一个是自带的列表页效果图。

new_pa12.jpg

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

new_pa6.gif

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

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

c文章列表标签代码

<?php
while($r=$empire->fetch($sql))
{
$titleurl="show.php?classid=".$r[classid]."&amp;id=".$r[id]."&amp;style=".$wapstyle."&amp;cpage=".$page."&amp;cid=".$classid."&amp;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条,所以上面抓图没出现分页。

new_pa13.jpg

e版权其他细节

第五内容页修改

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

new_pa15.jpg

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);

?>

<span><a href="<?=$wapsr[titleurl];?>">上一篇:<?=$wapr[title]?></a></span>

<?

}

?>

<?php

//下一篇代码示例

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

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

{

        $wapsr=ewap_eloop_sp($wapr);

?>

  <span><a href="<?=$wapsr[titleurl];?>">下一篇:<?=$wapr[title]?></a></span>

<?

}

?>

当前位置代码:

当前位置:<a href="/e/wap/list.php?classid=<?=$bbclassid?>"><?=$class_r[$bbclassid][classname]?></a><<

<a href="/e/wap/list.php?classid=<?=$bclassid?>"><?=$class_r[$bclassid][classname]?></a><<

<a href="/e/wap/list.php?classid=<?=$classid?>"><?=$class_r[$classid][classname]?></a>

一般就用标题和内容即可

修改好后,在本地测试下,浏览正常,就可以把文件上传到服务器上去,注意:你做的超链接不要是本地的,是要网站的。

------------------------------------------------------------------

福利:本站手机模板文件下载 : http://pan.baidu.com/s/1dF0z3FV (2017-1-23更新)

 

把文件上传到e/wap目录下,全部替换原来的,注意:1我的是UTF-8编码,不要乱替换,否则乱码,2我网站的超链接前面都有个/www/你们修改的时候记得删除。

 

    支付宝扫码领红包,不用多说,用过的人都知道,双赢的,你得红包,我得到同等推广红包,比如你扫到1元,我也得1元,大家得到的红包可以去实体店消费!新用户至少10元以上哦,每天都有!希望大家每天来本站扫码!感谢感谢!

    把打赏改成扫码红包了!支持本站就扫码下!


下一篇: 帝国cms文章内容tags关键词设置调用方法以及tags静态化


上一篇:如何使用ecmsshop制作多终端的商城模板


小提示:按 回车[Enter]键 返回,按 ←键 返回上一页, 按 →键 进入下一页。

网友评论(1条评论)

选择头像
新闻评论(共有 0 条评论)

手机访问

本站APP

联系我

加我微信