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.
- Bước 1 — Trạng thái mặc định:
shortcode fallback HTML - Bước 2 — Request:
wp_unique_id + static guard - Bước 3 — Kiểm tra:
2.5s timeout - Bước 4 — Quyết định:
sessionStorage - 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ập | Kết quả mong đợi |
|---|---|---|
| T1 | [geo_content] × 2 | 2 unique DOM id; fetch × 1 |
| T2 | CSP block | default HTML |
| T3 | latency > 2500 ms | AbortController; fallback |
| T4 | sessionStorage=JP | fetch × 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ỗi | Nguyên nhân | Cách xử lý |
|---|---|---|
| CORS | Origin header | default HTML |
| script merged × 2 | cache plugin | global loaded flag |
| country invalid | schema | ignore value |
| consent=false | analytics event | UI 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.