Login

Cómo crear sitios web en WordPress con Claude Code

¿Quieres navegar por este articulo del blog sin perderte? Gracias a la tabla de contenidos, podrás encontrar rápidamente la información que buscas. Cada entrada está organizada de forma clara y concisa, para que puedas leer a tu propio ritmo y sin distracciones

Una guía práctica para contratistas y negocios de construcción que quieren un sitio web profesional, sin perderse en tecnicismos.

¡Hola! 👋 Si alguna vez pensaste que crear un sitio web en WordPress es cosa de «otros» — de programadores con años de experiencia — te tengo una buena noticia: con Claude Code, ese proceso se vuelve muchísimo más accesible. En esta guía vamos a construir, paso a paso, un sitio web para un negocio de construcción: desde cómo organizar las páginas hasta cómo dejarlo listo para que Google lo encuentre.

Vamos a caminar juntos por todo el proceso, así que ten a la mano una taza de café y sigamos los pasos en orden. Al final vas a tener un mapa completo (y un sitio funcionando) para replicarlo con tus propios clientes o tu propio negocio.

A lo largo de la guía vas a ver capturas de cómo se ve cada pantalla en la práctica — la terminal de Claude Code, el listado de páginas en WordPress y los campos de SEO — para que sepas exactamente qué esperar cuando llegues a ese paso.

Lo que vas a lograr con este tutorial

• Entender qué es Claude Code y por qué es una gran herramienta para construir en WordPress.
• Definir la arquitectura ideal de un sitio para el sector de la construcción.
• Preparar tu entorno de trabajo antes de escribir una sola línea de código.
• Construir la estructura y las páginas del sitio con ayuda de Claude Code.
• Dejar el sitio optimizado en SEO desde el primer día.
• Revisar y publicar tu sitio con confianza.

Paso 1: ¿Qué es Claude Code y por qué usarlo para WordPress?

Claude Code es un asistente de programación que trabaja directamente en tu computadora, dentro de una terminal (una ventana de comandos, nada aterrador, lo prometo). Tú le describes lo que quieres lograr — por ejemplo, «crea la estructura de páginas para un sitio de remodelación de cocinas» — y él lee tus archivos, los edita, instala lo necesario y te muestra los cambios antes de aplicarlos.

La gran diferencia con un chat normal es que Claude Code no solo te da instrucciones para copiar y pegar: él mismo ejecuta las tareas dentro de tu proyecto. Para alguien que construye sitios web para el sector de la construcción, esto significa menos tiempo perdido buscando tutoriales sueltos y más tiempo entregando sitios terminados.

🖥️ Lo que vas a ver en pantalla: Una ventana de terminal oscura donde vas escribiendo lo que necesitas en español o inglés, y ves cómo se van creando o editando archivos en tiempo real.

💡 Tip: No necesitas saber programar para empezar. Sí ayuda ir aprendiendo poco a poco los conceptos básicos de WordPress (temas, plugins, páginas) — y de eso también hablamos en esta guía.

Paso 2: Lo que necesitas antes de empezar

Antes de abrir la terminal, arma tu «kit de trabajo». Con esto listo, todo el proceso fluye mucho más rápido:

1. Una cuenta activa que incluya Claude Code (plan Pro, Max o Console de Anthropic).
2. Node.js instalado en tu computadora, o el instalador nativo de Claude Code (no necesitas ser experto, solo seguir el instalador).
3. Un entorno local de WordPress para probar antes de publicar (por ejemplo, Local by Flywheel) o acceso a tu hosting.
4. Un tema base — nosotros trabajamos con Astra + Spectra (Gutenberg), liviano y fácil de personalizar.
5. Claridad sobre el negocio: ¿remodelaciones, construcción nueva, servicios de precons­trucción? Esto define tus páginas y tus palabras clave.

✅ Recapitulando: Ya sabes qué es Claude Code y tienes tu kit de trabajo listo. Ahora toca lo divertido: diseñar el mapa de tu sitio.

Paso 3: Define la arquitectura de tu sitio

Antes de crear una sola página, necesitas el plano. Piensa en la arquitectura de tu sitio como los planos de una casa: si están bien pensados desde el inicio, todo lo demás se construye más rápido y sin retrabajos.

Para un negocio de construcción, esta estructura suele funcionar muy bien:

💡 Tip: Si tu negocio ofrece varios servicios (remodelación, techos, precons­trucción), crea una página hija por cada servicio dentro de «Servicios». Así cada especialidad puede tener su propio contenido y su propio SEO, y además te sirve después para anuncios pagados.

✅ Recapitulando: Ya tienes el mapa de páginas de tu sitio, pensado específicamente para cómo compran los clientes de construcción: confianza, portafolio y una forma fácil de pedir presupuesto.

Paso 4: Prepara tu WordPress y conecta Claude Code

Con el mapa en mano, es momento de preparar el terreno.

4.1 Instala WordPress

1. Si vas a probar en local, instala WordPress con Local by Flywheel (o similar) en un par de clics.
2. Si ya tienes hosting, entra a tu panel y confirma que WordPress esté instalado y accesible.
3. Instala el tema (por ejemplo Astra) y el constructor de bloques (por ejemplo Spectra) desde Plugins → Añadir nuevo.

4.2 Instala y conecta Claude Code

1. Abre la terminal de tu computadora.
2. Instala Claude Code siguiendo el instalador oficial de Anthropic para tu sistema (Mac, Windows o Linux).
3. Inicia sesión con tu cuenta cuando el navegador te lo pida.
4. Navega, dentro de la terminal, hasta la carpeta de tu proyecto de WordPress y escribe simplemente: claude

🖥️ Lo que vas a ver en pantalla: La terminal se abre, te pide iniciar sesión en el navegador, y al volver ya puedes escribirle instrucciones directamente, como si le mandaras un mensaje a un colega. Así se ve una instrucción real y su resultado:

Así se ve en la práctica una sesión de Claude Code creando el menú de navegación del sitio.

✅ Recapitulando: Tu WordPress está instalado y Claude Code ya está conectado a la carpeta de tu proyecto. A partir de aquí, todo lo construimos con instrucciones en lenguaje natural.

Paso 5: Crea el «cerebro» del proyecto (CLAUDE.md)

Este paso es una de las diferencias que más se sienten al trabajar con Claude Code: puedes crear un archivo llamado CLAUDE.md en la raíz de tu proyecto. Ahí anotas el contexto de tu sitio — el tema que usas, los colores de marca, el tono del negocio, la estructura de páginas que definiste en el Paso 3 — para que Claude Code lo lea automáticamente en cada sesión y no tengas que repetirte.

1. Dentro de la terminal, escribe: /init — esto genera un CLAUDE.md inicial basado en tu proyecto.
2. Edítalo y agrega: nombre del negocio, colores de marca, tono de comunicación y la lista de páginas planeadas.
3. Guarda el archivo. Claude Code lo leerá cada vez que trabajes en ese proyecto.

💡 Tip: Piensa en el CLAUDE.md como el brief que le darías a un diseñador nuevo el primer día: mientras más claro seas, menos vueltas vas a dar después.

Paso 6: Construye la estructura y las páginas

Con el terreno preparado, ahora sí — manos a la obra. Aquí es donde le vas pidiendo a Claude Code, paso a paso, que vaya creando lo que planeaste:

1. Pide que configure la navegación principal con las páginas de tu arquitectura (Inicio, Nosotros, Servicios, Proyectos, Contacto…).
2. Pide que cree las páginas hijas de Servicios, una por cada especialidad de tu negocio.
3. Ve construyendo cada página por bloques: encabezado con tu propuesta de valor, sección de servicios, portafolio de proyectos, testimonios y un llamado a la acción claro (ej. «Agenda tu presupuesto gratis»).
4. Revisa cada cambio en tu navegador local antes de pasar a la siguiente página — así detectas ajustes de inmediato.

🖥️ Lo que vas a ver en pantalla: Cada vez que le pides algo a Claude Code, te muestra qué archivos va a tocar y qué cambios va a hacer, antes de que tú confirmes. Tú siempre tienes el control final. Así se ve el listado de páginas ya creado en tu escritorio de WordPress:

Las páginas del sitio, ya creadas y publicadas, dentro del escritorio de WordPress.

✅ Recapitulando: Tu sitio ya tiene estructura, navegación y contenido base en cada página. El esqueleto está listo — ahora vamos a asegurarnos de que Google también lo entienda.

Paso 7: Optimiza el SEO paso a paso, para crear sitios web.

De nada sirve un sitio hermoso si nadie lo encuentra. Aquí es donde el trabajo de hoy se convierte en clientes mañana.

1. Define una palabra clave (keyphrase) principal por página. Ejemplo: «remodelación de cocinas en Florida» para tu página de ese servicio.
2. Escribe un título SEO y una meta descripción claros para cada página, incluyendo tu ciudad o zona de servicio.

El título SEO es el texto azul que la gente ve como enlace en Google, y la meta descripción es el resumen gris debajo. No son lo mismo que el título visible de tu página: son campos aparte (los llenas en tu plugin de SEO, como Yoast o Rank Math) pensados para convencer a alguien de hacer clic. Un buen título SEO incluye el servicio + la ciudad; una buena meta descripción incluye el beneficio + una llamada a la acción, en menos de 155 caracteres. Por ejemplo, para una página de remodelación de cocinas:

Así se ven el Título SEO y la Meta descripción para una página de servicio, tal como se ven en el panel de tu plugin de SEO y en el resultado de Google.

3. Agrega texto alternativo (alt text) descriptivo a cada foto de proyectos — además de ayudar al SEO, hace tu sitio más accesible.

El alt text es una frase corta que describe lo que hay en la imagen, y se escribe en el campo «Texto alternativo» cuando subes la foto a tu Biblioteca de medios. Google no «ve» tus fotos como las ves tú — lee este texto para entender de qué tratan, y también se lo lee a las personas que usan lectores de pantalla. La regla es simple: describe la imagen como si se la explicaras a alguien por teléfono, incluyendo el servicio y la ciudad cuando aplique. Por ejemplo, para la foto de una cocina terminada:

Así se ve un texto alternativo (alt text) bien escrito para una foto de proyecto, dentro de la Biblioteca de medios de WordPress.

4. Pide a Claude Code que revise la estructura de encabezados (H1, H2, H3) de cada página, para que siga un orden lógico.
5. Configura los datos de negocio local (nombre, dirección, teléfono) de forma consistente en todo el sitio, ya que en construcción la búsqueda local es clave.
6. Genera y envía tu sitemap XML a Google Search Console una vez publicado.

Google Search Console es una herramienta gratuita de Google que te dice, en números reales, cómo le está yendo a tu sitio: qué páginas ya indexó, con qué palabras te está encontrando la gente, si hay errores técnicos que te están costando visitas, y qué tan rápido carga tu sitio en celular. Sin ella estás construyendo «a ciegas»: con ella sabes exactamente qué está funcionando y qué ajustar. Por eso es el último paso de esta sección — es tu tablero de control para todo el trabajo de SEO que acabas de hacer.

💡 Tip: En el sector de la construcción, la gente busca por ciudad y por servicio específico («techos en Cape Coral», no solo «techos»). Entre más específicas sean tus palabras clave, más fácil te van a encontrar los clientes correctos.

✅ Recapitulando: Tu sitio ahora no solo se ve bien: está preparado para que Google lo entienda y lo muestre a las personas correctas en el momento correcto.

Paso 8: Revisa, prueba y publica

1. Navega el sitio completo como si fueras un cliente: ¿es fácil pedir un presupuesto desde cualquier página?
2. Revisa que se vea bien en celular — la mayoría de tus visitantes va a entrar desde ahí.
3. Pide a Claude Code que revise enlaces rotos o textos pendientes antes de publicar.
4. Haz una copia de seguridad de tu sitio local o de staging.
5. Publica y comparte el enlace con tu equipo o tus primeros clientes para recibir sus comentarios.

✅ Recapitulando: ¡Listo! Ya tienes un sitio de WordPress construido con ayuda de Claude Code, con una arquitectura pensada para el sector de la construcción y una base sólida de SEO.

Para cerrar

Este proceso, contado así, suena a mucho — pero en la práctica se hace en bloques cortos y muy manejables. La clave está en tener claro el mapa del sitio (Paso 3) y en dejar que Claude Code se encargue de la parte técnica mientras tú te enfocas en el contenido y la estrategia.

¿Te animas a construir el tuyo? Guarda esta guía, síguela paso a paso con tu propio proyecto, y si te trabas en algún punto, siempre puedes volver a revisar la sección correspondiente.

Extra: otras formas de usar Claude Code

Todo lo que vimos en esta guía usa Claude Code desde la terminal, pero no es la única forma de trabajar con él. Vale la pena que sepas que también existen estas dos variantes, por si te encuentras con ellas o te acomodan mejor:

• Integrado en un editor de código (como VS Code): Claude Code puede vivir directamente dentro de tu editor, en un panel lateral, mientras ves y editas los archivos del proyecto al mismo tiempo. Es la misma herramienta, solo que con el código y el chat lado a lado.

Claude Code by Anthropic | AI Coding Agent, Terminal, IDE

• Como app de escritorio: también existe una versión con su propia ventana, pensada para gestionar varios proyectos, ver la actividad reciente y las novedades sin pasar por la terminal.

Para esta guía nos quedamos con la terminal porque es la forma más simple de empezar, pero si más adelante te sientes cómoda con Claude Code, explorar estas otras opciones puede hacerte el flujo de trabajo aún más cómodo.

Sigue aprendiendo

• Próximo tutorial sugerido: cómo estructurar tu página de Servicios en categorías para negocios de construcción.