Saltar al contenido

WordPress headless y Astro

WordPress es un sistema de gestión de contenidos que incluye su propio frontend, pero también se puede utilizar como un CMS headless para proporcionar contenido a tu proyecto de Astro.

Integración con Astro

Sección titulada "Integración con Astro"

WordPress viene con una API REST de WordPress incorporada para conectar tus datos de WordPress a Astro. Opcionalmente puedes instalar WPGraphQL o Gato GraphQL en tu sitio para usar GraphQL.

Requisitos previos

Sección titulada “Requisitos previos”

Para empezar, necesitarás lo siguiente:

  1. Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te pondrá en marcha en poco tiempo.
  2. Un sitio de WordPress - La API REST de tu sitio es [TU_SITIO]/wp-json/wp/v2/ y está disponible por defecto con cualquier sitio de WordPress. También es posible configurar WordPress en un entorno local.

Configurar credenciales

Sección titulada “Configurar credenciales”

La API REST de tu WordPress está disponible para solicitudes externas para la obtención de datos sin autenticación por defecto. Esto no permite a los usuarios modificar tus datos o la configuración del sitio, y te permite utilizar tus datos en tu proyecto de Astro sin credenciales.

Puedes optar por requerir autenticación si es necesario.

Obtención de datos

Sección titulada "Obtención de datos"

Obtén tus datos de WordPress a través de la URL única de la API REST de tu sitio y la ruta para tu contenido. (Para un blog, esto comúnmente será posts). Luego, puedes renderizar tus propiedades de datos utilizando la directiva set:html={} de Astro.

Por ejemplo, para mostrar una lista de títulos de publicaciones y su contenido:

src/pages/index.astro
---
const res = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts");
const posts = await res.json();
---
<h1>Astro + WordPress 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title.rendered} />
      <p set:html={post.content.rendered} />
  ))
}

La API REST de WordPress incluye parámetros globales como _fields y _embed.

Una gran cantidad de datos está disponible para ti a través de esta API, por lo que es posible que desees obtener solo ciertos campos. Puedes restringir tu respuesta agregando el parámetro _fields a la URL de la API, por ejemplo: [TU-SITIO]/wp/v2/posts?_fields=author,id,excerpt,title,link

La API también puede devolver contenido relacionado con tu publicación, como un enlace a la publicación principal o a los comentarios de la publicación. Puedes agregar el parámetro _embed a la URL de la API (por ejemplo, [TU-SITIO]/wp/v2/posts?_embed) para indicarle al servidor que la respuesta debe incluir estos recursos embebidos.

Creación de un blog con WordPress y Astro

Sección titulada “Creación de un blog con WordPress y Astro”

Este ejemplo obtiene datos de la API pública de WordPress de https://norian.studio/dinosaurs/. Este sitio de WordPress almacena información sobre dinosaurios individuales bajo la ruta dinos, tal como un blog almacenaría publicaciones de blog individuales bajo la ruta posts.

Este ejemplo muestra cómo reproducir esta estructura de sitio en Astro: una página de índice que enumera dinosaurios con enlaces a páginas individuales de dinosaurios generadas dinámicamente.

Mostrar una lista de publicaciones de WordPress

Sección titulada “Mostrar una lista de publicaciones de WordPress”

La página src/pages/index.astro enumera cada dinosaurio, con una descripción y un enlace a su propia página.

  • Directoriosrc/
    • Directoriopages/
      • index.astro
      • Directoriodinos/
        • [slug].astro
  • astro.config.mjs
  • package.json

La obtención a través de la API devuelve un objeto que incluye las propiedades:

  • title.rendered - Contiene el renderizado HTML del título de la publicación.
  • content.rendered - Contiene el renderizado HTML del contenido de la publicación.
  • slug - Contiene el slug de la publicación. (Esto proporciona el enlace a las páginas de dinosaurios individuales generadas dinámicamente).
/src/pages/index.astro
---
import Layout from "../layouts/Layout.astro";


let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
let posts = await res.json();
---
<Layout title="Dinos!">
  <section>
    <h1>List of Dinosaurs</h1>
    {
      posts.map((post) => (
        <article>
          <h2>
            <a href={`/dinos/${post.slug}/`} set:html={post.title.rendered} />
          </h2>
          <Fragment set:html={post.content.rendered} />
        </article>
      ))
    }
  </section>
</Layout>

Uso de la API de WordPress para generar páginas

Sección titulada “Uso de la API de WordPress para generar páginas”

La página src/pages/dinos/[slug].astro genera dinámicamente una página para cada dinosaurio.

/src/pages/dinos/[slug].astro
---
import Layout from '../../layouts/Layout.astro';


const { slug } = Astro.params;


let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`);
let [post] = await res.json();


// The getStaticPaths() is required for static Astro sites.
// If using SSR, you will not need this function.
export async function getStaticPaths() {
  let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
  let posts = await data.json();


  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post: post },
  }));
}
---
<Layout title={post.title.rendered}>
  <article>
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>

Retornar recursos embebidos

Sección titulada “Retornar recursos embebidos”

El parámetro de consulta _embed le indica al servidor que devuelva recursos relacionados (embebidos).

src/pages/dinos/[slug].astro
---
const { slug } = Astro.params;


let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`);
let [post] = await res.json();
---

Se devuelve la propiedad _embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url, la cual se puede utilizar para mostrar la imagen destacada en cada página de dinosaurio. (Reemplaza medium por el tamaño de imagen deseado).

/src/pages/dinos/[slug].astro
<Layout title={post.title.rendered}>
  <article>
    <img src={post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url} />
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>

Publicando tu sitio

Sección titulada "Publicando tu sitio"

Para desplegar tu sitio, visita nuestras guías de implementación y sigue las instrucciones de tu proveedor de hosting preferido.

Recursos de la comunidad

Sección titulada "Recursos de la comunidad"

Recursos de la comunidad

Sección titulada "Recursos de la comunidad"
Introduction to Astro + WordPress
Astro + WPGraphQL for more secure WordPress sites
Shattering Headless WordPress Build Times with Astro's Content Layer API
How to Set Up a Headless WordPress Site with Astro
Build a static site with WordPress and Astro
Going Headless WordPress with Astro
Leveraging WordPress as a Headless CMS for Your Astro Website: API Configuration & Data Fetching
WordPress Headless with Astro - Installing Astro and Fetching posts with WP-GraphQL
Make a Headless WordPress Site with Astro
WPEngine Astro Headless WordPress Starter Demo
Headless WordPress with Astro – Build a Simple Blog from Scratch with Tailwind CSS
Building an E-commerce Website with Headless WordPress and Astro
Building a Headless WordPress Site with Astro
Building an Astro Website with WordPress as a Headless CMS

Más guías de CMS

Socios de CMS destacados

  • CloudCannon

    CMS basado en Git creado para mayor velocidad, seguridad y cero dolores de cabeza.

Todas las guías de CMS

Contribuir Comunidad Patrocinar