En este artículo, analizaremos cómo agregar visibilidad de contenido geográfica o dependiente del contenido en Oxygen Builder (WordPress). Usaremos uno de los mejores complementos que hemos encontrado: “Detección de IP de geolocalización”, una herramienta gratuita creada por Yellowtra.
Detección de IP de ubicación geográfica
Le permite elegir entre 1 de cada 5 fuentes de datos, ofrece una colección robusta de características de PHP y cortocodios, funciona con almacenamiento de caché y es fácil de usar para cualquier persona. Casos de uso Una vez que comprende la ubicación de un usuario, hay algunas cosas que puede hacer con ella. La visibilidad específica de la ubicación, las redireccionamientos y la personalización mejoran la experiencia y la mayor tasa de conversión. Para nosotros, hemos incluido esto en un gran sitio de WooCommerce utilizando Oxygen Builder, implementando las siguientes características:
Redirección de ciertos productos o páginas de acuerdo con la ubicación física del usuario
Mostrando un contenido particular en la página inicial para visitantes de un país en particular (varias variantes de la página inicial adaptada a la cultura/país de los visitantes)
Muestre la bandera del país de los usuarios y permita que cambien la preferencia de su país si la ubicación de IP es incorrecta (es decir, uso una VPN)
Mejores datos de ubicación en comparación con Maxmind predeterminado WoCommerce, porque hemos implementado IPSTACK, un servicio pagado
Ventanas emergentes específicas de ubicación, como el ejemplo a continuación, pero gratuito:

Una vez que comprenda el país o la ubicación del que los visitantes vienen en WordPress, hay muchos escenarios de uso.
Plugin para hacer esto: la “detección de IP de geolocalización” de Yellowtree en Yellowtree es uno de los mejores complementos de WordPress que he usado y es 100% gratuito (pero el desarrollador le pide que done a esta organización benéfica como “gracias”). Extrae los datos del país de la dirección IP de los usuarios y luego le brinda una colección de métodos para mostrar el contacto de acuerdo con el país. También puede presentar directamente el país, la ciudad, la bandera del país y muchos más (analizaremos cómo hacerlo más adelante en este artículo.5 fuentes de datos
Puede elegir entre cualquiera de las fuentes anteriores para obtener información del usuario. Algunas son API, y otros son archivos reales: los archivos siempre serán más rápidos a medida que los aloja.

Para todos nuestros proyectos, utilizamos IPSTACK (pagado), porque se actualiza constantemente, la mejor precisión y bastante barato incluso para sitios grandes. Grandes opciones

Puede agregar fácilmente un CSS específico al país cerca de la etiqueta del cuerpo en cada página. De esta manera, puede especificar el uso de la visibilidad de CSS para ciertos elementos y elementos dependiendo de la ubicación del país.

Puede deshabilitar automáticamente el almacenamiento de caché en una página que tiene una llamada API a las funciones dependientes de Geo, pero también puede permitir que AJAX rompa cualquier caché.Si hay un proxy viceversa, puede agregarlo.La implementación de todos los ejemplos presentados aquí se mencionan en el GitHub oficial.Tiene algunas formas de incorporar los datos de ubicación en su proyecto de constructor de oxígeno, los códigos cortos y las opciones de CSS son las mejores.PHP se puede incluir en un bloque de código, transformado en una condición personalizada o incorporada.El primer paso es instalar y probar el instrumento.Todo lo que tiene que hacer es descargar el complemento: no hay una configuración realmente necesaria para funcionar en la mayoría de los sitios de constructor de oxígeno.Si usa su memoria en caché (debe hacerlo), considere activar las funciones de AJAX para pasar por ella.
Códigos cortos Puede usar códigos cortos para insertar contenido directo o puede concluir elementos de oxígeno en un código corto para incluirlos en la página, dependiendo de la ubicación del usuario. Estas son todas las propiedades de los códigos cortos que puede usar. [Geoip_detect2 & nbsp; propiedad = & quot; país ” quot;] & nbsp;; lang = & quot; de & quot;] & nbsp; detect2 & nbsp; propiedad & nbsp; ; País.isocode & quot;] & nbsp;-& gt; & nbsp; de [geoip_detect2 & nbsp; propedy = & quot; ciudad & quot;] & nbsp;-& gt ;; frankfurt/main [geoip_detect2 & nbsp; propedia = & quot; ciudad & quot; & quot; & nbsp; & nbsp; & nbsp; ; Hesse [geoip_detect2 & nbsp; prop; = & quot; MostspecificSubdivision.isocode & quot;] & nbsp;-& gt; hen [geoip_detect2 & nbsp; prop; ;; ” & quot; 2 & quot ;; & quot; .latitude & quot;] & nbsp;-& gt; & nbsp; 48.9296 [geoip_detect2 & nbsp; prop; proyecto = quot; ubicación.timzone & quot;] & nbsp;-& gt; & nbsp; & nbsp; europa; europa; /Berlín [geoip_detect2 & nbsp; propedy = & quot; continente; & quot; & nbsp; & quot; & nbsp; & quot; ;
Europa [geoip_detect2 & nbsp; propiedad = & quot; continente.code & quot;] & nbsp;-& gt; fallar = & quot; value & nbsp; default & quot;] & nbsp; -& gt; & nbsp; valor & nbsp; predeterminado también hay códigos cortos para elegir manualmente el país -[geoip_detect2_countries & nbsp; name = & quot; mycountry;; & nbsp; tel = & quot; verdadero “puede elegir almacenar estos datos en el navegador para usarlos más tarde.
Wrapper de código corto de oxígeno + YellowTree = Visibilidad condicional Aunque puede usar códigos cortos para recopilar configuraciones de país precisas, permitir al usuario establecer esto y mostrar cosas como la ciudad, el país y otros, empacar elementos en oxígeno con códigos cortos especiales es donde el lugar usted es el lugar usted puede desbloquear seriamente la potencia de este complemento.
Supongamos que quiero mostrar una sección a alguien que accede a mi sitio de EE. UU. Y otra sección a mis clientes internacionales. Haga 2 secciones y colóquelas en el envasado de código corto. Luego agregue los siguientes códigos cortos a los elementos:

//Pentru secțiunea națională SC wrapper [geoip_detect2_show_if country=”US”][/geoip_detect2_show_if] //Pentru secțiunea internațională SC wrapper [geoip_detect2_show_if not_country=”US”][/geoip_detect2_show_if country=”US”][/geoip_detect2_show_if] _detect2_oip] _dect2_oip ] _Dect2_iip] /geoip_detect2_hide_if]

Esto ahora mostrará una sección si EE. UU. Es el país que IP ha identificado, y el otro, si no es un visitante de EE. UU. Puede concluir casi cualquier cosa en códigos cortos, por lo que esta es una manera fácil de adaptar el contenido para sus visitantes internacionales. El contenido específico de los EE. UU. Simplemente no está incluido en la página. También puede especificar dependiendo de la zona horaria y/o ciudades. También puede hacerlo y, así que muestre una sección a las personas en Alemania y Austria. Si elige agregar a través de Gutenberg o usar do_shortcode, puede desbloquear funciones más fuertes que no sean aceptadas por el paquete de código ShortGen Short. [Geoip_detect2_show_if & nbsp; city = & quot; berlin & quot;] te & nbsp; in & nbsp; berlin [else] no & nbsp; no & nbsp; berlin [/geoip_detect2_detect2] _ esto podría ser un/de otro tipo para el texto ordinario , o elementos para HTML para compartir.
CSS utilizando la clase personalizada agregada al cuerpo de cada página y la propiedad de visualización de CSS: podemos mostrar y ocultar las cosas fácilmente. En la demostración a continuación, nuestro visitante accede al sitio de EE. UU.

Debido al increíble sistema de clase de oxígeno, esta es una muy buena opción para visualizar/ocultar rápidamente dependiendo de la ubicación. Así es como funciona el verdadero CSS: .geoip {Display: Ninguno! IMPORTANTE; . . } .Geoip-hide {display: block! Importante; . . } El ejemplo anterior habría agregado a su sitio utilizando una hoja de estilo universal o parcial. & Lt; div & nbsp; class = & quot; geoip; This & nbsp; text & nbsp; is & nbsp; display & nbsp; solo & nbsp; in & nbsp; alemania & lt;/div & gt; & lt; div & nbsp; class = & quot; geoip-find & nbsp; geoip-hyide-of & quot; & gt; This & nbsp; text & nbsp; is & nbsp; Hidden & nbsp; solo & nbsp; in & nbsp; Alemania & lt;/div & gt; Las siguientes clases se agregarían a elementos en oxígeno. El primer elemento solo se vería en Alemania. El segundo solo estaría oculto en Alemania.


Suponiendo que haya agregado estilos CSS al primer bloque de código en el sitio, este elemento se ocultaría usando la pantalla: ninguno si el país fuera Alemania.Cambiar los códigos del país le permitirá estilarse, por ejemplo,. Geoip-Consrcy-UK {} se dirigirá al Reino Unido.Para apuntar a los EE. UU., Cambiarlo para que sea .geoip-Centry-US {} no es solo una visibilidad de los elementos, sino que es CSS, puede aplicar todos los diferentes tipos de estilos dependiendo de la ubicación.Por ejemplo, puede hacer el texto verde si alguien proviene del Reino Unido de la siguiente manera: .Geoip-Center-UK #Element {Color: Green;} PHP El complemento ofrece 5 funciones (que es lo que usan los códigos cortos y CSS en el backend): Geoip_detect2_get_info_from_ipgeoip_detect2_get_info_from_current
Geoip_detect2_get_reader

Geoip_detect2_get_current_source_description
Geoip_detect2_get_external_ip_adress

Geoip_detect2_get_client_ip Hay muchas cosas que puede construir utilizando datos de ubicación. Un ejemplo de GitHub es calcular la distancia de su empresa al usuario (que se puede usar, a su vez, para mostrar el tiempo de conducción/caminar). & lt; ?? & nbsp; ; [DEG & NBSP; * & nbsp; @ Palm & nbsp; latitud y nbsp; de & nbsp; Point & nbsp; in & nbsp; [Deg & nbsp] & nbsp; * & nbsp; @ param & nbsp; Flotante y nbsp; $ Longitude & nbsp; ; Target & nbsp; in & nbsp; [DEG & NBSP; @ param & nbsp; @ floatradius & nbsp; medio y nbsp; radio y nbsp; in & nbsp; [km] & nbsp; @ return & nbsp; Flotante y nbsp; Distancia y nbsp; entre & nbsp; puntos & nbsp; in & nbsp; [km] & nbsp; (así como & nbsp; Earthradius) & nbsp; nSpreAspt; & nbsp; nbsp; function & nbsp; & nbsp; $ longiteFrom, & nbsp ;; = & nbsp; deg2rad ($ latitudeFrom); & nbsp; & nbsp; & nbsp; & nbsp; $ latto & nbsp; = & nbsp; deg2rad ($ latitudeto); & nbsp; & nbsp; & nbsp; &
nbsp; $ latdelta & nbsp; = & nbsp; $ latto & nbsp;-& nbsp; $ latfrom; & nbsp; & nbsp; $ londelta & nbsp; = & nbsp; $ lonto & nbsp;-& nbsp; $ lonfrom; & nbsp; & nbsp; $ ángulo & nbsp; = & nbssp;; & nbsp; & nbsp; latfrom) & nbsp;*& nbsp; cos ($ latto) & nbsp;*& nbsp; pow (sin ($ londlaya & nbsp;/& nbsp; 2), & nbsp; 2)); & nbsp; & nbsp; return & nbsp; $ angle & nbsp;*& nbsp; $ Earthradius; } // & nbsp; Los & nbsp; Angeles $ Ubicación [& apos; Lat & apos;] & nbsp; = & nbsp; 37.6293; $ ubicación [& apos; lon & apos;] & nbsp; = & nbsp; -122.1163; $ mylocation & nbsp; = & nbsp; $ ubicación; & nbsp; // & nbsp; change & nbsp; if & nbsp; default & nbsp; ubicación & nbsp; debería ser & nbsp; something & nbsp; else & nbsp; else $ registro = _dept; __ 2_ipt; _2; if & nbsp; ($ registro- & gt; ubicación- & gt; longitude) & nbsp; {& nbsp; & nbsp; & nbsp; & nbsp; $ mylocation [& apos; lat & apos;] & nbsp; = & nbsp; $ registro- & gt; ubicación- & gt; latitude; & nbsp; & nbsp; } $ Distancia & nbsp; = & nbsp; HaversinegretCorcletance ($ ubicación [& apos;], & nbsp; $ ubicación [& apos; lon & apos;], & nbsp;;]); & nbsp; // & nbsp; devoluciones & nbsp; distancia & nbsp; in & nbsp; km.
Lo fuerte en esta herramienta es que, con las funciones que ofrece una comprensión básica de PHP, puede incorporar casi cualquier relación/uso de la ubicación en un sitio de WordPress. Este código se instalará en nuestro sitio utilizando el organizador de scripts (revise aquí). Con las funciones de PHP ofrecidas, la construcción de condiciones nativas de oxígeno debería ser bastante fácil. De esta manera, puede usar condiciones para cualquier artículo y no necesita usar el paquete de código corto breve poco limitado. Probar la única forma de probar esto con precisión es usar una VPN para “fingir” su ubicación o una herramienta de prueba como Lambdatest. Usamos NordVPN para todas estas pruebas. Es barato y bien construido. Recuerde que este complemento tiene un caché para los datos de ubicación, que puede interferir con las pruebas si no lo elimina. Conclusión con casi todo lo discutido, suponga que no está de acuerdo con el GDPR.
Guithub Guide, sin embargo, hay orientación sobre GitHub, por lo que puede trabajar. Esperamos que este sea un artículo útil que le mostró algunas formas en que puede mostrar información específica en la ubicación en Oxygen Builder. Utiliza códigos cortos o CSS y complemento de detección de ubicación geográfica. Esto no debe usarse para construir un sitio web multilingüe, pero es una forma increíble de adaptar el contenido de acuerdo con los países, como mostrar los precios y la moneda correctos, mostrando ventanas pop -up que dicen “Vemos que usted es de {país } “y muchos más.


Visibilidad geográfica en oxígeno constructor
Tags Visibilidad geo
homefinance blog