WordPress站点按城市自动跳转至对应落地页技术求助

一、将经纬度转换为城市信息 #

你已经通过前端脚本获取到访客经纬度，接下来需要把经纬度转换成具体城市。可以通过逆地理编码接口实现，以下是代码示例：

function showPosition(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  
  // 调用逆地理编码接口获取城市信息（替换为实际可用的接口）
  fetch(`https://api.example.com/reverse-geocode?lat=${lat}&lon=${lon}`)
    .then(response => response.json())
    .then(data => {
      // 假设接口返回的城市字段为`city`，根据实际接口调整
      const visitorCity = data.city;
      redirectByCity(visitorCity);
    })
    .catch(() => {
      // 接口调用失败，直接跳转到普通首页
      window.location.href = '/';
    });
}

二、根据城市执行页面跳转 #

编写跳转逻辑函数，定义特定城市与落地页的映射关系：

function redirectByCity(city) {
  // 自定义城市-落地页映射表
  const cityPageMap = {
    '北京': '/beijing-special-page/',
    '上海': '/shanghai-special-page/',
    // 按需添加更多城市及对应页面路径
  };

  // 判断当前城市是否在映射表中，执行对应跳转
  if (cityPageMap[city]) {
    window.location.href = cityPageMap[city];
  } else {
    // 非特定城市跳转到普通首页
    window.location.href = '/';
  }
}

三、完善定位异常处理 #

补充用户拒绝授权或浏览器不支持定位的处理逻辑：

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(showPosition, handleLocationError);
} else { 
  // 浏览器不支持定位，直接跳转到首页
  window.location.href = '/';
}

function handleLocationError() {
  // 用户拒绝授权或定位失败，跳转到首页
  window.location.href = '/';
}

四、在WordPress中集成代码 #

1. 登录WordPress后台，进入外观 > 主题文件编辑器
2. 找到当前主题的header.php文件，在</head>标签前插入上述完整代码（用<script>标签包裹）
3. 保存修改即可生效

注意事项 #

• 逆地理编码接口需选择稳定的服务，部分免费接口有请求次数限制，可根据需求选择或自行搭建
• 可添加Cookie缓存逻辑，将用户城市信息存储在本地，避免每次访问都请求接口
• 测试时需注意浏览器隐私设置，确保定位权限正常授予

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