Muchas redacciones y equipos de producto quieren seguir usando WordPress por su panel editorial, roles, plugins y flujos… pero desean un frontend más rápido, seguro y flexible. Ahí entra el enfoque headless: WordPress se queda como CMS, y Astro renderiza la web consumiendo tu contenido por REST o GraphQL. Resultado: la sala de redacción no cambia su rutina, y el sitio carga como un rayo con HTML estático o SSR ligero.
A continuación, un recetario pensado para un blog de noticias en WordPress que no quiere renunciar a su CMS y busca rendimiento, SEO y control en el front.
/wp-json/wp/v2/…) o WPGraphQL./wp-json/wp/v2/posts/wp-json/wp/v2/categories/wp-json/wp/v2/mediaConsejo: expón solo lo necesario usando REST _fields y WPGraphQL con allowlist de esquemas.
npm create astro@latest
# elige template vacío o de blog según necesidad
Lenguaje del código: CSS (css)---
// src/pages/index.astro
import Layout from "../layouts/Layout.astro";
// Solo los campos necesarios
const res = await fetch(
"https://TU-SITIO/wp-json/wp/v2/posts?_fields=id,slug,title,excerpt,link,date&_embed&per_page=10"
);
const posts = await res.json();
---
<Layout title="Últimas noticias">
<main>
<h1>Últimas noticias</h1>
{posts.map((post) => (
<article>
<h2>
<a href={`/noticias/${post.slug}/`} set:html={post.title.rendered} />
</h2>
<p set:html={post.excerpt.rendered} />
{/* Imagen destacada (si la hay) */}
{post._embedded?.['wp:featuredmedia']?.[0]?.media_details?.sizes?.medium?.source_url && (
<img
src={post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url}
alt={post._embedded['wp:featuredmedia'][0].alt_text || post.title.rendered}
loading="lazy"
/>
)}
</article>
))}
</main>
</Layout>
Lenguaje del código: JavaScript (javascript)---
// src/pages/noticias/[slug].astro
import Layout from '../../layouts/Layout.astro';
export async function getStaticPaths() {
const data = await fetch("https://TU-SITIO/wp-json/wp/v2/posts?per_page=100&_fields=slug");
const posts = await data.json();
return posts.map((p) => ({ params: { slug: p.slug } }));
}
const { slug } = Astro.params;
const res = await fetch(`https://TU-SITIO/wp-json/wp/v2/posts?slug=${slug}&_embed`);
const [post] = await res.json();
---
<Layout title={post?.title?.rendered || "Noticia"}>
<article>
{post?._embedded?.['wp:featuredmedia']?.[0]?.source_url && (
<img src={post._embedded['wp:featuredmedia'][0].source_url} alt="" />
)}
<h1 set:html={post.title.rendered} />
<p><small>{new Date(post.date).toLocaleDateString()}</small></p>
<Fragment set:html={post.content.rendered} />
</article>
</Layout>
Lenguaje del código: JavaScript (javascript)Variantes:
?page=N&per_page=K y el header X-WP-TotalPages./wp-json/wp/v2/categories, filtra posts con ?categories=ID./wp-json/wp/v2/tags.after/before (o monta colección en Astro tras traer los posts).Ejemplo WPGraphQL (posts + campos):
query LatestPosts {
posts(first: 10) {
nodes {
slug
title
excerpt
featuredImage { node { sourceUrl } }
date
acf_campos {
autorInvitado
lecturaMinutos
}
}
}
}
src/pages/api/preview.ts que valide un token, consulte WP (draft) y redirija a la URL de la noticia en Astro con SSR.
<Head> con title, meta description, OpenGraph/Twitter y JSON-LD (artículo).@astrojs/sitemap y robots.txt.@astrojs/image para resize/AVIF/WebP, lazy y responsive._embed recuperas tamaños; también puedes proxificar o descargar medios a tu pipeline si necesitas control total._fields, activa CORS solo para tu dominio, rate limiting.cms.midominio.com) o detrás de VPN/Basic Auth si no debe ser público.¿Seguiremos editando igual en WordPress?
Sí. El equipo editorial no cambia su flujo. WordPress sigue siendo el CMS; Astro solo lee la API y renderiza el front.
¿REST o GraphQL?
REST es cero fricción y suficiente para la mayoría. GraphQL (con WPGraphQL) te da tipado y control fino de selección. Si usas muchos ACF complejos, GraphQL suele ser cómodo.
¿Cómo se actualiza el front cuando publicamos una noticia?
Con webhooks que disparan el build/deploy del front (SSG), o usando SSR/ISR para evitar reconstrucciones completas.
¿Qué pasa con mis plugins (ACF, SEO, etc.)?
Siguen en WordPress. Si afectan al contenido (campos, HTML), exponlos por REST/GraphQL. El front (Astro) se encarga de presentarlo con mejor rendimiento y control.
¿Se pierde SEO al pasar a headless?
No. Al contrario: Astro entrega HTML rápido y optimizado. Mantén slugs, implementa sitemap/robots, metas correctas y datos estructurados.
El modelo WordPress headless con Astro te permite conservar todo lo que hace fuerte a WordPress (editorial, plugins, flujo de trabajo) y ganar un frontend moderno con Core Web Vitals sobresalientes, seguridad y portabilidad. Es una transición sensible para un medio de noticias: el equipo sigue publicando donde siempre, y el lector lo nota donde importa—en la velocidad y la experiencia.
