搜索
DEDE建站

dede织梦wap制作如何通用适配多终端？

99ANYc3cd6
99ANYc3cd6 / / 0 评论 / 13 阅读
作者有点忙，还没来得及写简介......
预计阅读时长 22 分钟
位置： 首页 › DEDE建站 › 正文

在移动优先的时代，拥有一个适配手机的网站至关重要，DedeCMS 作为一款经典的 PHP 开源建站系统，其 WAP 功能非常成熟和强大，下面我将为你提供一个从零开始的、详细的通用 WAP 制作指南。

dede织梦通用wap制作
（图片来源网络，侵删）

核心思路

DedeCMS 的 WAP 功能并非是独立的一套程序，而是通过同一套数据库，使用不同的模板来渲染手机端页面，当手机用户访问你的网站时，系统会自动检测用户设备，并调用 WAP 专用的模板文件进行展示。

这个过程可以总结为： 同一套程序 + 同一个数据库 + 两套模板（PC模板 + WAP模板） = 完美适配的 PC + WAP 网站

第一步：准备工作

  1. 环境要求：

    • 一台支持 PHP 的服务器（Linux + Nginx/Apache + MySQL 是最常见组合）。
    • 已安装并正常运行的 DedeCMS 程序（本教程以 DedeCMS V5.7 为例，其他版本类似）。
    • 一个域名,并已解析到服务器。

  2. 文件结构： 安装好 DedeCMS 后，你的网站根目录下会有一个名为 wap 的文件夹。这个文件夹就是 WAP 网站的核心目录，里面存放着 WAP 端的控制器、模型和模板。

    dede织梦通用wap制作
    （图片来源网络，侵删）

第二步：启用 WAP 功能

默认情况下，WAP 功能可能没有完全开启,你需要进行以下设置：

  1. 登录后台：使用管理员账号登录你的 DedeCMS 后台 (/dede/)。

  2. 进入系统设置：

    • 在左侧菜单栏找到并点击 “系统” -> “系统基本参数”。

  3. 修改核心参数：

    dede织梦通用wap制作
    （图片来源网络，侵删）
    • 在弹出的参数设置页面中，找到 “是否启用 WAP 服务” 这个选项。
    • 将其值修改为 “是”。
    • 点击 “确定” 保存。

至此，WAP 功能的开关已经打开,接下来就是最关键的模板制作部分。

第三步：制作 WAP 模板

这是整个流程的核心，WAP 模板的制作原理和 PC 模板一样，都是通过 HTML 和 DedeCMS 的模板标签来构建页面。

WAP 模板的存放位置

WAP 模板文件存放在 /templets/ 目录下的 wap 文件夹中。 /templets/wap/default/

这里的 default 是 WAP 模板的风格文件夹,你可以自定义多个风格。

WAP 模板的命名规则

DedeCMS 对 WAP 模板的文件名有严格规定,它会根据这个规则自动调用对应的模板。

页面类型 PC 模板文件名 WAP 模板文件名 说明
首页 index.htm wapindex.htm 手机首页模板
列表页 list_article.htm list_wap_article.htm 文章列表页模板
页 article_article.htm article_wap_article.htm 页模板
图片列表页 list_image.htm list_wap_image.htm 图片列表页模板
页 article_image.htm article_wap_image.htm 页模板
下载列表页 list_downloads.htm list_wap_downloads.htm 下载列表页模板
页 article_downloads.htm article_wap_downloads.htm 页模板
搜索页 search.htm search_wap.htm 搜索结果页模板
会员相关 member/ member/ 会员中心目录，里面的模板也需对应制作

重要提示：你需要为你的网站创建对应的 WAP 模板文件，你可以直接复制 PC 端的模板文件，然后进行修改,或者从零开始编写。

WAP 模板的特点和常用标签

WAP 模板通常更简洁,注重排版和加载速度。

  • 移动端适配：

    • 在 <head> 标签中加入以下 meta 标签，这是移动端适配的关键：
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
    • 使用 CSS 媒体查询（@media）来针对不同屏幕尺寸进行样式调整，或者直接使用响应式框架（如 Bootstrap 的移动端部分）。

  • 常用 DedeCMS 模板标签： WAP 模板中使用的标签和 PC 模板基本一致,只是调用方式和样式不同。

    • 调用栏目：

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

    • 调用文章列表：

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

    • 分页标签：

      {dede:pagelist listsize='4' listitem='index pre pageno next end '/}

  • 简化设计：

    • 去掉复杂的 JavaScript 和 Flash 动画。
    • 减少图片资源,使用小图或进行压缩。
    • 导航菜单要大而清晰,方便触摸操作。
    • 整体布局尽量单列,避免横向滚动。

如何制作你的第一个 WAP 首页

  1. 在 /templets/wap/default/ 目录下，新建一个文件，命名为 wapindex.htm。
  2. 编写基本的 HTML 结构，并加入移动端适配的 meta 标签。
  3. 使用 DedeCMS 标签调用你需要的栏目、文章、友情链接等。
  4. 编写简洁的 CSS 样式,确保在手机上看起来美观。
  5. 保存文件并上传到服务器。

第四步：设置 WAP 默认风格

如果你的 WAP 模板存放在 /templets/wap/my_wap_style/ 目录下,你需要告诉系统使用这个风格。

  1. 登录后台：进入 “系统” -> “系统基本参数”。
  2. 找到 WAP 设置：在参数列表中找到 “WAP 模板目录”。
  3. 修改目录名：将其默认值 default 修改为你的自定义文件夹名，my_wap_style。
  4. 点击保存。

第五步：设置 PC 与 WAP 之间的跳转（非常重要）

为了让用户和搜索引擎能够无缝地在 PC 端和 WAP 端之间切换,我们需要设置跳转关系。

用户端跳转

在 PC 端模板的 <head> 部分加入以下代码，用于检测用户是否为手机，并自动跳转到 WAP 站。

<script>
// 检测是否为移动设备
function browserRedirect() {
    var sUserAgent = navigator.userAgent.toLowerCase();
    var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
    var bIsIphone = sUserAgent.match(/iphone os/i) == "iphone os";
    var bIsMidp = sUserAgent.match(/midp/i) == "midp";
    var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
    var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
    var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
    var bIsAndroid = sUserAgent.match(/android/i) == "android";
    var bIsWx = sUserAgent.match(/MicroMessenger/i)=="micromessenger";
    if (bIsIpad || bIsIphone || bIsMidp || bIsUc7 || bIsUc || bIsCE || bIsWM || bIsAndroid || bIsWx) {
        // 如果是移动设备，跳转到 WAP 站
        // 请将 http://m.yourdomain.com 替换成你的 WAP 网站域名
        window.location.href = "http://m.yourdomain.com";
    }
}
browserRedirect();
</script>

注意：你需要为你的 WAP 站点准备一个独立的二级域名，m.yourdomain.com，并将其解析到你的网站根目录，然后在 WAP 站点的模板中也加入类似的反向跳转代码，以便用户可以切回 PC 站。

搜索引擎适配（推荐）

这是目前最推荐、最规范的方式，通过在 <head> 中添加 <link> 标签，告诉搜索引擎你的 PC 页和 WAP 页的对应关系。

  • 在 PC 端模板的 <head> 中添加：

    <!-- PC端告诉WAP端的地址 -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.yourdomain.com{dede:geturl runphp='yes'}@me = GetCurUrl();{/dede:geturl}" />

  • 在 WAP 端模板的 <head> 中添加：

    <!-- WAP端告诉PC端的地址 -->
<link rel="canonical" href="http://www.yourdomain.com{dede:geturl runphp='yes'}@me = GetCurUrl();{/dede:geturl}" />

这种方式更利于 SEO,避免了因跳转而可能产生的抓取问题。

第六步：测试与发布

  1. 清空缓存：在 DedeCMS 后台，进入 “系统” -> “一键更新网站” -> “更新缓存”,确保所有新设置和模板都能生效。
  2. 测试访问：
    • 使用手机浏览器访问你的 WAP 域名（如 http://m.yourdomain.com）。
    • 使用 PC 浏览器的“开发者工具”（F12）,切换到手机设备模式进行预览。
    • 检查各个页面（首页、列表页、内容页）是否正常显示，链接是否正确,图片是否加载。
  3. 检查跳转：确认从 PC 到 WAP 和从 WAP 到 PC 的跳转是否正常工作。

总结与注意事项

  • 核心是模板：DedeCMS WAP 的核心就是制作一套独立的 WAP 模板。
  • 命名规则：严格遵守 WAP 模板的命名规则（如 wapindex.htm）。
  • 移动优先设计：WAP 模板要简洁、快速、易于触摸。
  • 域名与跳转：强烈建议为 WAP 站设置独立域名，并做好 PC/WAP 之间的双向跳转或 rel="alternate/canonical" 声明。
  • 安全与维护：和 PC 站一样，保持 WAP 功能和模板的更新,注意安全防护。

遵循以上步骤，你就可以成功为你的 DedeCMS 网站打造一个功能完善、体验良好的 WAP 版本了，如果在制作过程中遇到具体问题，可以随时提出,我会尽力解答。

-- 展开阅读全文 --
头像
C语言中n=n+10是什么意思？
« 上一篇 02-13
51单片机C语言教程PDF哪里能找到？
下一篇 » 02-13

相关文章

取消
微信二维码
支付宝二维码

目录[+]