Mersan Tours

Die ausführliche Fallstudie ist auf Spanisch verfügbar.

Logros

• Cabecera, pie y hero propios sin pagar la versión Pro del tema
• Sistema de color por roles: un cambio recolorea todo el sitio
• Auditoría de 21 páginas en producción y URLs rotas corregidas
• Tema hijo versionado y con trazabilidad de cada cambio

Contexto

Mersan Tours organiza excursiones y viajes en grupo desde el norte de España, con salidas a destinos europeos y una segunda línea de viajes a la Riviera Maya. La web se hizo en dos etapas. En la primera, una web estática en HTML, CSS y JavaScript, con Bootstrap y jQuery sobre una plantilla, desplegada en AWS con S3, Route 53 y CloudFront y sin backend. Cuando el cliente necesitó un backend, pasó a la segunda: WordPress y PHP en Hostinger.

La web actual funciona en WordPress sobre Hostinger, con el tema Travel Agency y el plugin WP Travel Engine para el catálogo: fichas de viaje, destinos, tipos de viaje y buscador. Cuando empecé el rediseño, el sitio ya estaba en producción y arrastraba cuatro problemas:

• La portada no dependía de ninguna página: la pintaban 13 secciones fijas del Personalizador, ligadas a un plugin del tema.
• Convivían tres sistemas de color (el verde por defecto del tema, el naranja de la marca y dos azules sueltos) frente a un logo naranja y azul.
• Los diseños de cabecera que se querían usar solo existían en la versión de pago del tema.
• Algunas páginas usaban bloques copiados de otro tema, con colores y espaciados que este no definía, y por eso no respondían a los cambios.

El requisito de fondo era que textos, imágenes, precios y datos de contacto se pudieran editar desde el panel de WordPress, sin código.

Mi rol

Soy el responsable técnico de la web: decido la arquitectura, diseño, escribo el tema hijo, configuro los plugins y despliego en producción. Trabajo sobre un hosting compartido sin acceso por línea de comandos, así que todo el flujo se resuelve desde el panel de WordPress y el administrador de archivos del hosting.

Uso Claude como asistente para generar y revisar código. Yo defino qué se construye, lo pruebo en el sitio real y decido qué entra en cada versión.

Qué construí

Etapa 1: web estática en AWS

La primera versión la hice en una semana, sin ayuda de IA, con HTML, CSS y JavaScript, usando Bootstrap y jQuery sobre una plantilla. La desplegué en AWS con S3, Route 53 y CloudFront. Era una web estática, sin backend.

Etapa 2: migración a WordPress y PHP en Hostinger

Cuando el cliente necesitó un backend, migré la web a WordPress con PHP en Hostinger, donde está en producción. El catálogo de viajes se resolvió con el plugin WP Travel Engine. Lo que sigue es el trabajo de esa segunda etapa.

Auditoría del sitio en producción

Antes de cambiar nada, identifiqué qué capa pintaba cada parte de la web: el tema padre, WP Travel Engine o los bloques del editor. Revisé el tema hijo existente, la exportación de las 21 páginas, la información técnica del sitio y el Personalizador. Encontré URLs rotas por slugs generados automáticamente, una página de pruebas publicada, páginas duplicadas de WP Travel Engine, textos en inglés y una cabecera que contradecía el horario real. Corregí los slugs y los textos desde el panel y prioricé el resto por impacto.

Cabecera en una sola barra

Sustituí la cabecera del tema (barra verde, franja blanca y menú) por una única barra con logo, menú repartido y teléfono. No sobrescribí header.php: desenganché la función del tema padre de su hook y enganché la mía en el mismo punto, para no romper los contenedores que se cierran en el pie. En la portada la barra es transparente sobre la imagen; al bajar se oculta y al subir reaparece, con un umbral de 10 px contra el parpadeo. El menú móvil reutiliza el JavaScript del tema padre. El teléfono, su texto y el enlace a WhatsApp se editan en el Personalizador.

Sistema de color en dos capas

• Paleta: los colores de marca en bruto, tomados del logo.
• Roles: qué color lleva cada tipo de elemento (botón principal, botón secundario, WhatsApp, iconos, acentos, enlaces, pie).

Los componentes solo usan roles, nunca colores directos, así que cambiar un rol actualiza ese tipo de elemento en todo el sitio. Sobrescribí las variables de color del tema padre para quitar el verde de raíz y registré la misma paleta en el editor de bloques. Los verdes que el tema y sus plugins tenían fijos en el CSS los anulé con selectores documentados uno a uno.

Pie de página propio

Cuatro columnas: marca con logo y redes, información, experiencias y contacto. La columna de experiencias se genera sola a partir de los tipos de viaje de WP Travel Engine, así que un tipo nuevo aparece en el pie sin tocar nada. Textos, email, horario, redes y logo se editan en una sección propia del Personalizador.

Hero con fundido automático

El hero de la portada alterna imágenes con fundido, sin plugins. Las imágenes (hasta cinco) y los segundos entre ellas se eligen en el Personalizador. Cada imagen se carga justo antes de mostrarse, el fundido se pausa con la pestaña oculta y no se activa si el usuario ha pedido reducir el movimiento.

Contacto, reclamaciones y WhatsApp

• WhatsApp centralizado: número y mensajes en un solo archivo del tema, botón flotante y un shortcode que acepta el viaje como parámetro para personalizar el mensaje.
• Contacto: tarjetas con iconos Font Awesome, formulario de Contact Form 7 con el estilo de la marca y acceso directo a WhatsApp.
• Reclamaciones: el modelo oficial de hoja de reclamaciones de Cantabria con vista previa del PDF y botones de descarga, resuelto con el bloque nativo Archivo en lugar de un plugin de visor.

El contenido de las páginas lo entrego como marcado de bloques listo para pegar en el editor de código, y el diseño vive en el CSS del tema hijo.

Método de entrega y trazabilidad

Cada entrega es el tema hijo completo con un número de versión nuevo, para que nunca se mezclen archivos de entregas distintas. Un documento de trazabilidad relaciona cada efecto visible con su archivo, función o selector y explica cómo modificarlo. El CSS suelto del Personalizador pasó al tema, y el repositorio replica las rutas del servidor.

Resultado

• La web funciona en producción en WordPress, con el catálogo de viajes en WP Travel Engine y URLs en español.
• Cabecera, pie y hero son código propio del tema hijo, y su contenido se edita desde el Personalizador.
• Todos los colores del tema hijo salen de un único sistema de roles.
• La página de reclamaciones ofrece el modelo oficial con vista previa y descarga.
• El rediseño sigue en curso: la paleta general y la página de contacto están en una nueva iteración.

Qué demuestra

• Extender un tema y un plugin de terceros sin modificar su código, con hooks, variables CSS y el Personalizador.
• Diagnosticar qué capa genera cada parte de una web WordPress antes de cambiarla.
• Diseñar CSS mantenible: roles de color, variables y documentación de trazabilidad.
• Trabajar sobre un sitio en producción con cambios pequeños, versionados y reversibles.
• Separar diseño y contenido para que el negocio actualice su web sin depender del desarrollador.

Nota

El repositorio es privado porque la web pertenece a un cliente; el código del tema hijo puede revisarse en entrevista. El rediseño está en curso, así que la web pública puede no reflejar todavía todos los cambios descritos.