WordPress 根据访客 IP 显示地区化内容

作者名:Lisa Farrell·2026-06-01

WordPress 站点常需要在文章页、产品页或落地页中按访客地区显示不同内容。通过短代码输出默认内容，再让浏览器调用 https://my.ipin.io/info ，可以实现稳定的地区化展示。

设计目标

对于“WordPress 根据访客 IP 显示地区化内容”，页面必须在 IP 请求完成前就具备可用内容。地理位置结果只用于增强：先验证数据，只影响一个明确决策，字段不完整时直接放弃使用。

请求与决策流程

WordPress 根据访客 IP 显示地区化内容: 下面的流程针对本主题设计，不再套用通用的 IP 查询清单。

  1. 步骤 1: PHP 先输出完整默认正文，JavaScript 只替换较小的地区提示。 shortcode fallback HTML
  2. 步骤 2: 每个 shortcode 生成唯一 DOM id，脚本在页面中只初始化一次。 wp_unique_id + static guard
  3. 步骤 3: 读取 JSON 前检查 response.ok，并用 AbortController 设置超时。 2.5s timeout
  4. 步骤 4: 只接受两位国家代码，并且仅在当前浏览器会话中缓存。 sessionStorage
  5. 步骤 5: 触发自定义事件，分别统计正常地区结果和回退状态。 ipin:geo-content

面向生产环境的示例

WordPress 根据访客 IP 显示地区化内容: 示例加入了超时、响应校验、确定性的回退方案，以及该框架特有的生命周期处理。

<?php
function ipin_geo_content_shortcode(): string {
    $id = wp_unique_id('ipin-geo-');
    $default = 'Support is available through our global help center.';
    return sprintf(
        '<aside id="%s" class="ipin-geo-note" data-default="%s">%s</aside>',
        esc_attr($id), esc_attr($default), esc_html($default)
    );
}
add_shortcode('geo_content', 'ipin_geo_content_shortcode');

function ipin_geo_content_assets(): void {
    wp_register_script('ipin-geo-content', '', [], null, true);
    wp_enqueue_script('ipin-geo-content');
    wp_add_inline_script('ipin-geo-content', <<<'JS'
(() => {
  if (window.__ipinGeoContentLoaded) return;
  window.__ipinGeoContentLoaded = true;
  const copy = {
    JP: 'Japan support: weekdays 09:00–18:00 JST.',
    DE: 'EU support: weekdays 09:00–17:00 CET.',
    US: 'US support: weekdays 09:00–17:00 ET.'
  };
  async function country() {
    const cached = sessionStorage.getItem('ipin_country');
    if (/^[A-Z]{2}$/.test(cached || '')) return cached;
    const controller = new AbortController();
    const timer = setTimeout(() => controller.abort(), 2500);
    try {
      const response = await fetch('https://my.ipin.io/info', {
        headers: {Accept: 'application/json'}, signal: controller.signal
      });
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();
      const value = String(data.country || '').toUpperCase();
      if (!/^[A-Z]{2}$/.test(value)) throw new Error('invalid country');
      sessionStorage.setItem('ipin_country', value);
      return value;
    } finally { clearTimeout(timer); }
  }
  country().then(value => {
    document.querySelectorAll('.ipin-geo-note').forEach(el => {
      el.textContent = copy[value] || el.dataset.default;
      el.dispatchEvent(new CustomEvent('ipin:geo-content', {
        bubbles: true, detail: {state: copy[value] ? 'resolved' : 'fallback'}
      }));
    });
  }).catch(() => {});
})();
JS);
}
add_action('wp_enqueue_scripts', 'ipin_geo_content_assets');

测试矩阵

发布“WordPress 根据访客 IP 显示地区化内容”前，应使用模拟响应或可控的 VPN 出口逐项验证以下场景。

条件输入 / 环境预期结果
同页两个 shortcode[geo_content] 出现两次两个模块均更新；DOM id 不重复
第三方请求被拦截CSP 或隐私扩展默认帮助正文仍完整可见
接口响应过慢超过 2500 ms中止请求；保留回退内容
同一会话再次访问sessionStorage 有合法国家代码不重复发起网络请求

自动化 / 冒烟测试

// Browser console smoke test after inserting [geo_content] twice:
const boxes = [...document.querySelectorAll('.ipin-geo-note')];
console.assert(boxes.length === 2);
console.assert(new Set(boxes.map(x => x.id)).size === 2);

失败处理

WordPress 根据访客 IP 显示地区化内容: 错误需要能够在日志或开发者工具中被观察到，但不能让访客看到空白模块、失效链接或损坏的结账页面。

故障原因处理方式
CORS 拦截接口未允许当前站点来源保留默认内容并检查 CORS 响应头
缓存插件合并脚本初始化函数执行两次使用全局加载标记和唯一元素 id
国家代码异常响应值不是两位字母忽略该值，禁止插入任意内容
同意管理问题用户同意前发送统计事件仅记录界面状态或接入 consent manager

实际应用案例

“WordPress 根据访客 IP 显示地区化内容”的一个真实应用场景：文档站通过 shortcode 显示当地客服时间，同时为所有访客保留相同、完整且可抓取的帮助正文。

上线注意事项

WordPress 根据访客 IP 显示地区化内容: 默认 HTML 必须完整；不要把 IP 位置当作用户身份，也不要把浏览器端地理结果当作权限判断依据。

结论

“WordPress 根据访客 IP 显示地区化内容”现在拥有独立的实现路径、测试证据和回退逻辑，不再复用同一套文章模板。