欢迎来到爬蛛seo网站优化站点,希望能助你快速提升网站收录和排名,成为一名专业的网络优化师!

dedecms实现移动跳转适配实操分享

建站防站 2022-08-02 10:32:3855张大韦

经由过程1系列关于移动适配的培训与文章分享,年夜部份站长同窗已领会移动适配道理和方式,并起头积极的利用适配东西!但调研发现,部份站长在利用移动化适配东西仍有些困扰,出格是中小型站长,缺少现实的案例指点。

斟酌到中小型网站中Dedecms利用几率较高,今天我们特意约请了百度站长社区版主—洪石陈来为年夜家做Dedecms移动适配分享。

第1步:安装Dedecms移动站点的两种体例

(1)下载新版本直接安装利用,Dedecms版本:V5.7SP1正式版(2022-06⑴8)该版本包括旧版本所没有的移动站点功能。

(2)老版本进级(仅针对增添移动站点功能),下载最新版本(注重网站编码需与原站1致),复制紧缩包中以下文件到原站对应目次下:

注重:若是原站有非默许模板,如某栏目模板为/templets/defaultst_default_news.htm,可将/templets/defaultst_default_m.htm复制1份更名为list_default_news_m.htm。

即:pc端网站模板需有对应的移动端网站模板,后者文件名为前者文件名后“_m”。

安装或进级dedecms完成,此时应当就能够进行移动跳转适配了,但,dedecms20220618版本供给的移动站点功能在利用进程中发现1些题目,需要进行点窜后才可正常利用,所以有了下面的dedecms点窜步调…

第2步:点窜Dedecms

(1)原站如做了将DATA移到根目次外的平安设置,需点窜/m/index.php代码:

if(!file_exists(dirname(__FILE__).'/../data/common.inc.php'))

{

header('Location:install/index.php');

exit();

}

将此中/../data/common.inc.php改成/../../data/common.inc.php,或直接将以上5行代码删除。

(2) 移动站点首页在会第1次拜候时主动天生首页静态文件,条件是/m/目次需设置为可写权限,不然将没法正常更新。以后更新首页静态文件需登岸后台手动更新:在“更新主页HTML”中将“选择主页模板”改成“default/index_m.htm”,将“主页位置”改成“../m/index.html”,再天生主页静态文件。

注:该版本号称“主动天生HTML版”,但默许移动站模板里却有<ahref="index.php">的动态首页链接,需替代为<ahref="index.html">静态链接情势。

※如感觉利用静态页面麻烦,想将首页设置为动态阅读,可点窜/m/index.php:

$row['showmod']= isset($row['showmod'])? $row['showmod'] : 0;

if ($row['showmod'] == 1)

{

$pv->SaveToHtml(dirname(__FILE__).'/index.html');

include(dirname(__FILE__).'/index.html');

exit();

}

else {

$pv->Display();

exit();

}

以上代码替代为1行:$pv->Display();

第3步:首页“图文资讯”部份的url为pc端链接,点窜为移动端链接:

搜刮模板/templets/default/index_m.htm中所有<a href="[field:arcurl/]"> ,替代为<ahref="view.php?aid=[field:id/]">

第4步:通用头部含有搜刮框,搜刮跳转至pc端搜刮页面,建议删除:

在/templets/default/header_m.htm中删除以下代码:

<form class="am-topbar-form am-topbar-leftam-form-inline am-topbar-right" role="search"action="{dede:global.cfg_cmsurl/}/plus/search.php">

<input type="hidden" name="mobile"value="1" />

<input type="hidden" name="kwtype"value="0" />

<div class="am-form-group">

<input name="q" type="text"class="am-form-field am-input-sm" placeholder="输进关头词">

</div>

<button type="submit" class="am-btnam-btn-default am-btn-sm">搜刮</button>

</form>

第5步: 移动站点默许利用2级目次,但今朝移动适配需要利用2级域名(前段时候是可使用2级目次的,但今朝已调剂,不克不及再提交2级目次),所以我们要设置移动站可经由过程2级域名拜候,解析2级域名至网站地点办事器ip,并在办事器/空间大将2级域名绑定到/m/目次。

成功设置2级域名后,经由过程2级域名阅读网站会发现图片均没法显示,缘由是图片路径有误——图片路径为“/uploads/x/y.jpg”

相对根目次路径情势,在pc站页面中显示正常,由于pc站域名下存在该目次,而2级域名绑定的是2级目次,此中其实不存在该目次,

所以拜候图片会返回 404毛病。对此,有多种解决方案,下面供给两个思绪(示例pc站:www.nt090.com ;移动站:m.nt090.com):

(1)URL 重写(保举)

将对http://m.nt090.com/uploads/的拜候重写 至http://www.nt090.com/uploads/,apache情况下,在/m/目次中的.htaccess(如无则需新建)中增添以下代码便可:

RewriteEngine on

RewriteCond %{http_host} ^m.nt090.com [NC]

RewriteRule ^uploads/(.*)$ http://www.nt090.com/uploads/$1 [L]

iis情况下近似法则。

(2)点窜模板路径

在所有移动端模板中的<head></head>中增添:

<base href="http://www.nt090.com" />

再将代码中的

“<a href="list.php”改成完全路径“<a href="http://m.nt090.com/list.php”

“<a href="viewphp”改成完全路径“<a href="http://m.nt090.com/view.php”

另:需将根目次下的/images/defaultpic.gif(缩略图默许图片)复制到/m/目次下,不然列表页中如存在无缩略图的文章,对应缩略图位置会没法正常显示图片。

其他:

1、若有栏目不想在首页下方列表区域或通用头部显示,可在后台对应的栏目办理/常规选项中设置埋没。

2、为了更好的实现pc端和移动端匹配结果,可在pc端模板增添近似以下代码:

首页

<meta http-equiv="mobile-agent"content="format=xhtml;url={dede:global.cfg_mobileurl/}/">

<scripttype="text/javascript">

if(window.location.toString().indexOf('pref=padindex')!= ⑴){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|WindowsPhone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/";}elseif(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}

</script>

栏目页

<metahttp-equiv="mobile-agent"content="format=xhtml;url={dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}">

<scripttype="text/javascript">

if(window.location.toString().indexOf('pref=padindex')!= ⑴){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|WindowsPhone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/list.php?tid={dede:field.id/}";}elseif(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}

</script>

文章页

<meta http-equiv="mobile-agent"content="format=xhtml;url={dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}">

<script type="text/javascript">

if(window.location.toString().indexOf('pref=padindex') !=⑴){}else{if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) ||(/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){if(window.location.href.indexOf("?mobile")<0){try{if(/Android|WindowsPhone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){window.location.href="{dede:global.cfg_mobileurl/}/view.php?aid={dede:field.id/}";}elseif(/iPad/i.test(navigator.userAgent)){}else{}}catch(e){}}}}

</script>

代码中的{dede:global.cfg_mobileurl/}部份要替代为包括“http://”的2级域名(即:http://m.nt090.com),如不想点窜模板里的相干代码,也可点窜/include/common.inc.php中的$cfg_mobileurl变量赋值为2级域名。

以上代码为dedecms新版模板所利用,第1行<meta>标签代码为百度发现跳转适配关系的体例(可同时利用)之1——“Meta标识表记标帜”,下面几行javascript代码的功能是辨认是不是移动端装备拜候,如是则将当前pc端页面主动跳转到匹配的移动端页面。

别的,还可以使用<link>标签以便于百度更好地发现PC站和移动站的移动适配关系,在模板的<head></head>标签内插手以下代码:

PC站首页模板:

<link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.nt090.com" >

PC站栏目页模板:

<link rel="alternate" media="only screen and(max-width: 640px)"href="http://m.nt090.com/list.php?tid={dede:field.id/}" >

PC站文章页模板:

<link rel="alternate" media="only screen and(max-width: 640px)" href=" http://m.nt090.com/view.php?aid={dede:field.id/}">

移动站首页模板:

<link rel="canonical"href="http://www.nt090.com/ "/>

栏目页模板:

<link rel="canonical"href="http://www.nt090.com{dede:type typeid='0' row=1}[field:typelink/]{/dede:type}"/>

文章页模板:

<link rel="canonical"href="http://www.nt090.com/{dede:field.idrunphp='yes'}$id=@me;@me='';$url=GetOneArchive($id);@me=$url['arcurl'];{/dede:field.id}"/>

至此,移动站架设根基成型。

提交移动跳转适配

URL对应关系示例:

适配体例:

栏目页的对应关系没有纪律,且数目较少,利用URL适配 ;文章页为有纪律的网址,且数目多,利用法则适配。

提交文章页法则适配(如图):

提交首页和栏目页URL适配(如图):

对栏目较多的Dedecms网站,人工列出所有的栏目页URL对明显很费事,这里保举1个方式可以轻松解决该题目:

※在模板中嵌进以下代码,对应前台页面中便可显示所有栏目标URL对,复制粘贴便可:

{dede:channelartlist row=100 typeid='top'}

http://www.nt090.com{dede:field name='typeurl'/}http://m.nt090.com/list.php?tid={dede:field name='id'/}<br>

{dede:channel type='son' noself='true'}

http://www.nt090.com[field:typelink/]http://m.nt090.com/list.php?tid=[field:id/]<br>

{/dede:channel}

{/dede:channelartlist}

※提交完法则适配,期待百度审核。

若是所提交的适配关系有误,处置状况将很快会呈现“校验掉败”的提醒。

很长1段时候以来,良多站长应当都发现移动适配“校验中”时候很长,对此题目,今朝官方已做了改良,校验效力有了较着晋升,之前所提交的适配关系发现正在陆续经由过程。

以下为很早条件交、近期已经由过程适配的1个网站示例:

本文方案基于Dedecms还没有成熟的移动站功能,虽较为简单易用,但美中不足的是今朝移动站URL仅能利用动态地址,如需利用静态地址需要经由过程设置伪静态来实现,或期待Dedecms发布下1个较为成熟的版本,再或直接对Dedecms进行2次开辟实现移动站的静态页面天生功能,对此类操纵本文就不再延长……


Copyright © 2022- 爬蛛seo版权所有. 免责声明:网站中图片文案均来源于网络,如有版权问题请联系删除!

SEO优化 SEO百科 xml地图 备案号:皖ICP备88888888号 联系方式:QQ3550549438