Claude a WordPress: conecta Claude y crea tu web
«Claude a WordPress» significa una de dos cosas. O quieres que Claude trabaje en tu web de WordPress: leer tu contenido, redactar entradas, actualizar páginas. O has creado algo con Claude, en Claude Design, Claude Code o en un chat, y tiene que convertirse en una web de WordPress de verdad.
Esta guía cubre las dos. La primera parte explica cómo conectar Claude con WordPress. La segunda, cómo convertir lo que has creado con Claude en un tema que tu equipo pueda editar. A septiembre de 2026, ninguna de las dos se hace con un clic, y el camino correcto depende de tu configuración.
Parte 1: Conectar Claude con WordPress
Claude se comunica con otro software mediante el Model Context Protocol (MCP). WordPress no habla MCP de serie, así que la forma de conectarlo depende de dónde funcione tu web.
WordPress.com: el conector oficial
WordPress.com tiene un conector oficial para Claude, lanzado en febrero de 2026. Apruebas el acceso con OAuth y Claude puede analizar el tráfico, resumir comentarios, encontrar contenido desactualizado y sugerir mejoras a partir de tu web real.
Hay dos límites importantes: la conexión es solo de lectura, así que Claude no puede crear, actualizar ni borrar contenido a través de ella, y necesita un plan de pago de WordPress.com.
WordPress autoalojado: el MCP Adapter
Para webs de WordPress.org, el camino oficial es el WordPress MCP Adapter. Necesita WordPress 6.9 o posterior y se basa en la Abilities API, con la que el núcleo de WordPress, los plugins y los temas declaran lo que pueden hacer. El adaptador convierte esas capacidades en herramientas que Claude puede usar, mediante WP-CLI o un endpoint HTTP en tu web.
Lo que Claude puede hacer depende de las capacidades que exponga tu web. Varios plugins, como WPVibe y Royal MCP, y proveedores como InstaWP te hacen la configuración, a menudo con capacidades para entradas, páginas, medios y ajustes.
Antes de conectar
- Empieza en staging. Deja que Claude trabaje en una copia antes de tocar la web en producción.
- Concede lo mínimo. Expón solo las capacidades y el rol de usuario que Claude necesite de verdad.
- Mantén a una persona en el proceso. Revisa los borradores antes de publicarlos.
Una cosa que la conexión no hace: no te da un diseño ni un tema nuevos. Claude puede gestionar el contenido en WordPress, pero la web se sigue viendo como la muestra tu tema. De eso trata la segunda parte.
Parte 2: Convertir lo que has creado con Claude en una web de WordPress
Tanto si diseñaste una página en Claude Design, como si Claude Code te construyó un frontend o recibiste una landing page en un chat, el resultado es código: HTML, CSS y JavaScript. WordPress necesita un tema: plantillas para páginas y entradas, cabecera y pie, estilos, y el contenido guardado en la base de datos para que el equipo pueda editarlo.
Claude Design no tiene exportación a WordPress. Exporta a PDF, PowerPoint, HTML y Canva, pasa los proyectos a Claude Code, y entre sus conectores están Wix, Lovable, Replit y Vercel, pero no WordPress. Así que eliges un camino. La pregunta que lo decide: ¿quién edita la web después del lanzamiento?
Qué debería significar «en WordPress»
Una página que solo se ve bien no es una web que tu equipo pueda gestionar:
- Contenido editable. ¿Alguien puede cambiar un titular, una imagen o un botón en el editor de WordPress sin tocar código?
- Plantillas reales. ¿La cabecera, el pie, las entradas del blog y las páginas comparten un diseño, de modo que un cambio se aplica en todas partes?
- Blog y formularios. ¿Las entradas, las categorías y los formularios funcionan a la manera de WordPress, o son copias estáticas?
- Sin dependencias. ¿La web depende para siempre de un plugin de page builder?
Ten en cuenta estos cuatro puntos: es donde se diferencian los cinco caminos.
1. Pegar el HTML en un bloque HTML personalizado
Cómo: exporta HTML independiente, crea una página en WordPress, añade un bloque HTML personalizado y pega el código. Sube las imágenes y corrige las rutas.
Ideal para: una única landing page que no vas a volver a tocar.
El inconveniente: todo vive en un solo bloque de código. El equipo no puede cambiar un texto sin editar HTML, los estilos de tu tema pueden chocar con los de Claude, y la cabecera, el pie y el blog no se benefician en nada. Es la respuesta que se da en los foros de WordPress.org, y funciona, pero no es una web.
2. Reconstruirlo en un page builder
Cómo: usa lo creado con Claude como referencia y reconstrúyelo en Elementor, Divi o similares, sección por sección.
Beaver Builder lo ha hecho menos manual. Desde septiembre de 2026, Beaver Builder AI puede recibir un Claude Design como kit de diseño, con las secciones como módulos de HTML personalizado, o mediante un conector MCP, con el que Claude construye la página con filas, columnas, titulares y botones nativos de Beaver Builder. El conector necesita WordPress 6.9 o posterior, una web pública con HTTPS, el plugin MCP Adapter y los plugins de pago de Beaver Builder, y algunas secciones siguen quedando como HTML personalizado.
Ideal para: equipos cuyas webs ya funcionan con un page builder.
El inconveniente: el resultado pertenece al builder. Tu web depende de ese plugin y de su licencia, el código de un page builder pesa más que un tema nativo, y cambiar más adelante significa reconstruir.
3. Dejar que Claude Code construya un tema de bloques
Cómo: pasa el proyecto a Claude Code y pídele un tema de bloques de WordPress: theme.json para colores, fuentes y espaciados, plantillas HTML, partes de plantilla y patrones de bloques. El plugin Build with WordPress de WordPress.com añade a Claude habilidades específicas de WordPress y se conecta con WordPress Studio para previsualizar en local.
Ya hay quien lo hace. El dueño de agencia Dan Davies creó un sistema de marca en Claude Design y Claude Code lo convirtió en un tema sobre una instalación nueva de WordPress en dos horas. El developer advocate Jonathan Bossenger creó y publicó un tema de bloques propio con Claude y luego dedicó dos días y nueve commits a pulirlo. La tarea más grande fue convertir HTML en bruto en marcado de bloques correcto, para que el editor del sitio pudiera trabajar con él.
Ideal para: desarrolladores que quieren control total y no les importa revisar código.
El inconveniente: el control de calidad eres tú. Las primeras versiones suelen conservar trozos de HTML en bruto que el equipo no puede cambiar, y cada corrección pasa por ti. Además, consume una buena parte de tu cuota de Claude.
4. Usar un conversor de HTML a tema
Cómo: exporta el proyecto, sube el ZIP a un conversor e instala el tema que genera. WPConvert, por ejemplo, convierte HTML estático o un proyecto de Vite en un tema clásico con header.php, footer.php y plantillas de página.
Ideal para: llevar rápido un diseño estático a un hosting de WordPress.
El inconveniente: un conversor traduce archivos, no intenciones. Comprueba cuánto contenido puede editar realmente tu equipo en el editor de WordPress y si el blog y los formularios son nativos. Estas herramientas solo procesan código del lado del cliente, no backends ni apps renderizadas en el servidor.
5. Convertirlo en un tema nativo de WordPress con transjt
Para este camino creamos transjt: entra un diseño o un repositorio y sale un tema nativo de WordPress, con el contenido en el editor.
Desde Claude Code o Claude Design:
- Si empezaste en Claude Design, pasa el proyecto a Claude Code.
- Pide a Claude Code que construya el frontend en React con Vite, sin renderizado en el servidor. Es el único requisito que importa para la conversión, y Claude Code lo cumple si se lo dices desde el principio.
- Sube el proyecto a un repositorio de GitHub.
- Conecta el repositorio con transjt, elige WordPress y revisa la vista previa.
A través de Figma: si tu equipo revisa los diseños en Figma, llévalo primero allí, con Claude Code y el servidor MCP de Figma o una herramienta de importación de HTML como html.to.design, y expórtalo con el plugin de Figma de transjt a WordPress.
Lo que obtienes:
- Un tema nativo de WordPress con plantillas PHP. Sin plugin de page builder, y los archivos del tema son tuyos.
- Textos, imágenes y orden de las secciones que tu equipo cambia en el editor de WordPress, sin desarrolladores.
- Un blog nativo y formularios nativos.
- Diseños para escritorio, tablet y móvil incluidos.
- Listo en pocas horas, no en semanas.
Ideal para: agencias, equipos de marketing y cualquiera cuya web editen personas que no escriben código.
El inconveniente: es un producto de pago. Puedes empezar gratis y ver la vista previa antes de pagar; consulta los planes actuales en tarifas.
Los cinco caminos comparados
| Esfuerzo | Conocimientos | Marketing puede editar | Depende de | Ideal para | |
|---|---|---|---|---|---|
| Bloque HTML personalizado | Minutos | HTML básico | No | Nada, pero es un solo bloque de código | Una página desechable |
| Page builder | De horas a días | Saber usar el builder | Sí, en el builder | El plugin del builder y su licencia | Webs que ya usan un builder |
| Tema de bloques con Claude Code | De horas a días | Desarrollador | En parte, según el código | Tu propio tiempo de revisión | Desarrolladores que quieren control |
| Conversor de HTML a tema | De minutos a horas | WordPress básico | Compruébalo antes | Los archivos convertidos | Diseños estáticos, hosting rápido |
| transjt | Pocas horas | Ninguno | Sí, en el editor de WordPress | Sin page builder; los archivos del tema son tuyos | Webs que un equipo edita cada semana |
Situación a septiembre de 2026.
¿Qué camino elegir?
- Una landing page sin cambios futuros: pega el HTML.
- Tus webs ya funcionan con Elementor o Beaver Builder: quédate en el builder.
- Eres desarrollador y te gusta revisar: deja que Claude Code construya el tema de bloques.
- Un equipo o un cliente editará la web: conviértela en un tema nativo, con transjt o invirtiendo el tiempo de desarrollo del camino 3.
Y cuando la web esté en marcha, conecta Claude con ella (Parte 1), para que te ayude con el contenido a partir de entonces.
Cinco consejos para que lo creado con Claude se convierta bien
- Diseña con contenido real. Titulares e imágenes reales muestran pronto dónde se rompe un diseño.
- Carga primero tu sistema de diseño. Claude Design aplica tus colores, fuentes y componentes, y eso da a un conversor o a Claude Code estilos limpios y reutilizables.
- Piensa en secciones. Hero, servicios, testimonios, CTA: las secciones que se repiten se convierten en bloques reutilizables en WordPress.
- Diseña también el blog. Pide una página de listado y una de entrada, no solo la portada.
- Mantenlo estático. Los inicios de sesión, las bases de datos y la lógica de servidor no van en el diseño. Constrúyelos con plugins de WordPress.
Preguntas frecuentes
Sí. Las webs de WordPress.com usan el conector oficial de Claude, que es de solo lectura y necesita un plan de pago. Las webs autoalojadas con WordPress 6.9 o posterior usan el WordPress MCP Adapter oficial o un plugin que lo incluya.
No a través del conector de WordPress.com, que es de solo lectura. En una web autoalojada, Claude puede crear y actualizar contenido si la configuración MCP expone esas capacidades. Empieza en staging y revisa antes de publicar.
Sí. Claude Code puede escribir un tema de bloques con theme.json, plantillas y patrones de bloques. Cuenta con revisarlo: las primeras versiones suelen contener HTML en bruto que el equipo no puede cambiar en el editor del sitio.
No. A septiembre de 2026, Claude Design exporta a PDF, PowerPoint, HTML y Canva y pasa los proyectos a Claude Code. Entre sus conectores están Wix, Lovable, Replit y Vercel, pero no WordPress.
Sí. Puedes reconstruirlo a mano en Elementor, y Beaver Builder AI puede construir páginas a partir de un Claude Design con su conector MCP. La web depende entonces de ese page builder.
Depende del camino. Con HTML pegado, no. Con un page builder, sí, dentro del builder. Con un tema nativo de transjt, cambian textos, imágenes y el orden de las secciones en el editor de WordPress.
Sí. HubSpot tiene un conector oficial para Claude que también puede importar un Claude Design como landing page, y los mismos caminos con Claude Code y Figma llevan a un tema nativo de HubSpot con transjt.