Crea un plugin de WordPress con IA (Cursor + WordPress Studio)

A principios de año os mostramos cómo utilizar Claude Code con WordPress Studio para da vida a vuestro próximo plugin. Aunque Claude Code es una muy buena opción, puede ser un poco intimidante si no estás muy familiarizado con el terminal.

Afortunadamente, existe un editor de código con IA llamado Cursor que ofrece una opción gratuita para probarlo. Desde su creación en 2023, ha jugado un papel clave en la explosión del movimiento vibe coding, y todavía es una de las herramientas de código con IA más populares.

En esta guía vamos a repasar los pasos a seguir para instalar Cursor y WordPress Studio y utilizarlos para crear tu primer plugin generado con inteligencia artificial.

¿Por qué utilizar la IA para crear plugins de WordPress?

Con las herramientas de código con IA, puedes describir lo que quieres que haga tu plugin utilizando un lenguaje natural y tener una versión operativa en cuestión de minutos: sin tener que escribir PHP desde cero o aprender a utilizar la API de los plugins de WordPress.

Junto a un entorno de WordPress local gratuito, puedes crear, probar y refinar un plugin en tu propio ordenador, antes de que toque nunca una web activa. Esta guía utiliza Cursor, un conocido editor de código con IA, y WordPress Studio.

Necesitarás

• Cursor (plan Hobby gratuito).
• WordPress Studio (gratis, de código abierto).
• Unos 15 minutos.
• Ninguna experiencia previa en código.

1. Instalar Cursor

Para instalar Cursor, hay que visitar su página de descargas y descargar el instalador adecuado para tu sistema operativo. Una vez descargado, ejecuta el instalador y sigue las instrucciones.

La primera vez que abras Cursor, se te pedirá que registres una cuenta de Cursor para acceder a las funciones del agente de IA. Cursor ofrece un plan Hobby gratuito que puedes utilizar para hacer tu primera creación.

Una vez hayas registrado tu cuenta, volverás a la aplicación de Cursor. Es posible que te sugiera instalar algunos plugins, según los requisitos más comunes. Puedes saltarte para este paso para ir directamente a la pantalla donde abrir tu primer proyecto.

2. Instalar WordPress Studio

Ahora necesitarás una instalación local de WordPress. Puedes descargar WordPress Studio, que es una aplicación de código abierto completamente gratuita que funciona en macOS, Windows y Linux.

Igual que con Cursor, descarga el instalador de WordPress Studio, ejecútalo y sigue las instrucciones en pantalla.

Cuando ya tengas listo Studio, crea un nuevo sitio local de WordPress haciendo clic en el botón Añadir sitio. Selecciona Crear un sitio y, después, Sitio vacío. En la pantalla de Añadir sitio puedes ponerle el nombre que quieras, pero también puedes dejar el que viene por defecto.

Cuando se haya creado el sitio, haz clic en la pestaña Ajustes y anota el valor de la ruta local. Ahí es donde están ubicados en tu ordenador los archivos de WordPress que tendrás que abrir en Cursor.

3. Abrir el sitio local de WordPress Studio en Cursor

En Cursor, haz clic en el botón Open project («abrir proyecto») y ve a la ubicación de los archivos de WordPress del paso anterior.

Aparecerán los archivos de WordPress en un panel, y el chat del agente en el otro.

Como Cursor es un fork del editor VS Code, si ya tienes VS Code instalado, es posible que Cursor adopte los ajustes de distribución de VS Code.

4. Crear tu plugin con el agente de Cursor

En la ventana de chat del agente, pídele que cree tu primer plugin. Dale algo de contexto y dile lo que necesitas que haga:

Estamos en la raíz de la carpeta de un sitio de WordPress. Crea un plugin que añada un widget de bienvenida. En el widget solo debe aparecer el encabezado ¡Bienvenido!

Dale a Intro o haz clic en el botón Submit («enviar»), y Cursor se encargará de comprobar el entorno, crear la carpeta del plugin y generar el archivo completo del plugin.

Para revisar el código generado, haz clic en Review («revisar»), o, si quieres aceptar los archivos del nuevo plugin, haz clic en Keep all («mantener todo»).

5. Activar y probar el plugin

Vuelve a WordPress Studio y haz clic en el WP Admin para abrir el escritorio de administración de WordPress. Ve a la sección Plugins, busca tu nuevo plugin y actívalo.

Una vez activado, ve a tu escritorio y verás el widget con el mensaje de bienvenida. Puedes moverlo al lugar que prefieras.

6. Darle vida a tu plugin

Ahora es el momento de añadir más funcionalidades. Podrías hacer que este widget mostrase un mensaje diferente a cada usuario según su rol.

Vuelve a Cursor y pídele que lo haga por ti.

Actualiza el plugin del widget de bienvenida para que muestre un mensaje de bienvenida al usuario según su rol. Describe qué acciones puede realizar el usuario en la web.

Como con cualquier herramienta de IA, lo mejor que puedes hacer para conseguir mejores resultados es experimentar con diferentes prompts.

Conectar Cursor al servidor MCP de WordPress.com

A lo mejor quieres instalar el plugin del widget de bienvenida que has creado en tus sitios de WordPress.com. Aunque cada sitio tiene sus propios roles de usuario de WordPress predeterminados (administrador, editor, autor, colaborador y suscriptor), quizá tengas alguna web con otros roles. Por ejemplo, una tienda de WooCommerce también tiene los roles de Cliente y Gestor de la tienda.

Afortunadamente, puedes utilizar el servidor MCP de WordPress.com para conectar tu agente de Cursor a WordPress.com y pedirle que eche un vistazo a los roles que hay.

Si todavía no lo has hecho, activa el acceso MCP de tu cuenta de WordPress.com.

Conecta el agente de Cursor a WordPress.com desde el directorio de plugins de Cursor buscando «WordPress.com».

Cuando hayas localizado el conector, haz clic en él, y luego en el botón Add to Cursor («añadir a Cursor»).

Al hacerlo, se abrirá la pantalla de ajustes de Cursor para instalar el servidor MCP. Haz clic en Install («instalar») para instalar y configurar el conector.

Se abrirá una nueva ventana del navegador y te pedirá que autorices la conexión. Al aceptar, se activará la conexión al servidor MCP.

Ahora le puedes pedir a tu agente que interactúe con tu cuenta de WordPress.com.

Por ejemplo:

Comprueba todos mis sitios de WordPress.com y revisa si hay roles de usuario personalizados que haya que tener en cuenta para actualizar este plugin y que funcione en todos mis sitios de WordPress.com.

El agente de Cursor utilizará la conexión MCP de WordPress.com para comprobar tus sitios. Puede que te haga algunas preguntas para aclarar algunos detalles relacionados con los entornos y la propiedad de los sitios.

Respóndele para darle más información:

Solo sitios de producción y solo sitios de los que soy propietario.

Cursor utilizará la conexión para consultar tus sitios, determinar si hay algún rol personalizado en juego y actualizar el plugin, si es necesario.

¿Qué plugin vas a crear?

Cursor + WordPress Studio + el MCP de WordPress es una combinación de herramientas muy potente e ideal para darle vida a tu próximo plugin.

Algunos consejos a la hora de utilizar la IA para crear plugins:

• Siempre es mejor probar el plugin primero en una instalación de WordPress local.
• Dale al agente todo el contexto específico sobre lo que quieres hacer y qué funcionalidades quieres incluir.
• Separa las funcionalidades más complejas en pasos más sencillos con prompts específicos.
• Si hay algo que no tengas claro, puedes pedirle al agente que te lo explique.
• Aprende a utilizar herramientas de control de calidad del código y linters para ayudar al agente a buscar errores en el código.
• Empieza poco a poco y encara proyectos más complejos cuando te vayas familiarizando con el sistema.

¡No dudes en compartir con nosotros tus creaciones en los comentarios!