dede wap教程如何快速搭建移动站点？-建站教程-锦华智联科技

DedeCMS WAP 网站搭建全攻略 (附详细步骤)

DedeCMS 从诞生之初就内置了对 WAP (手机网站) 的支持，其核心思想是“同一后台，双端内容”，这意味着你只需要在 PC 端的后台发布一次文章，系统就会自动生成一份适配手机端的内容,无需重复劳动。

（图片来源网络，侵删）

本教程将分为以下几个部分：

前期准备与原理理解
详细搭建步骤 (图文并茂)
移动端模板制作与调用
常见问题与高级技巧
重要提醒：DedeCMS 的现状

第一部分：前期准备与原理理解

在开始之前,请确保你已经准备好以下内容：

一个已安装好的 DedeCMS 系统 (本教程以经典的 DedeCMS V5.7 SP2 为例，新版思路类似)。
一个支持子目录或子域名的虚拟主机 (yourdomain.com 是主站，m.yourdomain.com 或 yourdomain.com/m/ 是手机站)。
FTP 文件管理工具 (如 FileZilla) 和 数据库管理工具 (如 phpMyAdmin)。

核心工作原理

DedeCMS 的 WAP 功能依赖于一个核心机制：模板分离与自动识别。

模板分离：你需要在 /templets/ 目录下，为手机端创建一套独立的模板文件，PC 端的列表页模板是 list_default.htm，那么手机端的列表页模板就应该命名为 m/list_default.htm。
自动识别：当有用户访问你的网站时，DedeCMS 会通过一个核心文件 m/index.php 来判断用户的设备。
- 如果是手机用户，m/index.php 会加载手机端的模板 (即 m/ 目录下的模板)。
- 如果是 PC 用户，则正常加载 PC 端的模板。
内容同步：你在后台发布文章时，系统会同时生成一份 HTML 文件给 PC 端，另一份给手机端，它们调用的是同一篇内容的数据,但展示在不同的模板上。

第二部分：详细搭建步骤

步骤 1：创建手机站目录

通过 FTP 登录你的网站根目录，在 dede (或你的后台目录) 同级目录下，创建一个名为 m 的文件夹,这个文件夹将专门用于存放手机网站的前端文件。

（图片来源网络，侵删）

网站根目录/
├── dede/          (后台管理目录)
├── m/             (手机站目录，我们在这里创建)
├── templets/      (PC端模板目录)
├── uploads/       (附件目录)
├── index.php      (PC端首页入口)
└── ... (其他文件)

步骤 2：复制核心文件到手机站目录

将 DedeCMS 根目录下的以下 4 个核心文件，复制到你刚刚创建的 m 文件夹中。

index.php
index.html
robots.txt
favicon.ico

注意：是复制，不是剪切，这些文件是 PC 站正常运行的必需文件。

步骤 3：修改手机站的核心配置文件

这是最关键的一步，你需要修改 m 目录下的 index.php 文件,让它知道手机站该去哪里找模板和数据。

用文本编辑器打开 m/index.php 文件。
（图片来源网络，侵删）

找到这一行代码：

require_once(dirname(__FILE__)."/../include/config_base.php");

在它下面,添加以下代码：

//--------------- 手机端配置开始 ----------------
if(!defined('DEDEMOB'))
{
    define('DEDEMOB', 'M');
}
//--------------- 手机端配置结束 ----------------

这段代码的作用是告诉 DedeCMS：“嘿，我们现在是在手机端模式了！”

步骤 4：修改手机站目录的 index.php

再次打开 m/index.php 文件，找到以下代码段（通常在文件靠后部分）：

//自动处理主页
if($dopost == 'list')
{
    $tid = (isset($tid) && is_numeric($tid)) ? $tid : 0;
    include(DEDETEMPLATE.'/'.($cfg_df_namerule=='Y' ? 'index.htm' : 'index_default.htm'));
    exit();
}

修改为：

//自动处理主页
if($dopost == 'list')
{
    $tid = (isset($tid) && is_numeric($tid)) ? $tid : 0;
    // 关键修改：加载手机端的首页模板
    include(DEDETEMPLATE.'/m/index.htm');
    exit();
}

解释：DEDETEMPLATE 是一个常量，默认指向 /templets/ 目录，我们在这里把它指向 /templets/m/，这样当访问 m/index.php 时，系统就会去加载手机端的首页模板 m/index.htm。

步骤 5：创建手机端模板

你需要为手机端创建模板，在 /templets/ 目录下，再创建一个名为 m 的文件夹。

网站根目录/
└── templets/
    ├── default/          (PC端默认模板)
    ├── m/                (手机端模板目录)
    │   ├── index.htm     (手机端首页模板)
    │   ├── list_default.htm (手机端列表页模板)
    │   ├── article_article.htm (手机端文章页模板)
    │   └── ... (其他手机端页面模板)
    └── ... (其他PC端模板)

如何制作手机端模板？

最简单的方法：复制你 PC 端的模板文件（如 index.htm），然后粘贴到 m 文件夹中，并根据手机屏幕尺寸进行简化修改（如移除侧边栏、缩小字体、简化导航等）。
推荐的方法：寻找或购买现成的手机端响应式模板,直接使用。

步骤 6：更新系统缓存

登录你的 DedeCMS 后台 (/dede/)，进入【系统】-> 系统基本参数设置，点击页面最下方的“提交”按钮,这一步是为了让新的配置生效。

步骤 7：设置手机站首页

在后台，进入【核心】-> 网站栏目管理。
找到你网站的顶级栏目（通常是“主页”），点击后面的【修改】。
在栏目设置页面，找到“高级选项”部分。
在“选择主页模板”中，选择你刚刚创建的手机端首页模板，m/index.htm。
勾选 “仅动态浏览” (可选，建议勾选，减少手机端生成静态文件的压力)。
点击“确定”保存。

步骤 8：测试！

一切就绪了,你可以通过以下两种方式测试你的手机站：

使用手机访问：用手机浏览器访问 http://你的域名/m/。
使用 PC 模拟器：在 PC 浏览器的开发者工具 (F12) 中，切换到“响应式设计模式”或选择一个手机设备型号，然后访问 http://你的域名/，DedeCMS 应该会自动跳转到 m 目录。

第三部分：移动端模板制作与调用

手机端模板的制作是重点，这里提供一些常用的 DedeCMS 标签在手机端的调用方法。

调用栏目列表

{dede:channel type='top' row='8'}
    <a href="[field:typelink/]">[field:typename/]</a>
{/dede:channel}

调用文章列表

{dede:arclist titlelen='30' row='10'}
    <li>
        <a href="[field:arcurl/]">[field:title/]</a>
        <span>[field:pubdate function="MyDate('m-d', @me)"/]</span>
    </li>
{/dede:arclist}

调用幻灯片 (焦点图)

PC 端的幻灯片标签 {dede:flink/} 或自定义的幻灯片标签在手机端可能不适用,你需要为手机端单独做一个。

假设你后台有自定义的幻灯片数据,可以这样调用：

{dede:myad name='m_focus'/}

注意：myad 是广告调用标签，你需要先在后台【广告管理】中创建一个名为 m_focus 的广告位，并内容为你的 HTML 代码。

调用文章内容

在文章详情页模板 article_article.htm 中，调用内容的标签和 PC 端一样。

<h1>[field:title/]</h1>
<div class="info">
    <span>作者：[field:writer/]</span>
    <span>时间：[field:pubdate function="MyDate('Y-m-d H:i', @me)"/]</span>
    <span>点击：[field:click/]</span>
</div>
<div class="content">
    [field:body/]
</div>

第四部分：常见问题与高级技巧

问题 1：为什么我的手机站样式错乱？

原因：PC 端的 CSS 和 JS 文件可能不兼容手机，或者模板没有正确引用手机端的样式。解决：

在手机端模板的 <head> 标签内，确保引用的是为手机端优化的 CSS 文件。
可以使用媒体查询 @media 来为不同设备编写样式,实现一套模板适配两端。
简化模板，移除 PC 端复杂的 JS 动画效果。

问题 2：如何实现 PC 和手机端自动跳转？

DedeCMS 默认不提供这种跳转，但你可以通过修改 index.php 来实现。

在网站根目录的 index.php 最顶部，加入以下 PHP 代码：

<?php
// 自动适配手机端
if (isset($_SERVER['HTTP_USER_AGENT'])) {
    $clientuseragent = strtolower($_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');
    if (preg_match("/(".implode('|', $clientkeywords).")/i", $clientuseragent) && strpos($clientuseragent, 'ipad') === false) {
        header('Location: http://你的域名/m/');
        exit;
    }
}
?>

注意：这段代码会检测用户代理，如果是手机设备，就自动跳转到 m 目录。

高级技巧：使用 m 目录实现移动端

这是一种更现代、更规范的做法，与 m/index.php 的原理类似,但结构更清晰。

目录结构：将所有手机端文件（index.php, templets/m/ 等）放在 /m/ 目录下。
配置修改：修改 /m/index.php 中的模板路径指向 /templets/m/。
URL 优化：通过服务器伪静态规则，将 m.yourdomain.com 指向 /m/ 目录，实现子域名访问，这在用户体验和 SEO 上更佳。

第五部分：重要提醒：DedeCMS 的现状

请务必阅读这部分！

停止更新：DedeCMS 的官方开发团队早已停止对 V5 版本的更新和维护，这意味着它存在大量的安全漏洞,且无法修复。
安全风险：如果你仍在使用 DedeCMS，你的网站极易被黑客入侵，被植入木马、黑链，甚至被挂马，导致你的服务器被攻击,数据丢失。
技术过时：其架构和代码思想已经非常陈旧，不符合现代 Web 开发的标准和性能要求。
不推荐新项目：强烈不建议在 2025 年及以后的新项目中使用 DedeCMS。

替代方案推荐

如果你正在考虑新建一个网站，尤其是企业官网，请考虑以下更现代、更安全、更强大的选择：

WordPress：全球最流行的 CMS，插件生态极其丰富，主题美观，对 SEO 友好，非常适合博客、企业官网、电商等。
Typecho：轻量、简洁、优雅的博客程序,非常适合个人博客和小型网站。
帝国CMS：如果对 DedeCMS 的“模型”和“字段”功能有执念，帝国 CMS 是一个更现代化、仍在维护的替代品。
Headless CMS + Vue/React：对于追求极致性能和体验的开发者，可以使用 Strapi、Contentful 等 Headless CMS,配合现代前端框架来构建。

搭建 DedeCMS 的 WAP 站点，核心在于“创建 m 目录、修改核心配置文件、制作手机端模板”，虽然过程不复杂，但请务必牢记 DedeCMS 本身的安全风险。

对于新项目，请拥抱更现代、更安全的 CMS 系统，对于已有的 DedeCMS 网站，请务必做好安全防护,并尽快规划迁移计划。