DedeCMS WAP 网站完整搭建教程

DedeCMS（织梦内容管理系统）是国内非常流行的建站程序，其内置的 WAP 功能虽然不算最前沿，但对于快速搭建一个移动端网站来说，依然非常高效和实用。

dedecms wap教程
（图片来源网络，侵删）

第一部分：基础概念与准备工作

在开始之前,我们需要了解几个核心概念：

  1. 什么是 WAP？

    WAP（Wireless Application Protocol）即无线应用协议，是一种向移动终端（如手机）提供互联网内容和先进服务的全球统一开放协议，就是手机网站。

  2. DedeCMS WAP 的实现原理

    dedecms wap教程
    （图片来源网络，侵删）
    • DedeCMS 的 WAP 功能并不是一个完全独立的网站，而是通过模板判断来调用不同的内容模板。
    • 当一个移动设备访问你的网站时,系统会检测到用户的 User-Agent（用户代理，即浏览器信息），如果识别为手机，就自动调用 /m/ 目录下的手机模板来显示内容。
    • 后台数据库是共享的，这意味着你的手机网站和电脑网站使用的是同一套文章、产品等数据，只是展示样式不同。

准备工作

  1. 服务器环境：

    • 支持 PHP (建议 5.4 - 7.x，高版本可能不兼容)。
    • 支持 MySQL 数据库。
    • 支持伪静态（Rewrite），这对 URL 美化和 SEO 至关重要。

  2. 域名：

    一个已经备案的域名（如果服务器在国内）。

  3. DedeCMS 程序：

    dedecms wap教程
    （图片来源网络，侵删）
    • 下载最新稳定版的 DedeCMS 程序（DedeCMS-V5.7-UTF8-SP2 或更高版本，UTF8 编码是首选，避免中文乱码）。

  4. FTP 工具：

    用于上传文件到服务器（如 FileZilla）。

  5. 本地测试环境（推荐）：

    • 可以使用集成环境如 phpStudy 或 XAMPP 在本地先进行调试，成功后再上传到服务器，可以节省大量调试时间。

第二部分：安装与启用 WAP 功能

步骤 1：安装 DedeCMS

  1. 将下载好的 DedeCMS 程序通过 FTP 解压并上传到你的网站根目录（通常是 public_html 或 www）。
  2. 在浏览器中访问你的域名,http://www.yourdomain.com/install/。
  3. 按照安装向导的提示进行操作：
    • 环境检测：确保各项环境都满足要求。
    • 安装协议：同意协议。
    • 设置参数：
      • 网站名称：你的网站名称。
      • 网站首页：通常是 index.html。
      • 管理员账号：设置你的后台登录用户名和密码。
      • 数据库信息：填写你创建的数据库名、用户名、密码。
  4. 安装成功后,删除 /install/ 目录以保证安全。

步骤 2：检查并启用 WAP 功能

DedeCMS 5.7 版本默认已经包含了 WAP 功能，但需要确认。

  1. 检查 /m/ 目录：

    • 通过 FTP 登录你的服务器，检查网站根目录下是否存在一个名为 m 的文件夹。
    • 这个文件夹就是手机网站的默认目录,里面包含了手机端所需的模板文件（如 index.html, list.html, article.html 等）和核心文件 index.php。
    • 如果没有,你需要从 DedeCMS 安装包里手动复制一个过来。

  2. 后台设置：

    • 登录你的 DedeCMS 后台：http://www.yourdomain.com/dede/
    • 进入 【系统】 -> 【系统基本参数】 -> 【核心设置】。
    • 找到 “是否开启手机站” 选项，将其设置为 “是”。
    • 保存。

  3. 设置手机域名（可选但推荐）：

    • 在同一页面,找到 “手机访问域名”，你可以设置一个专门的二级域名，m.yourdomain.com。
    • 注意：设置此域名后，你需要到你的域名解析后台，为 m.yourdomain.com 创建一个 A 记录，指向你服务器的 IP 地址。

步骤 3：伪静态配置

为了让手机网站的 URL 更美观，并且利于搜索引擎抓取，必须配置伪静态。

  1. 后台开启：

    • 进入 【系统】 -> 【系统基本参数】 -> 【核心设置】。
    • 找到 “手机站是否使用目录”，选择 “是”。
    • 找到 “是否使用伪静态”，选择 “是”。
    • 保存。

  2. 服务器配置：

    • 你需要根据你的服务器类型,修改对应的配置文件。

    • Apache 服务器 (.htaccess)

      • 在 /m/ 目录下确保存在 .htaccess 文件，如果没有，请创建一个。
      • 将以下代码复制到 .htaccess 文件中：
        RewriteEngine On
RewriteBase /m/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

    • Nginx 服务器

      • 在 Nginx 的配置文件中（通常是 nginx.conf 或你网站对应的配置文件），在 server 块内添加如下规则：
        location /m/ {
    if (!-e $request_filename) {
        rewrite ^/m/(.*)$ /m/index.php/$1 last;
    }
}
      • 修改后,需要重启 Nginx 服务。

第三部分：WAP 模板制作与修改

WAP 网站的样式由模板决定，模板文件存放在 /templets/default/m/ 目录下。

核心模板文件

  • index.html：手机首页模板。
  • list.html：列表页模板（如文章列表）。
  • article.html页模板。
  • search.html：搜索页模板。
  • footer.htm：底部公共模板。

修改手机首页

  1. 备份：在修改任何模板前，请务必备份原始文件。
  2. 编辑：通过 FTP 下载 /templets/default/m/index.html 文件，用代码编辑器（如 VS Code, Sublime Text, Dreamweaver）打开。
  3. DedeCMS 标签：
    • 手机模板和电脑模板一样,使用 DedeCMS 的模板标签来调用数据。
    • 调用首页头条新闻：
      {dede:arclist row='5' titlelen='30' typeid='1'}
<li>
    <a href="[field:arcurl/]">[field:title/]</a>
</li>
{/dede:arclist}
    • typeid='1' 表示调用 ID 为 1 的栏目下的文章，你可以根据需要修改。
  4. CSS 样式：
    • 手机网站的 CSS 应该使用响应式设计，或者针对小屏幕进行优化。
    • 模板中的 CSS 代码通常写在 <style> 标签内或外部 .css 文件中。
    • 关键点：
      • 设置 viewport：在 <head> 标签内加入 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">，这可以控制页面的缩放行为。
      • 使用相对单位：多用 、rem、em 或 vw/vh，而不是固定的 px。
      • 简化布局：手机端布局应尽量简洁，避免复杂的浮动和定位。
  5. 上传：修改完成后，保存文件并通过 FTP 上传回原路径，覆盖即可。

修改其他页面

  • 列表页 (list.html)：通常包含栏目名称、文章列表、分页导航 {dede:pagelist/}。
  • 文章页 (article.html)：包含文章标题 {dede:field.title/} {dede:field.body/}、发布时间、作者等。

第四部分：常见问题与高级优化

问题 1：手机网站和电脑网站内容不一致？

  • 原因：通常是由于模板标签调用错误，或者某个栏目在后台没有正确关联到手机端。
  • 解决方法：
    1. 检查手机模板中的 {dede:arclist}、{dede:channel} 等标签的 typeid 是否正确。
    2. 进入后台 【频道】 -> 【栏目管理】，检查每个栏目的“手机栏目选择”是否设置正确。

问题 2：图片在手机上显示过大或超出屏幕？

  • 原因：电脑端的图片尺寸很大，直接显示在手机上会撑破布局。
  • 解决方法：
    1. CSS 控制：在手机模板的 CSS 中，为图片添加一个最大宽度限制。
      img {
    max-width: 100%;
    height: auto;
}
    2. 调用缩略图：在列表页调用文章时，优先使用缩略图 [field:litpic/]，而不是大图。
    3. 后台设置：在后台 【系统】 -> 【图片设置】 中，可以设置“远程站点目录”，并确保缩略图生成规则符合移动端尺寸。

问题 3：如何为电脑端和手机端设置不同的内容？

  • 需求：一篇文章，想在电脑端显示全文，在手机端只显示摘要。
  • 解决方法：
    1. 在文章编辑后台,勾选 “使用远程图片” 和 “下载远程图片本地化”。
    2. 编辑框下方,有一个 简介(手机)” 的输入框。
    3. 在这里填写你希望手机端显示的摘要内容。
    4. 在手机文章模板 article.html 中，不要调用 {dede:field.body/}，而是调用 {dede:field.description function='html2text(@me)'/} 来显示这个摘要。html2text 函数可以将 HTML 格式的简介转换为纯文本。

高级优化：移动端 SEO

  1. 设置移动端 Sitemap：
    • 登录后台,进入 【采集】 -> **【更新主页HTML】 -> **【移动站更新向导】。
    • 按照提示,可以一键生成和更新手机站的 HTML 页面，并生成 sitemap.xml 文件，这个文件告诉搜索引擎你的手机网站结构。
  2. 百度移动适配：
    • 这是非常重要的一步,用于告知百度你的电脑版和手机版网页的对应关系。
    • 登录 百度搜索资源平台。
    • 在 【站点属性】 -> 【移动适配】 中，进行配置。
    • 配置方式通常是 “URL 协议”，设置 pc_url 和 wap_url 的对应关系。pc_url 是 http://www.yourdomain.com/a/b.html，wap_url http://m.yourdomain.com/a/b.html。
    • DedeCMS 默认的 URL 结构已经支持这种对应关系，你只需要在百度平台验证即可。

搭建一个 Dedecms WAP 网站的核心流程可以概括为：

安装程序 -> 检查 /m 目录 -> 后台开启功能 -> 配置伪静态 -> 修改 /templets/default/m/ 下的模板文件 -> 优化内容与图片 -> 提交移动适配。

虽然现在很多网站采用响应式设计（一套模板适配所有设备），但对于已经使用 DedeCMS 的老网站来说，利用其内置的 WAP 功能快速搭建一个移动端站点，仍然是一个性价比极高的选择，希望这份教程能对你有所帮助！