WordPress headless

---

¿Qué es el headless?

El concepto de «headless» (o descabezado) no es exclusivo de WordPress. Se trata de una arquitectura de software general que se puede aplicar a diversos sistemas de gestión de contenido (CMS) además de WordPress como Strapi, Contentful, Content Island y Joomla.

Headless se refiere a la separación del backend (gestión y almacenamiento de datos) del frontend (presentación visual). Esta separación permite que el contenido se consuma a través de una API desde cualquier tecnología, como aplicaciones móviles, sitios web estáticos o incluso dispositivos IoT.

¿En qué consiste WordPress Headless?

En un entorno tradicional de WordPress, el contenido (Backend) y la visualización (Frontend) están acoplados mediante plantillas de PHP. En la versión headless, ambas partes se comunican a través de la API de WordPress. En un sistema Headless diferenciamos 2 funciones principales:

Gestión: Los editores o administradores de contenido siguen utilizando el panel de administración típico de WordPress para introducir datos, imágenes y artículos.

Extracción: Los desarrolladores extraen esa información mediante llamadas a una API REST (que WordPress activa automáticamente) o mediante GraphQL (usando plugins adicionales).

Al estar el frontend totalmente separado del backend, puedes elegir cualquier tecnología para construir la cara visible del sitio web o aplicación. Esto incluye: Frameworks de JavaScript modernos como Astro, React, Vue, Angular, Next.js o Nuxt. Otras tecnologías como .NET o incluso el desarrollo de aplicaciones móviles nativas que consuman los mismos datos de WordPress.

La elección dependerá de las características del proyecto que estés desarrollando. Si estás desarrollando un proyecto donde el SEO tendrá un gran protagonismo para atraer tráfico la mejor opción será Astro, si estás desarrollando una webapp, donde el usuario podrá acceder con su cuenta y la experiencia de usuario es más importante que el posicionamiento SEO, seguramente React sea la mejor opción, pero si el proyecto está enfocado a aplicaciones móviles la elección será diferente.

Configuración en WordPress (Backend)

Para conectar WordPress con un framework frontend (como Astro, React, Vue o Next.js) y utilizarlo de forma headless, el puente fundamental es la API. WordPress permite que el backend (gestión de contenido) y el frontend (visualización) funcionen de forma independiente, comunicándose a través de datos en formato JSON.

Antes de intentar la conexión, es fundamental preparar el sitio de WordPress con los siguientes pasos:

Activar enlaces permanentes

Es imprescindible configurar los enlaces permanentes con «Nombre de la entrada». Si se mantiene la opción «por defecto», la API de WordPress no funcionará correctamente o será más difícil acceder.

Elegir el tipo de API

REST API: Viene activada por defecto en WordPress. Puedes acceder a ella a través de la ruta tu-dominio.com/wp-json/wp/v2/.

GraphQL: Si prefieres una única llamada para obtener datos específicos y evitar el exceso de información (over-fetching), puedes instalar el plugin WPGraphQL.

Plugins Recomendados: Para mejorar la información que envía la API, se recomienda instalar Advanced Custom Fields (ACF) para campos personalizados y Yoast SEO, que permite enviar metadatos de posicionamiento directamente a través de la API.

Extracción de datos desde el Frontend

En tu framework (por ejemplo, Astro o React), debes realizar peticiones a los endpoints de WordPress para obtener la información:

• Páginas: .../wp-json/wp/v2/pages.
• Entradas (Posts): .../wp-json/wp/v2/posts.
• Uso de _embed: Para evitar hacer múltiples llamadas (una para el post y otra para la imagen o el autor), añade el parámetro ?_embed a la URL de la API. Esto incluye automáticamente la información de imágenes destacadas y autores en una sola respuesta.

Seguridad y Producción

Desactivar el Frontend tradicional: Una vez que tu nuevo frontend esté listo, es recomendable usar un plugin como «Headless Mode» o añadir una función en WordPress que redirija cualquier visita al sitio antiguo hacia tu nueva web.

Acceso privado: Si no quieres que tu API sea pública para evitar el «scrapping», puedes cerrarla y permitir el acceso solo mediante JSON Web Tokens (JWT).

Despliegue: Puedes optar por un modelo estático (SSG), donde el frontend hace las llamadas a WordPress solo en el momento de la construcción (build), generando archivos HTML rápidos y seguros que no dependen de la base de datos en tiempo real

Categoría/s: Diseño y desarrollo web