Una plantilla para gobernarlos a todos

✨ UX, UI y desarrollo personalizado

Una plantilla para gobernarlos a todos

Diseño de una arquitectura web dinámica y autogestionable en WordPress

resumen

Este proyecto abarcó el desarrollo de una arquitectura de contenido dinámica para tres sitios web distintos: Santiago Collado (espacio de arte), IC Abogados (despacho legal) y Marín Climatización (empresa de climatización industrial).

Aunque con temáticas diferentes, todos compartían un mismo reto: organizar grandes volúmenes de contenido interrelacionado, sin recurrir a múltiples plantillas y diseñar una experiencia de gestión de contenido más accesible, eficiente y sostenible, tanto para los usuarios finales como para quienes editan la web.

La solución consistió en construir una arquitectura de contenido dinámica, basada en tipos de contenido personalizados (CPT), relaciones cruzadas mediante ACF y consultas PHP personalizadas.
Esto permitió crear una sola plantilla reutilizable para cada tipo de contenido, que organiza automáticamente la información relacionada sin necesidad de duplicar plantillas ni tocar el editor visual.

TIMEFRAME

8 semanas (en conjunto para los 3 proyectos)

MI ROL

Diseño UX/UI, Arquitectura de contenido, Desarrollo PHP personalizado, Diseño de flujo editorial, Integración ACF + Elementor

HERRAMIENTAS

WordPress, Elementor, ACF Pro, PHP, CPT UI, Figma (estructuras y flujos), Notion (documentación)

el reto

Elementor, al trabajar con plantillas individuales y consultas estáticas, obliga a crear una plantilla por cada categoría padre o tipo de contenido si se quiere mostrar elementos relacionados. En sitios como IC Abogados, que contiene estructuras jerárquicas de hasta cinco niveles, se traducía en una gestión caótica y poco sostenible: cada categoría o subcategoría requería su propia plantilla y query específica.

Esto limitaba la escalabilidad del sitio y hacía que mantenerlo actualizado fuera lento y propenso a errores.

El desafío era reducir esa complejidad sin sacrificar diseño ni funcionalidad. El sistema debía adaptarse a distintos tipos de contenido y seguir siendo visualmente consistente y editable con facilidad.

objetivo

La meta era clara: permitir que los editores pudieran subir información desde el backend como si rellenaran un formulario, y que esa información se mostrara automáticamente con su diseño correspondiente y sus relaciones establecidas, sin necesidad de crear múltiples plantillas ni tocar Elementor, ademas de automatizar la consulta de los contenidos relacionados (hijos) a partir de un único recurso padre y mantener la coherencia visual y de estructura a lo largo de todos los niveles.

investigación

Durante el análisis inicial, se detectó que los usuarios (clientes y editores) sentían frustración al gestionar contenido desde Elementor. Las relaciones entre categorías eran difíciles de mantener y la necesidad de crear múltiples plantillas ralentizaba la publicación.

Se analizaron los flujos de trabajo del cliente antes del rediseño. A través de entrevistas informales y observación directa del uso del backend, se detectaron tres hallazgos clave:

🥴 Frustración con el editor visual

🔄 Dificultad para mantener relaciones entre tipos de contenido

⚡ Falta de autonomía para publicar de forma rápida y organizada

Se confirmó la necesidad de una estructura editorial más simple, relacional y sin fricción.

POV & HMW

Punto de vista:
Los usuarios necesitaban una forma sencilla y clara de conectar diferentes niveles de contenido, sin tener que lidiar con el diseño o duplicar plantillas para cada nueva categoría.

How Might We…?
¿Cómo podríamos crear una estructura que se gestione desde el backend como un formulario, y que muestre automáticamente la información relacionada con una sola plantilla dinámica?

La solución

Se diseñó una arquitectura dinámica en WordPress utilizando Custom Post Types para organizar los diferentes niveles de contenido. Luego, mediante campos de relación con ACF, se permitió vincular manualmente entradas hijas con sus correspondientes entradas padre.

Estas relaciones se gestionaron con funciones PHP personalizadas, insertadas mediante shortcodes reutilizables en plantillas únicas hechas con Elementor. El contenido visualizado se adapta automáticamente según la relación establecida, sin que el usuario tenga que modificar el diseño ni tocar el código.

				
					php
CopiarEditar
function icabogados_entradas_relacionadas_shortcode() {
    global $post;
    $output = '';

    // Obtenemos las entradas relacionadas desde ACF
    $relacionadas = get_field('entradas_relacionadas', $post->ID);

    if ($relacionadas) {
        $output .= '<div class="bloque-relacionado">';
        foreach ($relacionadas as $relacion) {
            $titulo = get_the_title($relacion->ID);
            $enlace = get_permalink($relacion->ID);
            $extracto = get_the_excerpt($relacion->ID);

            $output .= '<div class="item">';
            $output .= '<h3><a href="' . $enlace . '">' . $titulo . '</a></h3>';
            $output .= '<p>' . $extracto . '</p>';
            $output .= '</div>';
        }
        $output .= '</div>';
    }

    return $output;
}
add_shortcode('entradas_relacionadas', 'icabogados_entradas_relacionadas_shortcode');

Una vez añadida esta función al sitio, el contenido se puede mostrar simplemente escribiendo este shortcode: [entradas_relacionadas]

y automáticamente muestra las entradas relacionadas de cada página, según lo que el editor haya seleccionado.

resultados

Gracias a esta solución, el sistema pasó de requerir más de 15 plantillas individuales a solo una por tipo de contenido.

Los tiempos de publicación se redujeron significativamente y la curva de aprendizaje se volvió mínima, incluso para editores sin conocimientos técnicos.

Los contenidos pueden ahora escalar libremente, manteniendo siempre la coherencia visual y la lógica interna del sitio.

💬 Feedback directo del cliente: “publicar contenido ahora es intuitivo y rápido”

conclusión

Este proyecto representa mucho más que una solución técnica. Es el resultado de aplicar diseño UX desde un lugar que a veces pasa desapercibido: el backend.

Diseñé este sistema pensando en quién edita, quién publica y quién navega, para lograr una experiencia fluida en todos los niveles. Lo que antes requería múltiples plantillas, ahora funciona con una sola. Lo que antes dependía de Elementor, ahora se gestiona como si fuera un formulario.

Fue un proceso de aprendizaje, estructura y mucho código… pero sobre todo, una demostración de que el diseño también vive en la lógica del sistema.

Descarga mi CV

versión «ser feliz»
auténtica, con toda la chispa ✨

versión «encajar con la sociedad»
ATS-friendly, aburrida pero efectiva