7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Cómo hacer sitios web diferentes según ubicación geográfica con WordPress

Scroll to top
Read Time: 19 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Introducción a los sitios WordPress Geolocalizados

Para lanzar una red de sitios a nivel global de forma económica gestionada por voluntarios que proporcionen a los clientes directorios categorizados de tiendas físicas locales, necesitaba hacer algunas modificaciones en WordPress para aprovechar todo su poder. Existen varios enfoques para proporcionar experiencias locales con WordPress. En este tutorial voy a mostrarte por qué y cómo decidimos crear una solución personalizada.

En Julio, lancé una guía global basada en internet para ofrecer alternativas a las compras en Amazon llamada FleetheJungle.com y la acogida fue excelente. Recibimos mucha atención en los medios y en consecuencia bastante tráfico hacia nuestro sitio web. No se trata de un app basada en bases de datos; en lugar de eso aprovechamos el increíble tema KnowHow Knowledge base:

The Flee the Jungle Global Home Page - Amazon AlternativesThe Flee the Jungle Global Home Page - Amazon AlternativesThe Flee the Jungle Global Home Page - Amazon Alternatives

Pero para conseguir escalar el sitio necesitábamos ofrecer versiones localizadas para cada ciudad concreta. Ciertamente, el sitio web global anima a que los usuarios cancelen su suscripción prime de Amazon o encuentren alternativas a los libros de Kindle, pero no existía nada que animase a la gente a apoyar el comercio local de su localidad o ciudad.

Para empezar, creamos una guía local para los clientes cerca de Portland, una ciudad orgullosa de sus pequeños negocios independientes, históricos o peculiares.

Fun Portland Map from Edward JuanFun Portland Map from Edward JuanFun Portland Map from Edward Juan
Créditos: Forest and Waves Portland Map de Edward Juan.

El reto técnico

Ciertamente, he escrito bastante sobre cómo lanzar rápidamente un montón de sitios web con WordPress usando recetas pre-optimizadas y pre-configuradas, pero mantener los requerimientos relacionados puede consumir un tiempo realmente considerable—cosas como gestionar el SEO, las actualizaciones de WordPress y de los plugins, etc.

He valorado la posibilidad de usar un multisitio WordPress, pero aunque ha crecido mucho, tuvimos una serie de desagradables dificultades para acoplarlo a las necesidades de nuestro proyecto, probablemente no estaban destinados a funcionar juntos. Una vez te has involucrado con un multisitio, es muy complicado 

Necesitaba una solución más simple.

En este tutorial, te guiaré a través de las modificaciones y los trucos que usé en WordPress y en mi tema para lanzar nuestro directorio de tiendas de Portland y facilitar la creación posterior de directorios para cualquier otra ciudad—mientras al mismo tiempo evitamos los quebraderos de cabeza que supondría la gestión de docenas o cientos de sitios web.

Requisitos de la red geolocalizada

Aquí tienes algunos de los requisitos básicos para lanzar más sitios:

1. Mantener un sitio web global Quería mantener el primer dominio fleethejungle.com intacto, libre de artículos dirigidos a un público local pero que al mismo tiempo contuviese un listado de las ciudades cubiertas en el sitio.

2. Localización mediante subdominios Quería organizar el contenido localizado usando subdominios. Por ejemplo, una visita a http://portland.fleethejungle.com promocionaría contenido local en el sitio pero también reutilizaríamos algunas categorías del sitio global relacionadas con las compras en internet en general (por ej. vídeo streaming (no existía una alternativa a HBO para Portland en exclusiva). CraigsList proporciona un excelente modelo de este tipo de estructura.

3. Integración entre lo local y lo global. Quería proporcionar a los usuarios locales una explicación de las diferencias entre su sitio local y el sitio global y al mismo tiempo animarles a participar en la mejora del directorio de su respectiva ciudad.

4. Gestión por parte de los voluntarios Quería que resultase fácil añadir regularmente ciudades al sitio de forma que solo hiciesen falta voluntarios con conocimientos básicos sobre la gestión de un blog para hacerlo y mantenerlo. Existen demasiados requisitos para lanzar un nuevo sitio WordPress para cada ciudad individual como para que los voluntarios se puedan encargar de ello.

5. Mantenimiento mínimo. Por último, quería que el mantenimiento de la red de sitios fuese tan sencillo como lo es la gestión de un único sitio.

Exploremos algunos de los enfoques técnicos que se usan habitualmente para solucionar este tipo de requisitos.

Enfoques técnicos

Para la gestión del contenido, pensé en tres enfoques básicos:

  1. Usar distintas instalaciones WordPress.
  2. Usar un multisitio WordPress para gestionar varios sitios.
  3. Personalizar WordPress para filtrar dinámicamente el contenido basándonos en la ubicación del usuario.

Como mencioné antes, no soy un fan de los multisitios y quería evitar la complejidad de lanzar y mantener distintos sitios WordPress que implicaba esta solución. Un sitio como Flee the Jungle tendría contenido principal que necesitaría ser reutilizado a lo largo de las páginas de las ciudades (por ejemplo "cómo cancelar tu suscripción prime"), y no quería tener que mantener este contenido a lo largo de distintas instalaciones WordPress—o escribir código para lograrlo.

Decidí filtrar el contenido dependiendo del dominio o el subdominio empleado por el usuario en el navegador.

Si has leído mi tutorial Cómo usar los mapas de barrio de Zillow y la geolocalización HTML5, ya sabrás cómo usar la geolocalización HTML5 basada en el navegador para determinar cuál es la ubicación de un usuario. Sin embargo, quería dar mayor control al usuario.

Quería que el usuario usase un subdominio como el que ha funcionado durante años en CraigsList para guiarles hacia su respectiva ciudad (un listado de ciudades).

The Craigslist Global Network by Sub-domainThe Craigslist Global Network by Sub-domainThe Craigslist Global Network by Sub-domain

Pero la forma que tiene WordPress para gestionar las URLs absolutas hace que sea complicado conseguirlo. Cuando empecé a experimentar con el seguimiento de los subdominios de una ciudad y su mapeado para convertirlos en enlaces hacia la respectiva página, falle debido al hábito que tiene WordPress de crear enlaces absolutos en prácticamente todos los lugares. Hablé de ello con un colega y rompió a reír en cuanto le pregunté—es un enemigo común de los que desarrollamos con WordPress.

En este tutorial explicaré las personalizaciones que llevamos a cabo dentro de las consultas PHP de nuestro tema para construir los sitios de cada ciudad y cómo resolvimos finalmente el problema de las URLs absolutas.

Modificar WordPress para la geolocalización

Aquí tienes cómo decidí implementar sitios basados en ciudades para Flee the Jungle que fuesen fácilmente mantenibles y cuyos autores fuesen blogueros locales sin habilidades técnicas especiales.

Aprovechar el etiquetado para los subdominios

Los artículos escritos para las ciudades serían etiquetados con el nombre de la correspondiente ciudad, por ej. "portland". Los artículos para el sitio web global serían etiquetados con "worldwide". Quería poder incluir artículos dirigidos a una audiencia global sobre tiendas basadas en internet para ciertas categorías en las que haya menos soporte local como pueda ser el streaming de vídeo. Otras categorías serán ciertamente más apropiadas para centrarse exclusivamente en tiendas locales como tiendas de comestibles, tiendas de automoción y tiendas de juguetes.

La página de inicio geolocalizada de cada ciudad

En los sitios locales geolocalizados, mantendremos las categorías globales y sólo mostraremos artículos distintos para las categorías locales adecuadas. En el futuro, añadiremos artículos dirigidos a una audiencia global a las opciones locales dentro de una categoría cuando parezca apropiado.

Cuando las visitas vean páginas de categoría y realicen búsquedas, también filtraremos y personalizaremos los resultados basándonos en estas opciones de diseño y estructura.

Variables definidas

Para conseguirlo, definimos cadenas (arrays) dentro del tema usando los IDs correspondientes.

  • Listado de las categorías globales.
  • Listado de las categorías para las ciudades locales.
  • Listado de las ciudades del directorio y los prefijos de sus subdominios.

Aquí tienes algunos ejemplos. Primero, aquí tienes mi la cadena con los IDs de las categorías globales (no las locales):

Puedes obtenerlos consultando los IDs de cada categoría en el listado de categorías del escritorio (sitúa el ratón sobre el título de la categoría como mostramos más abajo con las etiquetas):

Flee the Jungle Category ListFlee the Jungle Category ListFlee the Jungle Category List

O, edita la categoría y copia el ID de la URL (el ID de la categoría Getting Started es 29):

Flee the Jungle Category Editing to Get IDFlee the Jungle Category Editing to Get IDFlee the Jungle Category Editing to Get ID

Aquí tienes los IDs de la etiqueta Seattle y Portland:

Seattle tiene el ID 49. Puedes ver el id de la etiqueta colocando el puntero sobre la ciudad para que la barra de estado lo muestre:

Flee the Jungle Reveal City Tag IDFlee the Jungle Reveal City Tag IDFlee the Jungle Reveal City Tag ID

Usar el subdominio para geolocalizar

Para obtener el dominio o el subdominio, usé el truco para WordPress de Trevor Scott y lo coloqué dentro del archivo functions.php de mi tema.

Aquí tienes el editor del tema del escritorio de WordPress:

WordPress Theme EditingWordPress Theme EditingWordPress Theme Editing

Y aquí el código de Trevor:

Página de inicio global

Cuando las visitas lleguen a la página de inicio global, el dominio será fleethejungle.com en lugar de un subdominio. He creado otra función, configure_geolocal(), que es invocada al principio del archivo de plantilla header.php. Aquí tienes la primera parte de la función:

Aquí tienes cómo es invocada por get_header() dentro del header del tema:

Cuando el dominio es global, $domain_locale será falso. Bajo estas circunstancias, excluiré los artículos locales que están etiquetados con el nombre de una ciudad. Y lo haré en la página de inicio y en la página de categorías. Cuando el dominio haga referencia a una ciudad, $domain_locale representará en prefijo, por ej. seattle o portland.

En la página de inicio del tema, si el usuario está en el sitio global (dominio raíz), excluyo los artículos etiquetados con nombres de ciudades en la cadena $st_cat_post_args. Sin embargo, si el usuario está en la página de una ciudad y conocemos el subdominio, sólo se muestran artículos locales en casi todas las categorías, y no mostramos aquellas identificadas en nonlocal_category_ids—aquellas que son más apropiadas para contenido no local como la categoría de vídeo streaming.

Aquí tienes el código en el contexto de la función:

Personalizar el comportamiento de las páginas que listan las categorías

Con el tema KnowHow, los usuarios también pueden hacer clic en los titulares de una categoría, que les llevará a un listado de artículos pertenecientes a dicha categoría.

Cuando se encuentren en el sitio web global, sólo quiero mostrarles artículos globales. He optado por etiquetar todos los artículos globales como "worldwide" para facilitarlo.

Así que para el sitio global, mostraré sólo artículos etiquetados "worldwide" y para cada ciudad, artículos etiquetados con el correspondiente nombre de ciudad. Si la categoría es un caso excepcional y es válida para ambos sitios, incluiremos artículos pertenecientes a la actual ciudad y al sitio global.

Aquí tienes el código dentro del archivo category.php del tema:

Aquí no personalizo la consulta porque el rendimiento no es un problema mayor. Sólo estoy saltando resultados fuera de contexto y no los muestro.

En el futuro, podría personalizarlo más para los sitios de cada ciudad mostrando los resultados globales en una sección distinta de la página al final de la categoría.

Personalizar las búsquedas

También es importante realizar este tipo de personalizaciones para las búsquedas. El tema KnowHow proporciona resultados de búsqueda vía AJAX o una página generada de resultados. Necesitamos proporcionar código para personalizar cada opción.

Búsqueda en tiempo real con AJAX

Para las búsquedas en tiempo real, no existe una llamada get_header(), así que tuvimos que establecer nuestra ubicación de forma dinámica:

Después integramos la misma lógica que empleamos en las páginas de categoría dentro de los resultados de búsqueda en tiempo real.

Página de resultados de búsqueda dinámicos

Si no es AJAX, se invoca get_header(), algo un poco más sencillo:

Como mencioné antes para las categorías, podría haber optado por la personalización de los resultados de búsqueda para mostrar una segunda sección de resultados para artículos globales en los sitios de cada ciudad.

Enfoques para el contenido

Para proporcionar a los usuarios locales una explicación sobre las diferencias entre su sitio local y el sitio global al mismo tiempo que les animaba a participar en la mejora de los directorios de su ciudad, usé un plugin que cree para Envato Tuts+ en enero del 2015: Los beneficios de usar el plugin Free Shortcode. Es un plugin que te permite usar macros para expandir esencialmente contenido HTML reutilizable. Lo vamos a usar en cada artículo de una ciudad para personalizar lo que los usuarios locales verán cuando lleguen desde Portland.

Una vez instalado el plugin, cree un shortcode para cada ciudad, como [sc:pdx] que proporcionaba una sencilla viñeta en la parte superior de las páginas de artículos locales:

Flee the Jungle Shortcode editorFlee the Jungle Shortcode editorFlee the Jungle Shortcode editor

Después, siempre que añadía un artículo local, incluímos el shortcode [sc:pdx] en la parte superior:

Flee the Jungle Shortcode In the Article Editing PageFlee the Jungle Shortcode In the Article Editing PageFlee the Jungle Shortcode In the Article Editing Page

Aquí tienes el aspecto que tiene el artículo cuando llega un usuario:

Flee the Jungle Articles with City Intro via ShortcodeFlee the Jungle Articles with City Intro via ShortcodeFlee the Jungle Articles with City Intro via Shortcode

Solucionar el problema de los enlaces absolutos

Soy cliente desde hace mucho de Digital Ocean, pero estoy empezando a entusiasmarme también con con WP Engine; un proveedor de servicios de alojamiento bien gestionado tiene grandes ventajas en ciertas circunstancias. He descubierto que WP Engine ofrece una solución al problema de las URLs absolutas con mejores alternativas.

WP Engine ofrece un filtro para procesar las entradas mediante el cual puedes usar expresiones regulares que modifiquen el código. Después de considerar otras soluciones para modificar WordPress y usar su propia API conseguirlo, decidí que sería más sencillo sustituir los enlaces absolutos de FleeTheJungle.com con direcciones relativas. Esto permitía a los usuarios visitar un subdominio de ciudad permaneciendo dentro del sitio geolocalizado:

WPEngine HTML Post-ProcessingWPEngine HTML Post-ProcessingWPEngine HTML Post-Processing

Antes de configurar esto, las visitas al subdominio Portland Flee the Jungle tenían enlaces salientes hacia el sitio global fleethejungle.com diseminados por todas sus páginas. Después de configurarlo, los enlaces salientes eran consistentes con el dominio o subdominio desde el que haya accedido el usuario.

En esencia, usé el filtro de procesado de entradas para eliminar las URLs absolutas y permitir que las URLs del navegador y las direcciones relativas asuman la navegación.

Directorios de ciudades

Para proporcionar un directorio de las ciudades en las que Flee the Jungle está o iba a estar disponible, construí una página que enumera las ciudades a las que podía acceder el usuario. También lo uso para atraer voluntarios que lancen los sitios de sus respectivas ciudades.

Flee the Jungle City NavigationFlee the Jungle City NavigationFlee the Jungle City Navigation

La función completa Configure_Geolocal() para la geolocalización

Aquí tienes el código final que he usado dentro de WordPress para configure_geolocal():

Requisitos varios

Personalizar el logotipo

Por supuesto, quería implementar una personalización básica del logo de cada subdominio. El tema KnowHow no soporta de forma nativa esta característica.

Flee the Jungle Customizing the Logo within WordPress by SubdomainFlee the Jungle Customizing the Logo within WordPress by SubdomainFlee the Jungle Customizing the Logo within WordPress by Subdomain

Si observas el código final de configure_geolocal(), he indicado una URL para una biblioteca de medios para los logos de cada ciudad.

Después, el código dentro de header.php personaliza la URL del logo del tema según el dominio:

Alojar los dominios y los subdominios

El mapeado de dominios de WP Engine puede resultar un poco confuso para los no iniciados. Tienes que añadir dominios para tu sitio y mapearlos en el sistema interno de direcciones de WP Engine. Si quieres que los subdominios funcionen adecuadamente, tienes que configurar individualmente cada subdominio desde dentro del panel de dominios de WP Engine.

Descubrir esto me costó un poco. Aquí añado una página figurada para San Francisco, a la que se puede acceder vía sanfrancisco.fleethejungle.com o sfbay.fleethejungle.com. WP Engine facilita la configuración de esas redirecciones:

WPEngine Adding a New City DomainWPEngine Adding a New City DomainWPEngine Adding a New City Domain

Aquí tienes una vista de los dominios configurados para el sitio global y los subdominios de Flee the Jungle:

WPEngine Domain List for Your WebsiteWPEngine Domain List for Your WebsiteWPEngine Domain List for Your Website

Por desgracia, las ciudades en las que no añades redirecciones explícitas hacia 404 en WP Engine. Existen otras formas de solucionar esto, pero por el momento, estoy simplemente añadiendo ciudades grandes en esta configuración. La gente será dirigida generalmente a la página de inicio global o a una ciudad existente—a partir de ahí, pueden crear voluntariamente el sitio de su ciudad.

Otros problemas

Es bien sabido que la optimización del motor de búsqueda interno de Google es un gran secreto, aunque la mayoría del tráfico que recibe tu sitio depende de él.

Parte de nuestro contenido aparecerá bajo distintos dominios, aunque casi siempre dependerá de la ciudad desde la que navega el usuario. A Google no le gusta ver el mismo contenido en distintos sitios web, pero también es bueno indexando subdominios de forma independiente.

Francamente, no tengo ni idea de cómo será recibido el modelo de red geolocalizada de Flee the Jungle en su gran megaplex de supercomputación. Esto no es prioritario para mi por el momento. El tráfico de Flee the Jungle está basado en el apoyo de los usuarios y en las redes sociales.

Y para terminar

Por favor compara las diferencias entre el contenido del sitio global de Flee the Jungle y el sitio local para la ciudad de Portland:

Flee the Jungle Portland - Home Page ExampleFlee the Jungle Portland - Home Page ExampleFlee the Jungle Portland - Home Page Example

Ciertamente, existen distintas formas en las que podría haber enfocado este reto de crear sitios geolocalizados. Sin embargo, Flee the Jungle sigue siendo un esfuerzo voluntario—necesitaba una solución sencilla, rápida y que al mismo tiempo fuese fácil añadir ciudades, y aprovechar el trabajo de los voluntarios. El enfoque que he descrito ha cumplido los objetivos de forma rápida.

El resultado de toda esta personalización es que cuento con una sola instalación de WordPress que puede gestionar cientos de versiones geolocalizadas de nuestro sitio, con contenido dirigido a un público global y otro al local que es filtrado y organizado correctamente. Y lo más importante, los voluntarios pueden construir y lanzar ciudades sin necesidad de excesivos conocimientos sobre WordPress. Esta solución es mucho más simple y rápida de implementar que el multisitio con distintas instalaciones de WordPress de mi "amigo". El futuro es relativamente ilimitado.

Espero que hayas disfrutado de este tutorial y la explicación sobre cómo podrías enfocar este tipo de retos. Si quieres lanzar un directorio de tiendas para tu propia ciudad, ponte en contacto con nosotros. Si sientes curiosidad sobre cómo construir un sitio como este, he escrito un detallado tutorial sobre cómo crear tu un sitio web de recursos o conocimientos base con WordPress. Digamos que quieres lanzar tu propio sitio web de fans de Harry Potter—esta sería una buena guía para empezar.

Por favor, envía libremente cualquier duda o consulta a través de un comentario aquí abajo. También puedes contactar conmigo vía Twitter @reifman o enviarme directamente un correo electrónico. También puedes dirigirte a mi perfil de instructor en Envato Tuts+ para consultar otros de mis tutoriales.

Enlaces relacionados

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.