Cómo montar WordPress headless
con Astro paso a paso.

add_action('rest_api_init', function() {
  remove_filter('rest_pre_serve_request',
    'rest_send_cors_headers');
  add_filter('rest_pre_serve_request', function($value) {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET');
    return $value;
  });
});

# Proyecto nuevo desde cero
npm create astro@latest mi-proyecto
cd mi-proyecto
npm install

# O clonar el starter de Culebra Lab (ya tiene todo configurado)
git clone https://github.com/DhiviPanda/astro-wp-starter
cd astro-wp-starter && npm install

WP_API_URL=https://cms.tu-dominio.com/wp-json/wp/v2
WP_URL=https://cms.tu-dominio.com

const WP_API = import.meta.env.WP_API_URL;

// Tipos básicos
export interface WPPost {
  id: number;
  slug: string;
  title: { rendered: string };
  excerpt: { rendered: string };
  content: { rendered: string };
  date: string;
  _embedded?: {
    'wp:featuredmedia'?: Array<{ source_url: string; alt_text: string }>;
  };
}

// Obtener todos los posts
export async function getPosts(perPage = 10): Promise<WPPost[]> {
  const res = await fetch(
    `${WP_API}/posts?per_page=${perPage}&_embed`
  );
  if (!res.ok) return [];
  return res.json();
}

// Obtener un post por slug
export async function getPost(slug: string): Promise<WPPost | null> {
  const res = await fetch(
    `${WP_API}/posts?slug=${slug}&_embed`
  );
  if (!res.ok) return null;
  const posts = await res.json();
  return posts[0] ?? null;
}

// Obtener slugs para rutas estáticas
export async function getPostSlugs(): Promise<string[]> {
  const posts = await getPosts(100);
  return posts.map(p => p.slug);
}

---
import { getPosts } from '../../lib/wordpress';

const posts = await getPosts(12);
---

<ul>
  {posts.map(post => (
    <li>
      <a href={`/blog/${post.slug}/`}>
        <h2 set:html={post.title.rendered} />
        <p set:html={post.excerpt.rendered} />
      </a>
    </li>
  ))}
</ul>

---
import { getPost, getPostSlugs } from '../../lib/wordpress';

export async function getStaticPaths() {
  const slugs = await getPostSlugs();
  return slugs.map(slug => ({ params: { slug } }));
}

const { slug } = Astro.params;
const post = await getPost(slug);
if (!post) return Astro.redirect('/404');

const featuredImage = post._embedded?.['wp:featuredmedia']?.[0];
---

<article>
  <h1 set:html={post.title.rendered} />
  {featuredImage && (
    <img
      src={featuredImage.source_url}
      alt={featuredImage.alt_text}
      width="1200" height="630"
    />
  )}
  <div set:html={post.content.rendered} />
</article>

const img = post._embedded?.['wp:featuredmedia']?.[0];
const src = img?.media_details?.sizes?.large?.source_url
  ?? img?.source_url;

// En el template:
<img
  src={src}
  alt={img?.alt_text ?? post.title.rendered}
  width="1200"
  height="630"
  loading="lazy"
  decoding="async"
/>

npm install @astrojs/sitemap

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://tu-dominio.com',
  integrations: [sitemap()],
});

const title = post.title.rendered.replace(/<[^>]+>/g, '');
const desc = post.excerpt.rendered.replace(/<[^>]+>/g, '').slice(0, 155);
const canonical = `https://tu-dominio.com/blog/${post.slug}/`;

// En el head:
<title>{title}</title>
<meta name="description" content={desc} />
<link rel="canonical" href={canonical} />
<meta property="og:title" content={title} />
<meta property="og:description" content={desc} />
<meta property="og:url" content={canonical} />

# Build de producción
npm run build

# Preview local antes de subir
npm run preview

# Subir /dist a tu hosting por FTP
# (IONOS, SiteGround, cualquier hosting compartido)