Tema WordPress VGS

Problema / reto

Convertir un diseño estático en una experiencia WordPress editable y mantenible

El reto consistía en pasar de un diseño proporcionado en Figma a una página real, sin limitarse a copiar medidas. Era necesario interpretar las secciones, identificar patrones reutilizables, definir cómo respondería la interfaz en distintos tamaños y decidir qué contenido debía quedar editable desde administración.

• Reproducir con fidelidad la cabecera, el hero, los bloques informativos, los productos, las reseñas, los formularios y el pie de página.
• Adaptar una composición principalmente de escritorio a tablet y móvil.
• Evitar una plantilla principal extensa y difícil de mantener.
• Hacer editable el slider principal sin modificar código.
• Registrar los productos fuera del tema para separar contenido y presentación.
• Reutilizar una misma tarjeta para todos los elementos del catálogo.
• Conservar el comportamiento de sliders, navegación y menú móvil.
• Preparar una instalación replicable con exports de WordPress y ACF.

Arquitectura

Una estructura pensada para que la página principal siga siendo legible

La página de inicio actúa como orquestador: obtiene los datos necesarios y carga cada sección mediante plantillas parciales. Los estilos fuente, los módulos JavaScript, el plugin propio y los archivos de demostración se mantienen en áreas diferenciadas.

Rodrigo-WordPress-VGS/
├── front-page.php                         → composición de la página de inicio
├── functions.php                          → configuración y carga de recursos
├── template-parts/
│   ├── slider.php                         → slider principal administrable
│   ├── benefits.php                       → bloque de ventajas
│   ├── products.php                       → consulta de los últimos productos
│   ├── product/card.php                   → tarjeta reutilizable
│   ├── quote-form.php                     → formulario de presupuesto
│   ├── about.php                          → sección corporativa
│   ├── reviews.php                        → slider de reseñas
│   └── contact-cta.php                    → llamada a la acción final
│
├── resources/js/
│   ├── app.js                             → arranque de interacciones
│   ├── swiper-home.js                     → configuración del hero
│   └── swiper-reviews.js                  → configuración de reseñas
│
├── tailwind/
│   └── components.css                     → componentes y utilidades agrupadas
│
├── plugins-propios/
│   └── rodri-plugin-vgs/                  → registro del CPT Productos
│
├── demo-content/
│   ├── acf-export-2026-07-19.json         → grupos de campos de ACF
│   └── wordpress_tw.WordPress.2026-07-19 (1).xml
│
├── package.json                           → scripts y dependencias
└── README.md                              → instalación y comprobación

El uso de get_template_part() permite pasar datos concretos a cada sección. Por ejemplo, el slider recibe el array de slides obtenido desde ACF, mientras que la tarjeta de producto se reutiliza dentro de la consulta sin duplicar su marcado.

Componentes del tema

Secciones independientes que forman una única experiencia visual

La home se divide en piezas con responsabilidades concretas:

• Cabecera: barra superior, navegación principal y menú móvil adaptado al breakpoint del diseño.
• Hero slider: slides editables, overlays, llamadas a la acción, navegación y paginación.
• Beneficios: cuadrícula responsive con iconos, títulos y separadores.
• Productos: consulta de los seis elementos más recientes y tarjeta común.
• Presupuesto: bloque de formulario integrado visualmente con el resto de la página.
• Sobre la empresa: composición de texto e imagen adaptada a resoluciones menores.
• Reseñas: carrusel con uno, dos o tres elementos según el ancho disponible.
• CTA y footer: cierre de la página, información de contacto y enlaces.

Frontend y compilación

Tailwind, JavaScript modular y recursos generados mediante Node.js

Los archivos fuente se procesan mediante scripts de npm. Tailwind y PostCSS generan los estilos del tema, mientras que esbuild agrupa y minimiza los módulos JavaScript utilizados por los sliders y el menú móvil.

• npm run dev para compilar durante el desarrollo.
• npm run watch para recompilar automáticamente al detectar cambios.
• npm run build para preparar los archivos finales cuando esté disponible en el proyecto.
• Salida CSS: theme/style.css y theme/style-editor.css.
• Salida JavaScript: theme/js/script.min.js y theme/js/block-editor.min.js.

Proceso

Del análisis de Figma a una entrega replicable

Reproducibilidad

Una entrega preparada para instalar, importar y verificar

El repositorio incluye la documentación y los archivos necesarios para reconstruir el proyecto en otro entorno. El orden de instalación evita que WordPress pierda la relación con el CPT o con los campos personalizados.

1. Clonar el repositorio dentro de wp-content/themes/.
2. Copiar el plugin de plugins-propios/ a wp-content/plugins/ y activarlo.
3. Instalar y activar ACF Pro.
4. Activar el tema theme.
5. Ejecutar npm install y compilar los recursos.
6. Importar el JSON de ACF y el XML de WordPress.
7. Seleccionar la página Home como portada estática.
8. Asignar el menú y regenerar los enlaces permanentes.

Resultado

Una home de WordPress fiel al diseño, editable y organizada para seguir creciendo

El resultado es un tema personalizado que combina fidelidad visual con una estructura interna mantenible. La página reproduce las secciones principales del diseño, funciona en escritorio y móvil, permite editar el slider desde administración y presenta los productos mediante un modelo de contenido independiente.

Como pieza de portfolio, el proyecto demuestra que la maquetación no se trató como un conjunto de estilos aislados: hubo análisis previo, división en componentes, integración con WordPress, tratamiento de contenido dinámico, compilación de assets y preparación de una entrega reproducible.