如何为Elementor Pro+EasyWP网站编写脚本替换移动端重定向旧插件

问题根源 #

你遇到的问题确实是旧插件依赖过时的用户代理（UA）检测逻辑导致的——新款移动端设备的UA字符串普遍会模拟桌面浏览器标识，或者格式更新，旧插件的规则无法匹配，反而老设备的UA还在旧规则范围内，才出现了反向生效的情况。

下面提供两种可靠的替代方案，优先推荐后端方案（更稳定），前端方案适合快速部署：

方案1：WordPress后端PHP重定向（推荐） #

直接在主题的functions.php（建议用子主题，避免主题更新丢失代码）中添加以下代码，通过PHP检测设备类型并执行重定向，不受前端脚本禁用或UA伪装影响：

function mobile_redirect() {
    // 避免循环重定向：如果当前已经是移动端站点，跳过
    if (strpos($_SERVER['HTTP_HOST'], 'm.yourdomain.com') !== false) {
        return;
    }

    // 检测移动端设备：结合UA特征和HTTP_X_WAP_PROFILE等头信息
    $is_mobile = false;
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    
    // 常见移动端UA关键词
    $mobile_keywords = array('android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone', 'opera mini', 'mobile', 'palm', 'symbian');
    foreach ($mobile_keywords as $keyword) {
        if (stripos($user_agent, $keyword) !== false) {
            $is_mobile = true;
            break;
        }
    }
    
    // 补充检测WAP头信息
    if (isset($_SERVER['HTTP_X_WAP_PROFILE']) || isset($_SERVER['HTTP_PROFILE'])) {
        $is_mobile = true;
    }

    // 如果是移动端，重定向到你的移动端站点
    if ($is_mobile) {
        wp_redirect('https://m.yourdomain.com' . $_SERVER['REQUEST_URI'], 302);
        exit;
    }
}
// 钩子到模板加载前执行
add_action('template_redirect', 'mobile_redirect');

额外优化：添加桌面版切换功能 #

如果需要让用户手动切换回桌面版，可以添加cookie判断：

function mobile_redirect() {
    // 检查是否有强制桌面版的cookie
    if (isset($_COOKIE['force_desktop']) && $_COOKIE['force_desktop'] == 'true') {
        return;
    }

    // 其余检测逻辑同上...
}

// 添加切换到桌面版的函数
function set_force_desktop_cookie() {
    if (isset($_GET['force_desktop']) && $_GET['force_desktop'] == '1') {
        setcookie('force_desktop', 'true', time() + 3600*24*7, '/'); // 有效期7天
        wp_redirect($_SERVER['HTTP_REFERER'] ?: home_url(), 302);
        exit;
    }
}
add_action('init', 'set_force_desktop_cookie');

然后在移动端站点添加切换链接：<a href="https://yourdomain.com?force_desktop=1">返回桌面版</a>

方案2：前端JavaScript重定向（快速部署） #

如果不想修改PHP代码，可以直接在Elementor的「自定义代码」中添加一段前端脚本（选择「页脚」位置加载），基于视口宽度检测（比UA更可靠）：

// 避免循环重定向
if (window.location.host.includes('m.yourdomain.com')) {
    return;
}

// 设置触发重定向的视口宽度阈值（比如768px，可根据需求调整）
const mobileBreakpoint = 768;

// 检测视口宽度，同时辅助UA验证避免误判
function isMobile() {
    return window.innerWidth <= mobileBreakpoint || 
           /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// 执行重定向
if (isMobile()) {
    // 保留当前页面路径，让用户跳转到对应移动端页面
    window.location.href = 'https://m.yourdomain.com' + window.location.pathname + window.location.search;
}

注意事项 #

1. 缓存处理：EasyWP默认开启缓存，需要在缓存设置中排除重定向逻辑相关的页面，或者清除缓存后测试；
2. 测试验证：用多款新款手机（比如iPhone 15、Galaxy S24等）测试，同时检查桌面端不会被误重定向；
3. 状态码选择：临时重定向用302，确认稳定后可以改成永久重定向301（适合SEO）。

内容的提问来源于stack exchange，提问作者Moist