PHPCMS V9 搭建 WAP 手機網站完整教學：裝置偵測、模板分離、動態連結

PHPCMS V9 搭建 WAP 手機網站完整教學：裝置偵測、模板分離、動態連結

PHPCMS V9 內建模板系統，透過自訂函式偵測行動裝置、載入獨立手機版模板目錄、調整連結為動態模式，即可低成本建立 WAP 站點。本文提供完整實作步驟、程式碼與避坑指南。

步驟 1：建立裝置偵測函式

編輯 phpcms/libs/functions/extention.func.php：

<?php
/**
 * 判斷是否為行動裝置存取
 * @return bool
 */
function is_mobile() {
    // 1. Proxy/透明代理特徵
    if (isset($_SERVER['HTTP_VIA']) ||
        isset($_SERVER['HTTP_X_NOKIA_CONNECTION_MODE']) ||
        isset($_SERVER['HTTP_X_UP_CALLING_LINE_ID'])) {
        return true;
    }

    // 2. Accept 標頭包含 WML
    if (stripos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) {
        return true;
    }

    // 3. User-Agent 關鍵字比對
    $ua = isset($_SERVER['HTTP_USER_AGENT']) ? strtolower($_SERVER['HTTP_USER_AGENT']) : '';
    if (empty($ua)) return true; // 無 UA 視為行動裝置

    // 排除平板 (iPad 等)
    if (stripos($ua, 'ipad') !== false) return false;

    $mobileKeywords = [
        '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',
        'opera mobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile'
    ];

    foreach ($mobileKeywords as $keyword) {
        if (stripos($ua, $keyword) !== false) return true;
    }

    return false;
}

步驟 2：建立手機版模板目錄

phpcms/templates/
├── default/          # PC 版模板 (原有)
│   ├── content/
│   ├── index.php
│   └── ...
└── mobile/           # 新增：手機版模板目錄
    ├── content/
    │   ├── index.html      # 列表頁
    │   ├── show.html       # 內容頁
    │   └── category.html   # 欄目頁
    ├── index.php           # 入口 (可選)
    └── header.html / footer.html

命名規則：手機版模板檔名 必須與 PC 版完全一致，系統才能自動對應切換。

步驟 3：修改模組入口控制器載入邏輯

編輯 phpcms/modules/content/index.php (或其他模組控制器)：

<?php
// 原始碼區塊：載入模板
// 修改為條件載入
$template = 'default_template_name'; // 原有邏輯取得的模板名

if (is_mobile()) {
    // 載入 mobile 目錄下的同名模板
    include template('mobile', $template);
} else {
    // 載入預設 default 目錄
    include template('content', $template);
}

需分別修改三個動作方法：

• index() - 列表頁 → template('mobile', 'list')
• category() - 欄目頁 → template('mobile', 'category')
• show() - 內容頁 → template('mobile', 'show')

步驟 4：調整前端連結為動態模式

手機版建議不生成靜態頁，改用動態連結避免快取問題：

<!-- 列表頁連結 -->
<a href="index.php?m=content&c=index&a=show&catid={$catid}&id={$id}">{$title}</a>

<!-- 分頁連結 -->
<a href="index.php?m=content&c=index&a=lists&catid={$catid}&page={$page}">下一頁</a>

步驟 5：手機版模板撰寫重點 (mobile/content/show.html)

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>{$title} - {$SEO['site_title']}</title>
<link rel="stylesheet" href="{$CSS_PATH}mobile.css">
</head><body>
<header><h1>{$title}</h1></header>
<article>
    <time>{$inputtime}</time>
    {$content}
</article>
<footer>
    <a href="index.php?m=content&c=index&a=lists&catid={$catid}">返回列表</a>
</footer>
</body></html>

關鍵 CSS 重置 (mobile.css)

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-size:16px; line-height:1.6; margin:0; padding:10px; word-wrap:break-word; }
img, video { max-width:100%; height:auto; display:block; }
a { -webkit-tap-highlight-color:rgba(0,0,0,0); text-decoration:none; color:#0066cc; }
header, footer, article, section { display:block; }

常見問題與解決方案

進階優化建議

1. 獨立子網域：m.example.com 指向同一代碼，Nginx 判斷 $host 設定變數，模板邏輯讀取變數而非 is_mobile()，利於 SEO 與快取。
2. 響應式設計替代：現代專案優先考慮 RWD (Bootstrap/Tailwind)，單一模板配合 CSS Media Query，維護成本更低。
3. API + SPA 架構：後端僅提供 JSON API，前端用 Vue/React 構建 PWA，徹底分離。
4. 快取策略：手機版頁面啟用片段快取，減少資料庫查詢。