Category: DevOps y Cloud

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

    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.