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:
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.
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:
Usar distintas instalaciones WordPress.
Usar un multisitio WordPress para gestionar varios sitios.
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.
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).
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):
1
// Category IDs that are worldwide, digital to be displayed without changes
2
// e.g. Getting Started, Prime and Smile Alternatives, Streaming Media, etc.
3
$nonlocal_category_ids=[1,22,29,30,46,57,60,195];
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):
O, edita la categoría y copia el ID de la URL (el ID de la categoría Getting Started es 29):
Aquí tienes los IDs de la etiqueta Seattle y Portland:
1
// Tag IDs for city names e.g. Seattle, Portland
2
$known_cities=array(49,211);
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:
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:
* Grab the subdomain portion of the URL. If there is no sub-domain, the root
6
* domain is passed back. By default, this function *returns* the value as a
7
* string. Calling the function with echo = true prints the response directly to
8
* the screen.
9
*
10
* @param bool $echo
11
*/
12
functionarrested_subdomain($echo=false){
13
$hostAddress=explode('.',$_SERVER["HTTP_HOST"]);
14
if(is_array($hostAddress)){
15
if(eregi("^www$",$hostAddress[0])){
16
$passBack=1;
17
}else{
18
$passBack=0;
19
}
20
if($echo==false){
21
return($hostAddress[$passBack]);
22
}else{
23
echo($hostAddress[$passBack]);
24
}
25
}else{
26
return(false);
27
}
28
}
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:
1
functionconfigure_geolocal(){
2
global$nonlocal_category_ids;
3
global$known_cities;
4
global$domain_locale;
5
global$logo_image_url;
6
// Tag IDs for city names e.g. Seattle, Portland
7
$known_cities=array(49,211);
8
9
// Category IDs that are worldwide, digital to be displayed without changes
10
// e.g. Getting Started, Prime and Smile Alternatives, Streaming Media, etc.
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.
1
global$known_cities;
2
global$nonlocal_category_ids;
3
global$domain_locale;
4
5
if($domain_locale===false){
6
// root visit
7
$st_cat_post_args['tag__not_in']=$known_cities;
8
}else{
9
// local city being viewed but include worldwide articles in this category
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:
1
<?phpif(!empty($_GET['ajax'])?$_GET['ajax']:null){// Is Live Search ?>
2
<?php
3
// get geolocal settings for live search only
4
configure_geolocal();
5
?>
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.
1
// check if one of its categories is excluded from local
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:
Después, siempre que añadía un artículo local, incluímos el shortcode [sc:pdx] en la parte superior:
Aquí tienes el aspecto que tiene el artículo cuando llega un usuario:
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:
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.
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():
1
functionconfigure_geolocal(){
2
global$nonlocal_category_ids;
3
global$known_cities;
4
global$domain_locale;
5
global$logo_image_url;
6
// Tag IDs for city names e.g. Seattle, Portland
7
$known_cities=array(49,211);
8
9
// Category IDs that are worldwide, digital to be displayed without changes
10
// e.g. Getting Started, Prime and Smile Alternatives, Streaming Media, etc.
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.
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:
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:
Aquí tienes una vista de los dominios configurados para el sitio global y los subdominios de Flee the Jungle:
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.
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.
Jeff Reifman is a experienced technology consultant, former Microsoft Group Program Manager, writer, activist and yogi. He's the founder of Meeting Planner and author of the Envato Tuts+ series, Building Your Startup. He enjoys travel, photography and snowboarding in his free time.
