WordPress Studio & AI

Del primer sitio al proyecto real

Tengo una idea

El Contexto

Necesitamos una web para un club tecnológico

Tenemos:

● Textos ● Actividades e ideas

Pero no tenemos lugar para construir o probar.

¿Qué nos frena más?



Configurar las herramientas



Escribir código



Diseñar



Saber cómo publicarlo

WordPress Studio

Entorno de desarrollo local simplificado



Gratuito y Open Source

Código abierto, desarrollado por Automattic.



Entorno Local

Crea y ejecuta sitios WordPress en tu computadora.



Multiplataforma

Disponible para sistemas Windows, macOS y Linux.



Sin Servidores

No necesitamos configurar servidores ni hosting.

Un sitio local en tu equipo

¿Cómo funciona un sitio local?

Un sitio local funciona en tu equipo. Una dirección como

http://localhost:8882/

no es por sí sola un enlace público: abrirla en otra computadora apunta a esa otra computadora, no a la tuya.



WordPress

El sistema con el que administras el contenido, los usuarios, los temas y los plugins.



Studio

La aplicación que prepara y gestiona el entorno local donde funciona WordPress.



Studio Code

El agente de IA que puede ayudarte a crear, investigar y modificar el proyecto.



Editor de bloques

La interfaz de WordPress para componer contenido. No es lo mismo que un editor de código ni que Git.

¿Qué hay debajo?

Estructura interna y componentes de tu sitio



Archivos y PHP

Archivos principales de WordPress y el motor PHP que los ejecuta.



Base de Datos SQLite

Guarda la información de tu sitio, contenidos y configuraciones.



Directorio wp-content

Lugar donde se organizan temas, plugins y archivos subidos.



Exploración Progresiva

No necesitas entenderlo todo el primer día, explóralo conforme avanzas.

¿Para qué lo puedo utilizar?



Aprender

Practicar con páginas, entradas, bloques, temas y plugins sin necesitar una web pública.



Construir

Preparar un portafolio, un blog, una web institucional o un proyecto para una comunidad.



Probar

Ensayar cambios antes de aplicarlos al sitio que ya está en Internet.



Desarrollar

Trabajar con archivos reales para crear temas, plugins o bloques y depurar errores.



Colaborar

Generar una vista previa temporal para recibir comentarios de docentes, compañeros o clientes.

¿Cómo empiezo?

Guía paso a paso para comenzar con WordPress Studio



1. Descarga e instala

Descarga e instala la aplicación desde el sitio oficial de WordPress Studio:

https://developer.wordpress.com/es/studio/



2. Añade un sitio

Añade un sitio y asígnale un nombre, por ejemplo «Club tecnológico».



3. Abre el escritorio

Abre el escritorio de WordPress para crear páginas, elegir un tema y editar con bloques.



4. Construye

Construye con el editor de bloques, con tu editor de código o con Studio Code. Puedes combinar los tres.



5. Revisa y comparte

Comparte una vista previa para comentarios. Requiere Internet y autenticación con WordPress.com.



6. Publica tu sitio

Publica cuando estés listo. Trabajar localmente no envía los cambios automáticamente a Internet.

Ventajas para un estudiante de Tecnología



Menos fricción al comenzar

Dedicas más tiempo al proyecto y menos a la configuración inicial. Eso no sustituye aprender cómo funcionan PHP, un servidor o una base de datos.



Ensayo, error y corrección

Pruebas código y diseños sin modificar directamente una web pública. Mantén copias de seguridad: trabajar localmente no elimina todos los riesgos.



Conexión entre asignaturas

Un mismo proyecto reúne programación, datos, seguridad, integración de sistemas, accesibilidad y experiencia de usuario.

Ventajas para un estudiante de Tecnología



IA como apoyo educativo

Puedes pedir explicaciones y ayuda para depurar. El aprendizaje ocurre al comprender, comprobar y corregir, no al aceptar código sin leerlo.



Evidencia para tu portafolio

Construyes un proyecto funcional y explicas qué problema resolviste, por qué elegiste esa solución y cómo verificaste el resultado.



Práctica profesional

Recorres requisitos, desarrollo local, pruebas, revisión, documentación y entrega, en lugar de limitarte a una captura del resultado.

Una herramienta, distintos perfiles



Desarrollo

HTML, CSS, JavaScript y PHP; interfaces, temas propios, plugins, bloques y depuración.



Ingeniería en Sistemas

Análisis de requisitos, arquitectura, organización de datos, APIs, permisos, pruebas y mantenimiento.



Tecnología

Comprender una solución de principio a fin; administrar contenido, evaluar herramientas, comprobar accesibilidad y explicar decisiones técnicas.



Ejemplo de proyecto

Una web para una asociación estudiantil con presentación, actividades y recursos. Después puedes ampliarla con una integración de API o un plugin propio, según tu nivel.



Para documentarlo

Registra el problema, los requisitos, tus decisiones técnicas, lo que desarrollaste tú, cómo utilizaste IA, las pruebas y las limitaciones pendientes.

¡Veamos las configuraciones generales!

Configurá tu entorno

Elegí tu editor de código, terminal y navegador. Studio abre tus sitios directo en las herramientas que ya usás.



Editor de código



Terminal



Navegador

Elegí tu proveedor de IA

Conectá un modelo para crear páginas, escribir contenido y personalizar temas y plugins desde el chat.



WordPress.com

Con créditos gratis para empezar.



Claude (Anthropic)

Conectá tu propia API key.

Panel de proveedores de IA de WordPress Studio.

Habilidades para tu agente

Activá guías especializadas para que la IA desarrolle mejor en tu entorno de trabajo.



Desarrollo especializado

Plugins, bloques, temas de bloques, REST API y WP-CLI.



Alcance flexible

Aplican a todos tus sitios globales o a uno en particular.

Panel de habilidades especializadas para el agente.

Instrucciones personalizadas

Define estándares de código, herramientas preferidas y estilo de respuesta para tu entorno.



Reglas de respuesta

Ajustá herramientas preferidas y estándares de código.



Alcance flexible

Podés configurarlas para todos los sitios o para uno específico.

Panel de instrucciones personalizadas de Studio.

Conectá otros asistentes con MCP

Instalá el Studio CLI y agregá la configuración a tu asistente de IA para crear, configurar e inspeccionar tus sitios locales desde ahí.



Instalación del CLI npm install -g wp-studio



Configuración del asistente

Vinculá el servidor MCP con tu cliente de IA.

Instalación del CLI y configuración del servidor MCP.

Controlá tu uso

Revisá tus créditos de IA, recargá cuando los necesités y gestioná tus sitios de vista previa para compartir avances.



Créditos de IA

Monitoreá tu consumo y recargá saldo.



Sitios de vista previa

Administrá y compartí desarrollos fácilmente.

Panel de uso: créditos de IA y vistas previas.

Instrucciones según lo que quieres aprender



Comprender:

«Explícame cómo está construido este sitio y la diferencia entre página y entrada. No modifiques nada todavía».



Crear contenido:

«Prepara una página Sobre nosotros con estos datos. No inventes información».



Mejorar el diseño:

«Mejora la legibilidad y el contraste sin cambiar la identidad visual. Conserva el encabezado y el pie».



Desarrollar:

«Ayúdame a crear un plugin sencillo. Explica primero la estructura, trabajemos por etapas y muéstrame cómo probarlo».



Investigar un error:

«Revisa por qué este elemento no funciona. Primero explícame la causa y la solución propuesta».



Tú conservas el criterio técnico.

La IA puede proponer código incorrecto, datos inventados o una solución innecesariamente compleja. No compartas contraseñas, claves de API ni datos personales en las instrucciones.

Ilustración del aprendizaje y desarrollo web asistido por IA.

Del chat a una página que puedes editar

Proyecto de demostración: Página para un club tecnológico

01. Crear y reconocer el entorno

02. Dar una instrucción completa

03. Comprobar que es editable

04. Pedir una mejora concreta

05. Revisar antes de compartir o pasar a producción

Ver el prompt del proyecto

Infografía de las cinco etapas del proyecto de demostración.

La demostración, paso a paso

Abrir el prompt de la demostración

¿Qué le falta al sitio?

04 Pedir una mejora concreta

Especifica los ajustes o cambios puntuales para optimizar la estructura, diseño o interacción del sitio.



05 Revisar antes de compartir o pasar a producción

Haz una verificación exhaustiva de enlaces, responsividad y funcionamiento general previa a la publicación.



Del laboratorio a una entrega responsable

El flujo (requisitos, desarrollo local, pruebas, revisión, publicación y mantenimiento) requiere planificación y responsabilidad. Studio facilita el entorno, pero diferencia tres etapas: