Los sitios WordPress suelen necesitar contenidos distintos en entradas, productos o landing pages según la región del visitante. Un shortcode puede mostrar contenido predeterminado y llamar https://my.ipin.io/info desde el navegador.
Explicación de la API
Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.
{"ip":"185.220.236.7","country":"TW","region":"Taiwan","city":"Taipei"}Casos de uso
Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.
- Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.
- Mostrar contenido geolocalizado por IP en WordPress
- Explicación de la API
- Recomendaciones SEO y UX
Lógica de implementación
Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
- Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
- Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.
- Todos los ejemplos siguientes usan directamente
https://my.ipin.io/info, con comentarios y textos de interfaz localizados. - El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.
Ejemplo de código
Todos los ejemplos siguientes usan directamente https://my.ipin.io/info, con comentarios y textos de interfaz localizados.
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">Bienvenido. Este es el contenido predeterminado.</div>
<script>
(async function () {
const el = document.getElementById("<?php echo esc_js($box_id); ?>");
const defaultText = "Bienvenido. Este es el contenido predeterminado.";
const contentMap = { TW: "Contenido para visitantes de Taiwán", US: "Contenido para visitantes de Estados Unidos", JP: "Contenido para visitantes de Japón" };
try {
// Llamada del navegador a /info: detecta la IP del visitante.
const info = await fetch("https://my.ipin.io/info").then(res => res.json());
el.textContent = contentMap[info.country] || defaultText;
} catch (e) {
// Mantener el valor predeterminado si falla la solicitud API.
el.textContent = defaultText;
}
})();
</script>
<?php
return ob_get_clean();
}
add_shortcode('geo_content', 'ipin_geo_content_shortcode');Shortcode
[geo_content]Recomendaciones SEO y UX
El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.
Errores comunes
Los siguientes puntos afectan la precisión del artículo, la utilidad del código y la credibilidad de la explicación de la API.
- Los siguientes puntos afectan la precisión del artículo, la utilidad del código y la credibilidad de la explicación de la API.
- El contenido predeterminado debe seguir completo y legible, mientras el contenido regional actúa como mejora. Los buscadores rastrean contenido estable y la página sigue siendo útil si falla la API.
- Antes de implementar, identifique el solicitante: las solicitudes del servidor devuelven IP del servidor y las del navegador devuelven IP del visitante.
- Estos casos muestran el valor de la interfaz de información IP y separan claramente IP del servidor e IP del visitante.
Resumen
Una llamada del navegador comprueba la IP del visitante y devuelve su IP, país, región y ciudad. Es adecuada para mostrar contenido localizado.
Preguntas frecuentes
Las preguntas siguientes fueron redactadas específicamente para este artículo y se relacionan directamente con la implementación.