Mr John Vanilla

Descripción general del Proyecto

Vuelvo a picar código. Esta vez mi objetivo era trasladar al navegador el diseño que el propio diseñador, Mr John Vanilla, había creado en Figma. Su página web anterior estaba desarrollada en WordPress, pero necesitaba un cambio de imagen radical. Además, como ya conocía el panel de administración de WordPress y se sentía cómodo con él, me pidió mantenerlo para poder gestionar sus proyectos y contenido fácilmente.

Teniendo en cuenta sus solicitudes y que el rendimiento de la página anterior no era el mejor (se había construido con editores visuales), le propuse continuar con WordPress pero desacoplado: desarrollaría el Frontend en Astro. Le expliqué la mejora drástica que esto supondría para el rendimiento y SEO de su web. Él podría seguir utilizando WordPress como CMS para subir su contenido, y mi Frontend consumiría esos datos a través de la API de WordPress.

Primeras decisiones

Con la premisa clara y la parte de diseño y paleta de colores resuelta, mi principal tarea fue definir el stack tecnológico. Combinar WordPress Headless con Astro es, sin duda, una apuesta ganadora para obtener lo mejor de ambos mundos: un Backend robusto con PHP y MySQL (admin panel, gestión de usuarios, etc.) y la flexibilidad de crear contenido a medida, servido a velocidad estática.

Configuré un tema de WordPress personalizado y a medida para el usuario, limpiando todo aquello innecesario de la instalación base para garantizar un rendimiento óptimo. Alojé el Backend en Hostinger y desplegué el Frontend en Netlify para aprovechar su red global de CDN.

Trabajando el diseño

Lo bueno de colaborar con un diseñador es la claridad en el objetivo final. Acordé con él utilizar Figma como nuestro lienzo común: él se encargó de diseñar los wireframes y el arte final para las versiones mobile y desktop.

Mientras él terminaba el diseño, yo preparé la arquitectura visual del código. Definí todas las variables en el CSS apostando, una vez más, por Vanilla CSS. Preparé un reset a medida y organicé las variables globales para evitar repetir código, creando además componentes reutilizables para las diferentes secciones.

Retos Técnicos y Desarrollo Backend

Aunque visualmente el proyecto destaque por su minimalismo, bajo el capó he implementado una ingeniería de datos precisa. Para evitar depender del tema para la lógica de negocio y seguir las buenas prácticas de desarrollo en WordPress, desarrollé un plugin a medida (CPT Projects) encargado de registrar las estructuras de datos y exponerlas correctamente a la API.

1. Custom Post Types y ACF

El cliente necesitaba gestionar un portfolio, no solo entradas de blog. En mi plugin personalizado, creé una función para registrar sus proyectos como un nuevo tipo de contenido, permitiéndole escalabilidad total sin depender de constructores visuales pesados.

function register_custom_post_types() {
    $projects_args = array(
        'labels'             => array(
            'name'          => 'Projects',
            'singular_name' => 'Project',
            'menu_name'     => 'Projects',
        ),
        'public'             => false,
        'publicly_queryable' => false,
        'show_ui'            => true,
        'show_in_rest'       => true,
        'menu_icon'          => 'dashicons-portfolio',
        'supports'           => array('title', 'editor', 'thumbnail', 'custom-fields'),
    );

    register_post_type('projects', $projects_args);
}
add_action('init', 'register_custom_post_types');

Para la gestión del contenido, integré Advanced Custom Fields (ACF). Esto permite que cada texto, imagen y enlace del diseño sea editable por el usuario desde el panel, manteniendo la estructura estricta del diseño frontend.

2. Seguridad Avanzada y Endpoints

Al exponer la API, la seguridad es crítica. Implementé reglas para bloquear el acceso a endpoints sensibles que WordPress expone por defecto, como la enumeración de usuarios en /wp-json/wp/v2/users.

Además, protegí el acceso administrativo cambiando las rutas por defecto como wp-admin o wp-login.php por una URL personalizada y totalmente privada. Aunque al ser un frontend estático la superficie de ataque es mínima, esta implementación demuestra un conocimiento profundo de cómo funciona el core de WordPress y sus vulnerabilidades nativas, asegurando que el CMS permanezca invisible para bots y atacantes automatizados.

3. Estrategia de Despliegue: Webhooks y Netlify

Uno de los mayores retos de las webs estáticas es la actualización de contenido. Para evitar reconstruir el sitio manualmente o hacer llamadas constantes a la API (lo que afectaría al rendimiento), implementé una estrategia de Builds on Demand.

Configuré un Webhook en WordPress que se comunica con Netlify únicamente cuando se publica o actualiza un proyecto. De esta forma, el sitio permanece 100% estático y optimizado, y solo consumo recursos de compilación cuando es estrictamente necesario.

Resultados

La migración a Astro + WordPress Headless ha sido un éxito rotundo. Además de profesionalizar su presencia con emails corporativos y un diseño pixel-perfect, las métricas de rendimiento validan mi decisión técnica:

• Mobile: Pasé de una puntuación de 60 a 95/100 en Lighthouse.
• Desktop: Mejora de 78 a 100/100.

El resultado es una web visualmente impactante, segura y extremadamente rápida, que ofrece al cliente la comodidad de WordPress con la potencia moderna de Astro.