Cómo integré WordPress con React en Apolanco.com

📝 OPCIÓN 1: Crear el post desde el panel de WordPress

  1. Entra a tu panel:
    👉 https://blog.apolanco.com/wp-admin
  2. Ve al menú Entradas → Añadir nueva
  3. Escribe algo como: Título: “Cómo integré WordPress con React en Apolanco.com” Contenido: En este artículo explico cómo usamos WordPress como un CMS sin cabeza (headless) para alimentar el blog de nuestra página React.
    Configuramos el acceso a la API REST y lo consumimos con fetch desde el frontend, logrando una integración rápida y moderna. Imagen destacada:
    Sube una que represente el tema (por ejemplo, una imagen de código o integración).
  4. Pulsa Publicar.

Luego puedes acceder al JSON en:

https://blog.apolanco.com/wp-json/wp/v2/posts

Verás algo como esto:

[
  {
    "id": 123,
    "date": "2025-11-02T17:45:00",
    "slug": "integrar-wordpress-con-react",
    "status": "publish",
    "title": {
      "rendered": "Cómo integré WordPress con React en Apolanco.com"
    },
    "content": {
      "rendered": "<p>En este artículo explico cómo usamos WordPress...</p>"
    },
    "excerpt": {
      "rendered": "<p>Usamos WordPress como CMS sin cabeza...</p>"
    },
    "featured_media": 45,
    "link": "https://blog.apolanco.com/como-integre-wordpress-con-react-en-apolanco-com/"
  }
]

⚙️ OPCIÓN 2: Crear el post por API REST (POST request)

Si quieres hacerlo desde código (por ejemplo, para automatizar publicaciones), puedes usar la API REST de WordPress.

Requisitos:

  • Un usuario con permisos de editor o administrador.
  • Un token de autenticación (o cookie de sesión).

🔐 1. Obtener token JWT

Primero, instala el plugin:

JWT Authentication for WP REST API

Luego, genera un token enviando un POST a:

POST https://blog.apolanco.com/wp-json/jwt-auth/v1/token

Con cuerpo:

{
  "username": "tu_usuario",
  "password": "tu_contraseña"
}

Recibirás algo como:

{
  "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...",
  "user_email": "[email protected]",
  "user_nicename": "admin",
  "user_display_name": "Administrador"
}

✍️ 2. Crear un post con el token

Luego haces un POST a:

POST https://blog.apolanco.com/wp-json/wp/v2/posts

Con headers:

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...
Content-Type: application/json

Y cuerpo:

{
  "title": "Ejemplo de publicación creada por API",
  "content": "<p>Este post fue creado desde la API REST de WordPress usando React.</p>",
  "status": "publish"
}

Si todo está correcto, WordPress responderá con un JSON del post recién creado 🎉


⚛️ BONUS: Ejemplo desde React (fetch)

fetch("https://blog.apolanco.com/wp-json/wp/v2/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${token}`,
  },
  body: JSON.stringify({
    title: "Publicación automática desde React",
    content: "<p>Este post fue creado desde la app React.</p>",
    status: "publish",
  }),
})
  .then((res) => res.json())
  .then((data) => console.log("✅ Post creado:", data))
  .catch((err) => console.error("❌ Error:", err));

¿Quieres que te deje también el ejemplo para editar o eliminar publicaciones vía API (con React o con curl)?
Así tendrías un CRUD completo para tu blog.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *