Caso de estudio
Tema WordPress GamesDemos
GamesDemos es una plataforma de catálogo de videojuegos construida sobre WordPress mediante un tema
personalizado, un plugin propio de widgets para Elementor y un plugin adicional de importación
automática desde Steam llamado Juegos Scraper, con fichas avanzadas, búsqueda en
vivo, filtros AJAX y una interfaz visual orientada a catálogo moderno.
El proyecto combina arquitectura modular del tema, integración con
ACF, componentes reutilizables para Elementor, una capa visual personalizada, varios
sistemas dinámicos en JavaScript y una capa de importación automatizada desde Steam. El resultado no
es una simple web maquetada, sino un sistema de contenido flexible, mantenible y preparado para
generar contenido estructurado de forma semi automática.
Catálogo dinámico
Widgets reutilizables
UX interactiva
WordPress a medida
Importación automática
Tema propio
estructura visual y funcional personalizada
Plugins
widgets reutilizables para Elementor y importador automático
AJAX
búsqueda y filtros sin recarga completa
ACF
fichas de juego estructuradas y reutilizables
Problema / reto
Construir una web de juegos que fuera visual, flexible y mantenible
El reto principal no era solo diseñar una web atractiva, sino construir una base técnica que permitiera
crear distintas secciones visuales, fichas avanzadas y bloques reutilizables sin depender de código
repetido o de plantillas rígidas.
- Organizar el tema sin acumular toda la lógica en un único archivo.
- Crear una home rica en secciones sin convertirla en código difícil de mantener.
- Permitir búsquedas y filtros más rápidos mediante AJAX.
- Diseñar fichas de juego complejas con mucha información visual y técnica.
- Reutilizar bloques en Elementor sin copiar y pegar estructuras manualmente.
- Adaptar la experiencia a móvil y escritorio con comportamientos diferentes.
- Automatizar la generación de fichas de juego sin depender únicamente de carga manual en el panel.
Solución
Tema modular + plugins propios + capa dinámica en JS
La solución final se apoya en varias capas complementarias:
- Tema personalizado para plantillas, estructura, ACF, AJAX y sistema visual global.
- Plugin propio para Elementor para registrar widgets reutilizables orientados al
catálogo.
- Plugin de importación desde Steam para generar fichas de juego estructuradas y
poblar automáticamente el catálogo.
- JavaScript desacoplado para comportamientos concretos como parallax o sliders
responsive.
- Swiper para carruseles y layouts móviles deslizables.
Planteamiento
Separación entre estructura global y bloques reutilizables
Técnicamente, una de las decisiones más interesantes fue no concentrar toda la lógica ni toda la
interfaz dentro del tema, sino dividir el proyecto entre capa visual, bloques reutilizables e
importación automatizada de contenido.
- El tema controla el sistema general del sitio.
- Un plugin añade componentes configurables para Elementor.
- Otro plugin se encarga de importar y transformar datos de Steam en contenido utilizable.
- Cada widget encapsula su consulta, sus controles y su render.
- La importación automatizada alimenta el catálogo sin depender solo de publicación manual.
Arquitectura
Tres capas claras: tema, widgets e importación automatizada
El proyecto se organiza en tres capas complementarias: un tema personalizado para la
estructura general,
un plugin de widgets para construir bloques reutilizables en Elementor y un
plugin independiente de importación encargado de consultar Steam, transformar datos
y generar fichas de juego estructuradas dentro del catálogo.
wp-content/
├── themes/tema/
│ ├── acf-json/ → exportación local de grupos de campos ACF en JSON
│ │ ├── group_688f7eff1ef4f.json
│ │ └── group_682626c0655fe.json
│ │
│ ├── css/
│ │ ├── archive-filter.css → estilos del sistema de filtros y listados
│ │ └── bootstrap.min.css → base visual con Bootstrap 5
│ │
│ ├── img/ → recursos gráficos del tema
│ │
│ ├── inc/
│ │ ├── ajax/
│ │ │ ├── archive-filters.php → lógica AJAX para filtros por categoría, tag y búsqueda
│ │ │ └── live-search.php → buscador en vivo por AJAX
│ │ ├── acf.php → integración con ACF y JSON local
│ │ ├── enqueue.php → carga centralizada de scripts y estilos
│ │ ├── helpers.php → utilidades reutilizables
│ │ ├── media.php → optimización de imágenes
│ │ ├── menus.php → registro de menús
│ │ ├── setup.php → configuración base del tema
│ │ ├── walkers.php → walker Bootstrap personalizado
│ │ └── widgets.php → sidebars y widgets
│ │
│ ├── js/
│ │ ├── archive-filter.js → interacción de filtros en frontend
│ │ ├── gallery-modal.js → galería y modal de imágenes
│ │ ├── live-search-ajax-handler.js → lógica del buscador en vivo
│ │ └── search-animations.js → animaciones del buscador
│ │
│ ├── template-parts/
│ │ ├── ajax/
│ │ │ └── content-archive-card.php → tarjeta reutilizable para resultados AJAX
│ │ ├── header/
│ │ │ └── navbar.php → navegación principal reutilizable
│ │ ├── archive-filter.php → bloque principal del archivo filtrable
│ │ └── content-pagination.php → componente reutilizable de paginación
│ │
│ ├── category.php → plantilla de categorías
│ ├── tag.php → plantilla de etiquetas
│ ├── search.php → resultados de búsqueda
│ ├── single.php → ficha individual del juego
│ ├── page.php → plantilla base de páginas
│ ├── page-contacto.php → plantilla personalizada de contacto
│ ├── page-categorias-bootstrap.php → plantilla de catálogo de categorías
│ ├── index.php → fallback del tema
│ ├── header.php → cabecera global
│ ├── footer.php → pie global
│ ├── functions.php → cargador modular del tema
│ ├── style.css → estilos principales
│ └── revision_tema.txt → notas internas del desarrollo
│
└── plugins/
├── rodri-plugin/
│ ├── my-elementor-widget.php → registro y carga de widgets personalizados
│ ├── assets/js/
│ │ ├── catalogo-categorias.js → slider responsive de categorías (Swiper)
│ │ └── highlight-parallax.js → efecto parallax dinámico
│ └── widgets/
│ ├── class-games-widget.php → grid de juegos recientes
│ ├── slider-games.php → slider de juegos con Swiper
│ ├── reviews-hero.php → sección de reseñas destacadas
│ ├── highlight-card.php → tarjeta destacada con parallax
│ ├── aventura-widget.php → sección temática de aventura
│ ├── catalogo-categorias-widget.php → catálogo visual de categorías
│ ├── faq-widget.php → acordeón FAQ dinámico
│ ├── info-contacto.php → bloque de información de contacto
│ └── form-shortcode.php → renderizado de formularios vía shortcode
│
└── juegos-scraper/
├── juegos-scraper.php → arranque principal del plugin
├── assets/css/style.css → estilos de trailers y contenido importado
│
├── src/Application/
│ └── ImportSteamGamesHandler.php → flujo principal de importación
│
├── src/Domain/
│ ├── Game.php → entidad principal del juego
│ └── Contracts/
│ ├── CategorySyncInterface.php → contrato de sincronización de categorías
│ ├── GameRepositoryInterface.php → contrato de guardado de juegos
│ ├── LoggerInterface.php → contrato de logging
│ └── SteamClientInterface.php → contrato del cliente Steam
│
├── src/Infrastructure/Steam/
│ ├── SteamApiClient.php → cliente HTTP de Steam
│ ├── CachedSteamApiClient.php → caché con transients
│ ├── SteamGameMapper.php → mapeo de datos a Game
│ └── SteamDlcResolver.php → resolución de nombres de DLC
│
├── src/Infrastructure/WordPress/
│ ├── Plugin.php → composición y arranque de servicios
│ ├── CptJuego.php → registro del CPT juego
│ ├── Cron.php → importación automática programada
│ ├── Settings.php → gestión de opciones del plugin
│ │
│ ├── Admin/
│ │ └── SettingsPage.php → panel de configuración e import manual
│ │
│ ├── WpGameRepository.php → persistencia de juegos en WordPress
│ ├── WpCategorySynchronizer.php → sincronización de categorías y tags
│ ├── AcfGameMetaWriter.php → guardado de metadatos y campos ACF
│ │
│ ├── QueryIntegration.php → integración del CPT en queries
│ ├── Shortcodes.php → shortcodes de trailers y galerías
│ ├── ExternalThumbnailSupport.php → soporte para thumbnails externas
│ ├── SteamVideoHtmlPolicy.php → política HTML para vídeo embebido
│ ├── Assets.php → carga de assets del plugin
│ └── Logger.php → sistema de logs del importador
│
├── src/Support/
│ ├── LanguageMapper.php → normalización de idiomas
│ ├── NsfwTitleFilter.php → filtrado de títulos NSFW
│ └── TrailerExtractor.php → extracción de trailers y miniaturas
│
└── uninstall.php → limpieza de opciones y cron
Esta separación evita acoplar toda la lógica al tema. El tema gobierna la presentación global,
rodri-plugin amplía la capa visual editable y
juegos-scraper resuelve la importación, normalización y persistencia de datos
externos.
A esta arquitectura se suma además un plugin independiente de importación que registra el CPT juego, consulta la API de Steam, filtra resultados, transforma los datos a un
modelo interno, sincroniza categorías, guarda metadatos en WordPress y ACF, y programa importaciones
automáticas mediante cron.
Plugin propios
Plugins propios para construir la interfaz y alimentar el catálogo
El plugin rodri-plugin registra varios widgets personalizados de Elementor.
Cada uno resuelve una pieza concreta de la interfaz:
Junto a este plugin visual, el proyecto también incorpora juegos-scraper, un
plugin independiente orientado a backend que automatiza la importación de juegos desde Steam, permitiendo
poblar el catálogo con contenido estructurado, galerías, trailers, metadatos y taxonomías sin depender de
una carga manual completa.
- Reutilización real de bloques visuales.
- Controles editables desde el panel de Elementor.
- Consultas WP integradas dentro de widgets específicos.
- Menor duplicación de código entre páginas.
- Mejor separación entre layout editable y lógica del tema.
- Automatización de entrada de contenido desde una fuente externa.
- Integración entre modelo de datos importado y capa visual del sitio.
Esto demuestra que no usaste Elementor de forma pasiva, sino que lo ampliaste con componentes propios
pensados específicamente para la lógica del proyecto.
Valor técnico
Qué aporta el plugin al proyecto
- Reutilización real de bloques visuales.
- Controles editables desde el panel de Elementor.
- Consultas WP integradas dentro de widgets específicos.
- Menor duplicación de código entre páginas.
- Mejor separación entre layout editable y lógica del tema.
Assets del plugin
Scripts registrados por funcionalidad
El plugin no solo registra widgets, también registra scripts específicos para widgets concretos:
catalogo-categorias.js activa o destruye Swiper según breakpoint móvil.
highlight-parallax.js aplica un parallax progresivo a la highlight card.
- Los assets se cargan solo cuando son necesarios a través de dependencias del widget.
Frontend y CSS
Una interfaz dark construida con Bootstrap, CSS propio y componentes visuales
El proyecto utiliza Bootstrap como base, pero la identidad visual y la mayor parte del acabado real nacen
del CSS personalizado del tema y de los widgets.
- El sitio mantiene una estética dark coherente con acentos verdes.
- Las vistas de catálogo, categorías, single, contacto y FAQs tienen estilos propios.
- Los widgets personalizados generan bloques reconocibles y consistentes en la home.
- Swiper permite reutilizar el mismo lenguaje visual en sliders, galerías y layouts móviles.
Lo importante es que toda esta capa visual no vive aislada: consume contenido generado tanto manualmente
como a través del importador, lo que conecta directamente el trabajo de frontend con una arquitectura
backend pensada para escalar mejor el catálogo.
Interacción
JavaScript para interacción útil, no solo decoración
La interfaz incorpora comportamiento dinámico pensado para mejorar la navegación y la exploración del
catálogo sin recargar la experiencia.
- Buscador en vivo con AJAX para mostrar resultados sin recarga completa.
- Filtros dinámicos de archivo con actualización parcial del listado.
- Slider de categorías en móvil para adaptar mejor la navegación al espacio
disponible.
- Parallax progresivo en la highlight card como refuerzo visual.
- Galerías, modales y sliders en las fichas individuales.
Modelado
Contenido estructurado en single y bloques configurables en home
El proyecto resuelve dos tipos de contenido al mismo tiempo:
- contenido editorial estructurado en fichas de juego mediante ACF
- contenido visual configurable mediante widgets de Elementor
- contenido importado y transformado desde Steam mediante un plugin propio de
automatización
Esa combinación permite que la parte editorial y la parte de marketing visual convivan sin mezclarse.
Proceso
Cómo se construyó el sistema
01
Definición del modelo de contenido
Se definió la estructura de los juegos, sus campos avanzados, la galería, los datos técnicos y las
relaciones con categorías y bloques de contenido.
02
Construcción del tema base
Se desarrolló la arquitectura principal del sitio: plantillas, includes, carga de assets, helpers,
AJAX, menús y tratamiento de medios.
03
Desarrollo del plugin de widgets
Se crearon widgets específicos para Elementor con consultas, controles y render personalizados para
las secciones principales de la web, manteniendo separada la lógica visual reutilizable.
04
Desarrollo del importador desde Steam
Se construyó un plugin independiente para consultar la API de Steam, filtrar juegos válidos,
transformar los datos a una estructura interna, sincronizar categorías y guardar metadatos avanzados
en WordPress y ACF.
05
Integración de comportamiento dinámico
Se añadieron scripts específicos para sliders responsive, parallax, búsqueda en vivo, filtros y
galerías.
06
Refuerzo visual y responsive
Se ajustaron layouts, breakpoints y estilos para que la experiencia cambiara correctamente entre
móvil y escritorio.
Fortalezas
Qué enseña este proyecto
- Desarrollo de temas WordPress personalizados.
- Creación de plugins propios para ampliar Elementor.
- Diseño de componentes reutilizables.
- Uso práctico de ACF y AJAX.
- Frontend dinámico con JavaScript y Swiper.
- Buena separación entre sistema global y bloques editables.
- Integración con APIs externas para poblar contenido.
- Automatización de procesos con cron en WordPress.
- Separación entre capa de importación, capa visual y capa editorial.
Mejoras futuras
Evolución natural
- Refactorizar aún más el CSS para reducir duplicidades.
- Extraer lógica repetida de cards a helpers reutilizables.
- Unificar patrones de render entre widgets similares.
- Mejorar carga condicional de assets según contexto real.
- Añadir más estados de carga y accesibilidad en interfaces dinámicas.
- Mejorar el sistema de logs y monitorización del importador.
- Ampliar reglas de normalización y validación de datos importados.
Resultado
Un proyecto más completo de lo que parece a primera vista
Con los plugins incluidos, GamesDemos pasa de ser “una web bonita hecha con WordPress” a convertirse en un
sistema bastante más sólido: tema a medida, arquitectura modular, fichas avanzadas, búsqueda dinámica,
biblioteca propia de widgets para construir la interfaz y un importador personalizado capaz de generar
contenido estructurado desde Steam.
A nivel de portfolio, esto enseña algo muy valioso: sabes trabajar WordPress no solo como usuario de temas
y plugins, sino como desarrollador capaz de diseñar la estructura del sitio, construir herramientas
editoriales, ampliar Elementor con componentes propios e integrar fuentes externas de datos dentro de un
flujo mantenible.
Galería
Capturas del proyecto
Home, el catálogo, las categorías, la plantilla de contacto y la ficha individual para reforzar la
explicación técnica con pruebas visuales.
Home principal con hero, sliders, reviews, secciones temáticas y categorías
visuales.
Vista de archivo con buscador, ordenación, cards horizontales y paginación.
Página de categorías con cards de taxonomía y navegación visual compacta.
Plantilla de contacto construida con widgets personalizados y shortcode de
formulario.
Single de juego con tabs, vídeo, galería, CTA y juegos relacionados.
Detalle técnico del single con información estructurada, idiomas y extras.
Contacto
¿Quieres ver más proyectos o hablar de un desarrollo similar?
Puedo enseñarte más casos de WordPress, PrestaShop, automatización, scraping o integraciones a medida.
