Hiển thị nội dung theo IP người truy cập trong WordPress

Tác giả:Lisa Farrell·2026-06-01

Website WordPress thường cần hiển thị nội dung khác nhau trong bài viết, trang sản phẩm hoặc landing page theo khu vực người truy cập. Shortcode xuất nội dung mặc định rồi trình duyệt gọi https://my.ipin.io/info .

Mục tiêu thiết kế

Với “Hiển thị nội dung theo IP người truy cập trong WordPress”, trang phải hữu ích ngay cả trước khi request IP hoàn tất. Kết quả vị trí chỉ là lớp tăng cường: dữ liệu được kiểm tra, chỉ tác động đến một quyết định giới hạn và bị bỏ qua nếu thiếu trường.

Luồng request và quyết định

Hiển thị nội dung theo IP người truy cập trong WordPress: Luồng dưới đây được thiết kế riêng cho cách triển khai này, không lặp lại checklist tra cứu IP chung.

  1. Bước 1 — Trạng thái mặc định: shortcode fallback HTML
  2. Bước 2 — Request: wp_unique_id + static guard
  3. Bước 3 — Kiểm tra: 2.5s timeout
  4. Bước 4 — Quyết định: sessionStorage
  5. Bước 5 — Dự phòng: ipin:geo-content

Ví dụ hướng đến production

Hiển thị nội dung theo IP người truy cập trong WordPress: Ví dụ bổ sung timeout, kiểm tra response, phương án dự phòng xác định và xử lý vòng đời phù hợp với framework.

<?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');

Ma trận kiểm thử

Trước khi xuất bản “Hiển thị nội dung theo IP người truy cập trong WordPress”, hãy chạy các trường hợp sau bằng response giả lập hoặc điểm thoát VPN có kiểm soát.

Điều kiệnĐầu vào / thiết lậpKết quả mong đợi
T1[geo_content] × 22 unique DOM id; fetch × 1
T2CSP blockdefault HTML
T3latency > 2500 msAbortController; fallback
T4sessionStorage=JPfetch × 0

Kiểm thử tự động / smoke test

// 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);

Xử lý lỗi

Hiển thị nội dung theo IP người truy cập trong WordPress: Lỗi cần xuất hiện trong log hoặc công cụ dành cho nhà phát triển, nhưng không được để lại module trống hay làm hỏng trang thanh toán.

LỗiNguyên nhânCách xử lý
CORSOrigin headerdefault HTML
script merged × 2cache pluginglobal loaded flag
country invalidschemaignore value
consent=falseanalytics eventUI state only

Tình huống thực tế

Một tình huống thực tế cho “Hiển thị nội dung theo IP người truy cập trong WordPress”: website tài liệu hiển thị giờ hỗ trợ địa phương bằng shortcode nhưng vẫn giữ nguyên nội dung trợ giúp đầy đủ và có thể crawl cho mọi người.

Lưu ý khi triển khai

Hiển thị nội dung theo IP người truy cập trong WordPress: Giữ HTML mặc định đầy đủ. Vị trí IP không chứng minh danh tính và kết quả phía trình duyệt không được dùng để kiểm soát quyền.

Kết luận

“Hiển thị nội dung theo IP người truy cập trong WordPress” hiện có luồng triển khai, bằng chứng kiểm thử và hành vi dự phòng riêng thay vì dùng chung một mẫu bài viết.