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.
Giải thích API
Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.
{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}Ngữ cảnh ứng dụng
Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.
- Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.
- Hiển thị nội dung theo IP người truy cập trong WordPress
- Giải thích API
- Khuyến nghị SEO và UX
Logic triển khai
Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.
- Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.
- Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.
- Tất cả ví dụ dưới đây dùng trực tiếp
https://my.ipin.io/info, với chú thích và nội dung giao diện đã được bản địa hóa. - Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.
Ví dụ code
Tất cả ví dụ dưới đây dùng trực tiếp https://my.ipin.io/info, với chú thích và nội dung giao diện đã được bản địa hóa.
functions.php / plugin
function ipin_geo_content_shortcode() {
$box_id = 'ipin-geo-content-' . wp_generate_uuid4();
ob_start();
?>
<div id="<?php echo esc_attr($box_id); ?>" class="ipin-geo-box">Chào mừng bạn. Đây là nội dung mặc định.</div>
<script>
(async function () {
const el = document.getElementById("<?php echo esc_js($box_id); ?>");
const defaultText = "Chào mừng bạn. Đây là nội dung mặc định.";
const contentMap = { TW: "Nội dung cho người truy cập Đài Loan", US: "Nội dung cho người truy cập Hoa Kỳ", JP: "Nội dung cho người truy cập Nhật Bản" };
try {
// Gọi /info ở trình duyệt để nhận diện IP người truy cập.
const info = await fetch("https://my.ipin.io/info").then(res => res.json());
el.textContent = contentMap[info.country] || defaultText;
} catch (e) {
// Giữ giá trị mặc định khi request API thất bại.
el.textContent = defaultText;
}
})();
</script>
<?php
return ob_get_clean();
}
add_shortcode('geo_content', 'ipin_geo_content_shortcode');Shortcode
[geo_content]Khuyến nghị SEO và UX
Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.
Lỗi thường gặp
Các vấn đề sau ảnh hưởng đến độ chính xác của bài viết, khả năng dùng code và độ tin cậy khi giải thích API.
- Các vấn đề sau ảnh hưởng đến độ chính xác của bài viết, khả năng dùng code và độ tin cậy khi giải thích API.
- Nội dung mặc định cần đầy đủ và dễ đọc, còn nội dung theo vùng là lớp tăng cường. Công cụ tìm kiếm vẫn crawl nội dung ổn định, người dùng vẫn dùng được khi API lỗi.
- Trước khi triển khai, hãy xác định bên gửi request: request từ server trả IP server, request từ trình duyệt trả IP người truy cập.
- Các ngữ cảnh này thể hiện giá trị của giao diện thông tin IP và phân biệt rõ IP server với IP người truy cập.
Tổng kết
Lệnh gọi phía trình duyệt kiểm tra IP người truy cập và trả về IP, quốc gia, khu vực, thành phố của họ. Cách này phù hợp để hiển thị nội dung theo vùng.
Câu hỏi thường gặp
Các câu hỏi dưới đây được viết riêng cho bài này và liên quan trực tiếp đến cách triển khai.