Réplica del sitio en WordPress · Práctica Local · 2026
Diapositiva 02 · Visión General
Diapositiva 03 · Arquitectura
Cada bloque corresponde a una sección del tema WordPress
MÓDULOS 1-2
La identidad visual y el primer punto de navegación del sitio
El módulo 1 es el header con el logo del sitio sobre fondo rojo y borde dorado. El módulo 2 es la barra de navegación negra justo debajo, con los 12 enlaces a los signos del zodiaco chino (Rata, Buey, Tigre, Conejo, Dragón, Serpiente, Caballo, Cabra, Mono, Gallo, Perro y Cerdo).
Esto se construye en header.php. La función bloginfo() trae el nombre del sitio desde Ajustes Generales. Los 12 signos se generan con un bucle foreach que recorre el array definido en functions.php, generando un enlace por cada uno automáticamente.
Si el cliente quiere cambiar el nombre del sitio o añadir un signo nuevo, no hay que tocar el HTML: se edita en el panel de WordPress o en functions.php. CSS responsive: en móvil los 12 enlaces hacen scroll horizontal.
MÓDULOS 3-5
Navegación temporal y la interacción estrella del sitio
El módulo 3 es el menú blanco con 5 enlaces (Hoy / Mañana / Semanal / Mensual / 2026). El módulo 4 es el hero con el título y la fecha. El módulo 5 es la calculadora que pide día, mes y año y devuelve el signo chino del usuario.
El hero está en index.php y genera la fecha en español con la función date() de PHP. La calculadora es un formulario HTML con 3 selectores generados con bucles for. El cálculo: (año - 1924) % 12 en JavaScript.
El JS ajusta el resultado si el usuario nació antes de mediados de febrero (el Año Nuevo Chino cambia de fecha). El script se carga con wp_enqueue_script() para seguir buenas prácticas de WordPress, no con un <script> directo.
MÓDULOS 6-7
El contenido principal: predicciones diarias y la historia del zodiaco
El módulo 6 es un grid de 12 tarjetas, una por signo, cada una con su emoji, nombre, predicción del día y enlace. El módulo 7 es el bloque de texto SEO con 3 sub-secciones explicando el zodiaco chino.
Las 12 tarjetas se generan con un foreach que itera sobre el array que devuelve horoscopo_chino_get_signos() en functions.php. Si se actualizan las predicciones, basta con tocar ese array y todas las tarjetas se actualizan a la vez.
El grid usa CSS Grid con grid-template-columns: auto-fill minmax(280px, 1fr), por lo que se adapta solo al ancho de la pantalla: 4 columnas en escritorio, 2 en tablet y 1 en móvil, sin media queries adicionales.
MÓDULOS 8-10
La parte final del sitio: perfil de cada signo, interacción y pie de página
El módulo 8 es otro grid de 12 tarjetas con la descripción de personalidad de cada signo. El módulo 9 es el formulario de comentarios con nombre, email y mensaje. El módulo 10 es el footer negro con enlaces, copyright y aviso legal.
El grid reutiliza horoscopo_chino_get_signos() pero accede al campo 'caracteristicas'. El footer está en footer.php, incluido con get_footer(). El año del copyright se genera con date('Y') automáticamente.
El formulario en esta versión es solo visual (muestra un alert al enviar). En producción se conectaría a la API REST de WordPress o a un plugin tipo Contact Form 7 para guardar los comentarios en la base de datos.
Diapositiva 08 · Ensamblaje
El flujo de carga de la página de inicio
misitio.local/
index.php
header.php: logo + menú de signos + menú principal
functions.php
footer.php: comentarios + pie de página + scripts
10 módulos · 1 tema WordPress · 4 desarrolladores
¿Opiniones?