织梦CMS模板如何快速转手机模板？-网站模板-锦华智联科技

官方推荐 - 模板手机自动识别（最简单、高效）

这是织梦官方提供的标准方法,强烈推荐使用，它只需要你将现有的桌面模板复制一份，稍作修改，然后放在指定的手机目录下即可。

（图片来源网络，侵删）

核心原理

织梦会自动检测访问网站的设备是PC还是手机,如果是手机，它会自动去 /templets/ 目录下寻找一个名为 mobile 的子目录，并加载该目录下的模板文件。

详细步骤

第一步：创建手机模板目录

登录你的网站FTP或文件管理器。
进入织梦的模板目录：/dede/templets/ (这里的 dede 是你的后台目录名，可能不同)。
在 templets 目录下，创建一个新的文件夹，命名为 mobile。
你的手机模板目录结构应该是：/你的网站目录/dede/templets/mobile/。

第二步：复制并修改桌面模板

复制文件：将你当前的桌面模板（default 文件夹）中的所有文件和文件夹，完整地复制到刚刚创建的 mobile 目录中。
（图片来源网络，侵删）
- 如果你的桌面模板在 /dede/templets/default/，就把 default 里的所有东西都复制到 /dede/templets/mobile/。
修改关键文件：你需要对 mobile 目录里的模板文件进行移动端适配，这是转换的核心工作。
- 修改 index.html (首页模板)
  - 引入移动端样式和JS：在 <head> 标签内，添加移动端常用的 viewport 标签和引用移动端CSS框架（如 Bootstrap、AmazeUI 或你自己的移动端样式）。
```
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>{dede:global.cfg_webname/}</title>

<link rel="stylesheet" href="/templets/mobile/css/style.css">


</head>
```
  - 简化布局：删除桌面模板中复杂的侧边栏（left 或 right）、顶部通栏广告等不适合手机屏幕的元素，保留核心内容区域（如 main）。
  - 优化列表和文章页：调整文章列表（list_article.htm）和文章内容页（article_article.htm）的样式，确保文字大小、行间距、图片宽度适合手机浏览。
- 修改 head.htm (头部文件)
  - 移除桌面版的导航菜单,替换为适合手机的汉堡菜单。
  - 简化 logo，使其尺寸变小。
  - 可以添加搜索框。
- 修改 footer.htm (底部文件)
  （图片来源网络，侵删）
  
  简化底部版权信息,通常只保留版权号和备案号。
- 修改CSS文件 (style.css)
  - 使用响应式单位：将固定的 px 单位改为相对单位 rem 或 em，或者使用百分比，这是实现自适应的关键。
  - 媒体查询：如果需要更精细的控制，可以使用 @media 查询，针对不同屏幕尺寸设置不同的样式。
```
/* 基础样式 */
body { font-size: 16px; }
.content { width: 100%; }
```
  / 当屏幕宽度小于等于 768px 时（平板和手机） / @media (max-width: 768px) { .sidebar { display: none; } / 隐藏侧边栏 / .main-content { width: 100%; } / 内容区全宽 / }
```
*   **图片自适应**：为图片添加 `max-width: 100%; height: auto;` 属性，防止图片撑破容器。
```
- 修改JS文件
  - 如果你的桌面模板依赖 jQuery，确保你的移动端也引入了 jQuery。
  - 汉堡菜单的下拉功能通常需要一点JS来实现。

第三步：开启并配置织梦后台

登录织梦后台。
进入 【系统】-> 【系统基本参数】。
在左侧菜单选择 【核心设置】。
找到 “是否开启手机模板” 选项，将其设置为 “是”。
保存设置。

至此,你的网站就已经具备手机访问能力了，当用户用手机访问时，织梦会自动加载 /templets/mobile/ 目录下的模板。

完全独立创建手机模板（更灵活、性能更好）

如果你的网站在PC和手机端的布局、内容差异巨大，或者你想追求极致的性能优化，可以选择完全独立创建一套手机模板。

核心原理

这种方法不依赖织梦的自动识别,而是通过修改PHP文件，让手机端完全调用另一套独立的模板系统，你可以为手机端设置完全不同的模板文件夹、不同的变量和逻辑。

详细步骤

第一步：创建独立的手机模板目录

在 /templets/ 目录下，创建一个全新的文件夹，例如命名为 m。
在 m 文件夹里，像创建桌面模板一样，完整地创建一套手机模板文件，包括：
- index.html (首页)
- list_*.html (列表页)
- article_*.html (文章页)
- head.html, footer.html 等
- css/, js/, images/ 等资源文件夹。

第二步：修改织梦核心文件

这是最关键的一步,需要修改织梦的 include 目录下的文件来实现模板切换。

修改 arc.archives.class.php (文章页调用文件)

找到 GetTemplets() 函数。

在函数内部,在 return $file; 之前，加入设备判断逻辑。

// 在 GetTemplets() 函数中，return $file; 之前添加
if($this->Fields['ismobile'] == 1 || (function_exists('is_mobile') && is_mobile())){
$file = str_replace('/templets/default/', '/templets/m/', $file);
}
// 或者更通用的判断
if(strpos($this->Fields['keywords'], 'mobi') !== false || (function_exists('is_mobile') && is_mobile())){
$file = str_replace('/templets/', '/templets/m/', $file);
}

注意：is_mobile() 是一个自定义函数，你需要自己实现它，下面会提供这个函数。

修改 arc.listview.class.php (列表页调用文件)
- 同样找到 GetTemplets() 函数。
- 在 return $file; 之前，添加与上面文章页完全相同的设备判断逻辑。

创建 is_mobile() 函数

为了方便复用,建议将设备判断逻辑封装成一个函数。

在织梦的核心文件中,include/common.inc.php 的开头，添加以下代码：

// 检测是否为移动设备
if(!function_exists('is_mobile')){
function is_mobile(){
    // 如果有HTTP_X_WAP_PROFILE则一定是移动设备
    if (isset ($_SERVER['HTTP_X_WAP_PROFILE'])){
        return true;
    }
    // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息
    if (isset ($_SERVER['HTTP_VIA'])){
        // 找不到为flase,否则为true
        return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;
    }
    // 脑残法，判断手机发送的客户端标志
    if (isset ($_SERVER['HTTP_USER_AGENT'])){
        $clientkeywords = array('nokia','sony','ericsson','mot','samsung','htc','sgh','lg','sharp','sie-','philips','panasonic','alcatel','lenovo','iphone','ipod','blackberry','meizu','android','netfront','symbian','ucweb','windowsce','palm','operamini','operamobi','openwave','nexusone','cldc','midp','wap','mobile');
        // 从HTTP_USER_AGENT中查找手机浏览器的关键字
        if (preg_match("/(".implode('|',$clientkeywords).")/i",strtolower($_SERVER['HTTP_USER_AGENT']))){
            return true;
        }
    }
    // 协法，判断是否为wap协议
    if (isset ($_SERVER['HTTP_ACCEPT'])){
        // 如果只支持wml并且不支持html那一定是移动设备
        // 如果支持wml和html但是wml在html之前则是移动设备
        if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))){
            return true;
        }
    }
    return false;
}
}

第三步：测试

完成以上修改后,清空一下网站缓存，然后用手机访问网站，如果配置正确，网站将加载 /templets/m/ 目录下的模板。

两种方法的对比与选择

特性	官方自动识别	完全独立创建
实现难度	简单，只需复制和修改模板文件。	复杂，需要修改PHP核心文件，有一定风险。
灵活性	一般，PC和手机端模板文件结构基本一致。	极高，可以为手机端创建完全独立、不同的模板体系。
维护成本	低，后台一键开启/关闭，与原系统无缝集成。	高，需要手动维护两套模板，升级织梦时可能需要重新修改文件。
性能	稍好，因为复用了部分PHP逻辑。	可能更好，可以针对手机端做极致的代码和资源优化。
推荐场景	绝大多数网站，特别是中小型网站，快速适配移动端。	大型网站、电商网站，PC和移动端体验差异巨大，或需要独立开发移动App接口时。

总结与建议

对于绝大多数用户来说,强烈推荐使用方法一（模板手机自动识别），它简单、安全、官方支持，足以满足大部分移动端适配的需求，你只需要专注于把 mobile 目录下的模板做得美观、易用即可。

只有当你对网站有非常特殊和复杂的需求,并且具备一定的PHP开发能力时，才考虑使用方法二，在进行方法二的操作前，务必备份你的网站文件和数据库，以防修改出错导致网站无法访问。