Tema WordPress desde cero: el portafolio que estás viendo

El objetivo

He construido muchos sitios con Elementor Pro y Divi, que son la herramienta adecuada cuando un cliente necesita rapidez. Para mi propio portafolio quise demostrar lo contrario: que también puedo construir un tema de WordPress desde cero, sin constructores visuales, siguiendo las reglas del propio WordPress. Este sitio es ese tema.

Arquitectura del tema

• Sigue la jerarquía de plantillas estándar de WordPress: portada, archivo de proyectos, ficha individual y páginas por categoría.
• Todos los estilos y scripts se cargan con las funciones oficiales de WordPress, nunca con etiquetas escritas a mano en las plantillas.
• Los proyectos son un tipo de contenido propio («Proyectos») con su propia taxonomía, que coincide con mis tres áreas de trabajo: WordPress, Marketing Digital e Infraestructura y Automatización.
• Los datos editables (nombre, biografía, foto, contacto, redes sociales) se administran con campos de Advanced Custom Fields en su versión gratuita, sin depender de funciones de pago.
• Las tecnologías de cada proyecto salen de un catálogo propio de iconos SVG integrados en el código. Al marcar una casilla en el editor aparece la insignia con su logo, sin cargar librerías de iconos externas.

Diseño

El diseño partió de propuestas hechas en Claude Design, que después se implementaron a mano en el tema: estética oscura, paneles translúcidos y un fondo de esferas de color que se mueven suavemente detrás de todo el sitio, sin cortes entre secciones.

Rendimiento: un problema real y cómo lo resolví

Al publicar el sitio, PageSpeed Insights y GTmetrix no lograban medirlo: devolvían errores en lugar de puntajes, aunque para una persona el sitio cargaba en menos de dos segundos. Descarté una por una las causas posibles en el servidor (caché, redirecciones, protocolo HTTP, consumo de CPU) hasta encontrar la raíz en el propio tema:

• La página arrancaba invisible por un efecto de aparición gradual, y las herramientas de medición no la daban por pintada.
• Varias animaciones corrían en bucle infinito sobre paneles con desenfoque, así que el navegador nunca llegaba a un momento de reposo.

La solución fue rediseñar el fondo como una capa fija del tamaño de la pantalla, cuyo costo ya no crece con el largo de la página; reemplazar el desenfoque por degradados, y animar solo mientras alguien interactúa con el sitio. Tras unos segundos de inactividad las animaciones se pausan, y también cuando la pestaña queda en segundo plano. El resultado en PageSpeed Insights, medido en producción: 92 / 100 / 100 / 100 en móvil y 98 / 100 / 100 / 100 en escritorio (rendimiento, accesibilidad, buenas prácticas y SEO).

Otras decisiones de rendimiento:

• Imágenes en formato WebP con dimensiones declaradas, para que la página no salte al cargar, y carga diferida en las que no se ven al inicio.
• Fuentes del sistema, sin descargar tipografías externas.
• Archivos CSS y JavaScript minificados con un script propio.
• Respeto por la preferencia de «reducir movimiento» del sistema operativo.

SEO sin plugins

Todo el SEO está escrito en el tema: títulos dinámicos, meta descripciones recortadas en una palabra completa, etiquetas Open Graph y Twitter Cards para que los enlaces se vean bien al compartirlos, y datos estructurados (JSON-LD) para que Google entienda quién soy y qué es cada proyecto. Google Analytics 4 también se instala por código, y solo en producción, para que mis pruebas locales no mezclen datos falsos con los reales. El sitio está verificado en Search Console y ya aparece indexado en Google.

Formulario de contacto seguro

Funciona sin plugins de formularios y sin recargar la página:

• Protección contra envíos falsificados (nonce de WordPress) y una trampa invisible para bots (honeypot).
• Validación en el navegador y otra vez en el servidor, con los mismos mensajes, para quien desactive JavaScript o manipule la petición.
• Todo lo que escribe el visitante se limpia antes de usarse y se escapa antes de insertarlo en el correo.
• En local, los correos quedan atrapados en una bandeja de pruebas; en producción llegan a mi correo por un servidor SMTP real.

Flujo de trabajo

Desarrollo en un entorno local idéntico al de producción (WordPress, MySQL y Docker en WSL2), con control de versiones en Git y repositorio público en GitHub. Cada cambio se prueba primero en local y luego se publica en el servidor.

Cómo lo construí

Gran parte del código lo escribió Claude Code bajo mi dirección. Yo definí qué construir y con qué reglas, revisé cada cambio antes de aceptarlo, lo probé en local y lo publiqué. Cuando algo fallaba, como el problema de rendimiento, hice el diagnóstico guiando a la herramienta con evidencia real. Es mi forma de trabajar con IA: rápido, pero verificando cada paso.