Contáctame

Crea Tu Tema WordPress con Claude Sonnet 4 (100% Gratis y Sin VS Code)

Crea Tu Tema WordPress con Claude Sonnet 4 (100% Gratis y Sin VS Code)

Inhoudsopgave

🚀 Introducción: por qué usar Claude Sonnet 4 para crear temas WordPress

Hola, soy Rodrigo Olivares y en esta guía te voy a enseñar paso a paso cómo crear un tema WordPress totalmente personalizado usando Claude Sonnet 4 (también llamado CloudSonet en el video). Lo mejor: no necesitas instalar VS Code, Windsorf, Cursor ni ningún editor de código local. Todo lo haremos directamente desde la nube y desde el panel de hosting. Si estás buscando una forma rápida, limpia y accesible de generar un tema profesional para un negocio —por ejemplo un bufete de abogados— este tutorial es para ti.

En este tutorial utilizo un prompt optimizado que ya diseñé para que la IA genere todos los archivos que WordPress espera en un tema: style.css, functions.php, header.php, footer.php, index.php, single.php, page.php y otros archivos base. Te explicaré cómo usar ese prompt, cómo ejecutar Claude Sonnet 4 (gratuito), cómo instalar WordPress en Hostinger, cómo subir el tema al servidor y cómo solucionar problemas básicos que puedan aparecer al activar el tema.

Antes de comenzar, aquí tienes las herramientas y enlaces que utilizo:

  • Hostinger con descuento: http://hostinger.com/rodrigo
  • Claude (Claude Sonnet 4 / CloudSonet): https://claude.ai
  • Prompt (copia del documento que uso en el video): https://docs.google.com/document/d/1p_VOt66QE5813q4RqJKsM1akhXjF_0F2M31p9laoNe8/copy

Además, si quieres profundizar en WordPress y monetización, te dejo algunos recursos útiles de mi sitio que complementan este tutorial (links incluidos más abajo en el contenido): guías para crear webs nicho, tutoriales de WordPress para principiantes, estrategias SEO para abogados, y más.

Prompt optimizado en CloudSonet listo para pegar

🧰 Preparación: qué necesitas y cómo configurar tu entorno

Antes de pedirle a Claude que genere el tema, tenemos que preparar unos elementos y decisiones básicas. Esto evita iteraciones largas y te ayuda a sacar el máximo provecho del plan gratuito del modelo. Aquí tienes lo que necesitas y por qué.

Qué necesitas

  • Cuenta en Claude (o CloudSonet) — puedes registrarte gratis en https://claude.ai.
  • Cuenta de hosting con acceso a administrador de archivos (recomiendo Hostinger para seguir este tutorial): http://hostinger.com/rodrigo.
  • WordPress instalado en el hosting (lo veremos paso a paso).
  • El prompt base que yo uso para generar temas: https://docs.google.com/document/d/1p_VOt66QE5813q4RqJKsM1akhXjF_0F2M31p9laoNe8/copy (haz una copia y personalízalo).
  • Un nombre de tema y la información básica del sitio (título, descripción, tipo de negocio —en este caso, un bufete de abogados—).

Explicación breve de por qué cada elemento es importante:

  • Claude Sonnet 4: es el modelo que genera el código y los archivos. El prompt debe ser preciso porque el plan gratuito tiene límites de uso y de longitud de mensajes.
  • Hostinger: el panel (hPanel) nos permite subir directamente la carpeta del tema a wp-content/themes a través del administrador de archivos; esto hace todo muy práctico.
  • Prompt optimizado: evita que la IA genere código innecesario o que se salga del formato que WordPress espera.

Consejo práctico: antes de ejecutar el prompt, abre el documento de copia, rellena los campos que te pido (nombre del tema, tipo de negocio, detalles del sitio) y no modifiques las reglas técnicas si no estás seguro. El prompt incluye reglas estrictas para que la IA entregue archivos con la estructura correcta.

Documento del prompt con instrucciones para crear el tema

⚙️ Paso 1 — Usar el prompt en Claude Sonnet 4

Este es el corazón del proceso. La idea es que pegues el prompt completo en la conversación con Claude Sonnet 4, llenes los campos con la información del sitio (por ejemplo, «Justicia y Derecho» para el nombre del tema, y «bufete de abogados» como tipo de sitio) y ejecutes. La IA generará cada archivo del tema de forma separada para que puedas descargarlos fácilmente.

Cómo ejecutar el prompt correctamente

  1. Copia el contenido del documento prompt: https://docs.google.com/document/d/1p_VOt66QE5813q4RqJKsM1akhXjF_0F2M31p9laoNe8/copy y crea una copia para ti.
  2. Rellena las secciones iniciales del prompt con la información de tu sitio (nombre del tema, tipo de web, descripción breve, colores si quieres, qué librerías usar o no, etc.).
  3. En Claude, selecciona el modelo Cloud Sonet 4 y pega todo el prompt. Haz clic en enviar.
  4. La IA empezará a generar los archivos. Si la respuesta se pausa por límite de longitud, usa el botón «Continuar» para que siga entregando el resto.

Un punto importante: el prompt no es una sola línea. Está optimizado con reglas y estructura para que la IA entregue archivos válidos para WordPress (headers, comentarios en style.css, funciones mínimas en functions.php, etc.). Probé muchas versiones hasta llegar a esta, así que úsalo tal cual o con cambios mínimos en la parte descriptiva.

Pegar el prompt optimizado en la conversación con Claude

🗂️ Paso 2 — Descargar los archivos que genera Claude

Claude te dará cada archivo por separado (style.css, functions.php, header.php, footer.php, index.php, single.php, page.php, etc.). La interfaz permite descargarlos directamente en los formatos adecuados. Guarda todos esos archivos en una carpeta que luego subiremos a wp-content/themes.

Qué archivos esperar y por qué

  • style.css: contiene los metadatos del tema (nombre, autor, versión) y estilos base.
  • functions.php: registro de scripts y estilos, soporte para menús, thumbnails, widgets, etc.
  • header.php y footer.php: estructura del encabezado y pie del tema.
  • index.php, single.php, page.php: plantillas para la lista de posts, entradas individuales y páginas.
  • Otros archivos opcionales que puedes pedir en el prompt: templates parts, home.php, 404.php, archive.php.

Hay veces que Claude puede pausar la respuesta por alcanzar el límite máximo de longitud. Si eso pasa, pulsa «Continuar» hasta obtener todos los archivos completos. Asegúrate de descargar la versión final y más reciente de cada archivo (a veces el modelo corrige y publica versiones mejoradas).

Descarga de style.css desde la respuesta de Claude

📁 Paso 3 — Instalar WordPress en Hostinger (rápido y limpio)

Mientras Claude genera el tema, instalaremos WordPress en Hostinger. En el video uso Hostinger porque su panel hPanel facilita crear un sitio en blanco sin instalaciones de temas extra que podrían entorpecer el desarrollo del tema personalizado.

Pasos para instalar WordPress en Hostinger

  1. Accede a tu cuenta de Hostinger (o regístrate): http://hostinger.com/rodrigo.
  2. En el panel, haz clic en «Añadir sitio web» y elige WordPress.
  3. Define una contraseña (puedes generar una automática) y sigue el asistente.
  4. Selecciona «Crear un sitio web en blanco» — así no habrá tema o plugins extra que contaminen la instalación.
  5. Si necesitas un dominio definitivo, puedes usar uno real; mientras pruebas, Hostinger permite dominios temporales.

Al elegir un sitio en blanco te aseguras de que solo estén los archivos de WordPress y, cuando subas tu tema, verás el resultado sin elementos extra. Además, hPanel tiene un administrador de archivos muy cómodo para subir carpetas y archivos directamente a public_html/wp-content/themes.

Asistente de instalación de WordPress en Hostinger

🔼 Paso 4 — Subir el tema a wp-content/themes y activarlo

Ya con WordPress instalado y todos los archivos descargados desde Claude, es momento de subir la carpeta del tema a tu servidor Hostinger. Aquí te explico cómo hacerlo paso a paso desde el administrador de archivos (hPanel).

Subir la carpeta del tema

  1. Entra a hPanel y abre el Administrador de archivos.
  2. Navega a public_html/wp-content/themes.
  3. Crea una carpeta nueva con el nombre del tema (por ejemplo, «justicia-y-derecho») o arrastra la carpeta que ya hayas creado localmente.
  4. Asegúrate de que dentro de esa carpeta estén todos los archivos generados por Claude: style.css, functions.php, header.php, footer.php, index.php, single.php, page.php, etc.
  5. Una vez subidos, en el panel de WordPress ve a Apariencia -> Temas y activa tu nuevo tema.

Si todo salió bien, el tema debería aparecer en la lista de temas con el nombre que pusiste en style.css. Hice esto en el video y el tema apareció como «Justicia y Derecho» porque ese fue el nombre que incluí en el prompt.

🩺 Paso 5 — Primer arranque y diagnóstico: qué hacer si la web se ve desordenada

Es muy común que al activar un tema recién creado la apariencia inicial no sea perfecta: estilos que no cargan, elementos desordenados o CSS faltante. Esto sucede por diversas razones (rutas a archivos incorrectas, dependencias de librerías como Tailwind, scripts no encolados correctamente, o caché). Aquí te explico cómo diagnosticar y resolver los problemas más comunes.

Diagnóstico inicial

  • Visita la página pública del sitio (Visitar sitio) y observa cómo se muestra.
  • Toma una captura de pantalla del estado actual: es útil para pasarle a la IA y pedirle que identifique el problema.
  • Revisa la consola del navegador (F12) para errores de JavaScript o para fallas en la carga de CSS/JS (404, 500).
  • Revisa functions.php para ver si los estilos y scripts se están encolando (wp_enqueue_style, wp_enqueue_script) con las rutas correctas.

En el video, activé el tema y la página se veía «desordenada»: las cosas estaban ahí pero sin estilos. Tomé una captura y se la pegué a Claude para que analizara la imagen y detectara posibles causas. La IA identificó que podía ser un problema con Tailwind (una librería CSS que había incluido en el prompt), y por eso ofreció una corrección.

Soluciones comunes

  1. Verifica que style.css tenga la cabecera correcta: la primera parte de style.css debe incluir Theme Name, Theme URI, Author, Description, Version. WordPress usa eso para identificar el tema.
  2. Asegúrate de encolar CSS y JS correctamente en functions.php usando get_template_directory_uri() o get_stylesheet_directory_uri() para formar las rutas absolutas correctas.
  3. Comprueba dependencias externas: si usas Tailwind o librerías CDN, confirma que las llamadas a los CDN están presentes y no bloqueadas.
  4. Desactiva el caché en el hosting mientras desarrollas; esto evita ver versiones antiguas de archivos.
  5. Revisa versiones entregadas por Claude: a veces la IA genera varias versiones de un archivo; asegúrate de usar la versión final (la más reciente).
  6. Corrige rutas y permisos si algún archivo no carga (404) o aparece bloqueado.

Consejo: siempre ve desde abajo hacia arriba al revisar versiones de archivos generadas por Claude. Por ejemplo, si functions.php tuvo varias iteraciones, baja la versión más reciente y reemplaza la anterior en la carpeta del tema.

🔧 Paso 6 — Pedir a Claude que corrija errores (debug con imagen)

Una ventaja práctica de usar Claude es que puedes pegar una captura de pantalla del problema y pedirle que identifique y corrija errores. En el video hice exactamente eso: tomé una captura del sitio desordenado, la pegué en la conversación con Claude y le pedí que corrigiera el tema para que se viera bien en WordPress.

Cómo pedir correcciones eficientemente

  1. Toma una captura clara del problema y cópiala al portapapeles (o súbela si la interfaz lo permite).
  2. Pega la imagen en la conversación con Claude y describe brevemente el problema: «Activé el tema en WordPress y se ve así; por favor, identifica la causa y corrige los archivos necesarios».
  3. Solicita cambios puntuales: por ejemplo, «Ajusta functions.php para encolar style.css correctamente y elimina la dependencia de Tailwind si no es estrictamente necesaria».
  4. Cuando Claude devuelva los archivos corregidos, descarga las versiones finales y reemplaza los archivos en tu carpeta del tema.

En mi experiencia, Claude pudo identificar que la librería Tailwind había sido añadida y que podía ser la causa del desorden. La solución fue ajustar el encolado y/o eliminar esa dependencia si no era necesaria para un tema simple y rápido.

🧪 Paso 7 — Reemplazar archivos con versiones finales y comprobar resultados

Tras recibir las versiones corregidas de los archivos, baja la versión final desde Claude y reemplaza los archivos en tu carpeta del tema dentro de wp-content/themes. En el video hice exactamente eso: actualicé functions.php, index.php, header.php y style.css con las versiones más recientes que entregó Claude.

Pasos a seguir

  1. En hPanel, entra a public_html/wp-content/themes/tu-tema.
  2. Sube los archivos corregidos y sobrescribe los anteriores.
  3. Desactiva el caché en el hosting durante la fase de desarrollo (esto evita que veas versiones antiguas).
  4. Visita el sitio y comprueba si el diseño se renderiza correctamente.

Si todavía hay problemas, repite la fase de debug con Claude: pega una captura nueva, pide análisis y correcciones puntuales. La combinación de capturas + prompt optimizado permite iterar rápido y aprovechar al máximo las sesiones gratuitas del modelo.

📝 Paso 8 — Añadir contenido de prueba (usar Hostinger AI para generar artículos)

Un tema puede parecer vacío si no tiene contenido. Para mostrar la sección de posts en el home o para probar la apariencia de listados, utilicé la funcionalidad de Hostinger que permite que un «agente» maneje la web y cree entradas. Esto fue súper práctico para generar publicaciones de prueba en segundos.

Cómo generar contenido de prueba rápidamente

  1. En Hostinger, ve a Herramientas y busca la opción que permite que un agente (AI) cree contenido en tu sitio.
  2. Pide que genere varios títulos relevantes para una web de abogados y que cree textos breves para cada uno.
  3. Solicita, por ejemplo, 5 artículos con títulos y textos cortos; una vez creados, estarán visibles en la sección de Entradas de WordPress.
  4. Revisa la página de inicio para confirmar que los artículos aparecen y que el tema los muestra correctamente.

En el video, pedí a Hostinger que generara 5 artículos y los puse en la página de inicio para que el layout pareciera real y no vacío. Esto me permitió revisar cómo se mostraban los listados, las imágenes destacadas (si las hay) y el estilo de las entradas.

📚 Configuración fina: ajustes en WordPress y organización del contenido

Un tema no lo es todo. Hay varios ajustes en el admin de WordPress que afectan cómo se muestra la web y que no se controlan desde el tema. Aquí te dejo los puntos clave que debes configurar después de activar tu tema personalizado.

Rellenar información del sitio

  • Ve a Ajustes -> Generales y completa el título del sitio y la descripción (ejemplo: «Olivares, Abogados»).
  • Esto hace que el header y otras partes del tema muestren la información correcta.

Categorías y entradas

  • Si quieres agrupar contenidos, crea categorías en Entradas -> Categorías (por ejemplo, «Guías»).
  • Asignar las entradas a categorías te permite mostrar listados organizados y mejorar la navegación.

Menus y widgets

  • Configura el menú en Apariencia -> Menús y asigna las ubicaciones que tu tema declara.
  • Agrega widgets en Apariencia -> Widgets si tu tema los soporta.

SEO y rendimiento

  • Instala Rank Math SEO o el plugin que prefieras para configurar títulos, descripciones y mapas del sitio (puedes leer más en: https://rodrigoolivares.com/rank-math-seo-instalacion-configuracion/).
  • Optimiza imágenes con plugins como Smush (más info sobre optimización de imágenes: https://rodrigoolivares.com/como-optimizar-las-imagenes-de-wordpress-automaticamente-con-smush/).
  • Desactiva caché en tiempo de desarrollo y activa minificación o caché solo cuando estés listo para producción.

🔁 Buenas prácticas y recomendaciones para mejorar tu tema

Crear el tema con Claude es solo el inicio. Te dejo recomendaciones para que tu tema sea robusto, mantenible y amigable con SEO y rendimiento:

  • Versiona los archivos: guarda versiones numeradas cada vez que Claude te entregue cambios (functions_v1.php, functions_v2.php) o usa tu propio control de versiones local antes de subir al servidor.
  • Minimiza dependencias: evita incluir librerías pesadas si no son necesarias. Tailwind puede ser útil, pero también complica la carga si no se configura correctamente.
  • Limpia el código: revisa functions.php para eliminar funciones innecesarias; deja solo lo esencial para el tema.
  • Optimiza imágenes y recursos: usa formatos modernos y tamaños adecuados para mejorar la carga.
  • Prueba en móviles y diferentes navegadores para asegurar compatibilidad.

Si necesitas guías complementarias sobre cómo crear sitios nicho, monetizarlos o usar IA en la creación de contenido, revisa estos artículos en mi blog que te ayudarán a dar los siguientes pasos:

  • Cómo crear un sitio web con WordPress (tutorial paso a paso): https://rodrigoolivares.com/como-crear-un-sitio-web-con-wordpress-tutorial-paso-a-principiantes/
  • Cómo hacer una web nicho en 20 minutos con IA: https://rodrigoolivares.com/como-hacer-una-web-nicho-en-20-minutos-usando-ia-tutorial-paso-a-paso/
  • Estrategias SEO para abogados (ideal para tu bufete): https://rodrigoolivares.com/estrategias-seo-para-abogados/
  • Cómo monetizar tu blog de forma efectiva: https://rodrigoolivares.com/como-monetizar-tu-blog-de-forma-efectiva/
  • Hostinger: qué debes saber antes de comprar: https://rodrigoolivares.com/hostinger-2023-lo-que-debes-saber-de-este-hosting-antes-de-comprar/

💡 Trucos y atajos que uso al crear temas con IA

Gente querida, aquí comparto algunos trucos prácticos que uso en mis procesos para acelerar y obtener mejores resultados usando IA para desarrollo web:

  • Prompt estructurado: divide el prompt en secciones claras: metadata, archivos requeridos, reglas de formateo, librerías permitidas, y ejemplos de output. Esto reduce errores y repeticiones.
  • Pide archivos en el formato correcto: indica explícitamente que cada archivo debe ser entregado como «Archivo: nombre.ext» y sin texto extra fuera del contenido del archivo.
  • Itera con capturas: cuando algo no suena bien visualmente, una imagen hace que la IA entienda mejor el problema y proponga cambios concretos.
  • Usa herramientas del hosting para generar contenido de prueba (Hostinger tiene una funcionalidad para crear artículos con IA dentro del panel).
  • Mantén el desarrollo en un sitio en blanco: esto evita conflictos con temas o plugins preinstalados.

📷 Ejemplos visuales del proceso

En el video mostré varios momentos clave que te pueden servir como referencia visual para saber qué buscar y cómo actuar en cada paso. Algunas capturas importantes que verás al seguir el tutorial:

Claude mostrando varios archivos listos para descargar

📈 SEO y estrategia post-lanzamiento

Crear el tema es el primer paso. Para que tu sitio atraiga visitas y convierta, sigue una estrategia de contenido y SEO. Aquí tienes recomendaciones concretas:

Optimización técnica

  • Instala Rank Math SEO o similar: https://rodrigoolivares.com/rank-math-seo-instalacion-configuracion/
  • Configura títulos, descripciones y schema para páginas clave.
  • Activa un sitemap y verifica el sitio en Google Search Console.
  • Asegura tiempos de carga bajos (optimiza imágenes, usa lazy loading, minimiza CSS/JS).

Contenido y estructura

  • Publica guías y artículos relevantes para tu público objetivo (por ejemplo, «Guía para contratar un abogado civil»).
  • Organiza contenido en categorías (ej. «Guías», «Casos», «Noticias») y crea landing pages para servicios.
  • Usa interlinking para distribuir autoridad desde páginas pilares a artículos específicos (puedes aprender a usar ChatGPT para generar enlazado interno en: https://rodrigoolivares.com/como-usar-chatgpt-para-hacer-enlaces-internos-seo/).

Monetización y conversión

  • Incluye llamadas a la acción claras: formulario de contacto, agendar consulta, llamada telefónica.
  • Usa herramientas de email marketing para capturar leads (MailerLite es una opción: https://rodrigoolivares.com/email-marketing-facil-con-mailerlite-vende-mas-webs-haciendo-%f0%9f%93%a8-marketing/).
  • Considera contenidos descargables (e.g., «Checklist para demanda civil») a cambio de correo.

🔁 Iteraciones y mantenimiento: cómo seguir desarrollando el tema

Un tema creado con IA no es idéntico a un producto final sin mantenimiento. Te recomiendo un flujo de trabajo para mejorar y mantener tu tema:

  1. Prueba cada cambio en un entorno staging (o en tu instalación en blanco) antes de aplicarlo en producción.
  2. Guarda versiones numeradas y comentarios de cambios (por ejemplo, «v1.2 — arreglado encolado de scripts»).
  3. Si sigues usando Claude para cambios, mantén la conversación activa para tener contexto y acelerar iteraciones.
  4. Audita seguridad y actualizaciones: revisa periodicamente functions.php y librerías externas.

📚 Recursos y enlaces útiles (incluye los enlaces del video)

Como prometí, aquí tienes enlaces útiles mencionados en el tutorial y otros recursos en mi web que te ayudarán a avanzar:

  • Hostinger con descuento: http://hostinger.com/rodrigo
  • Claude: https://claude.ai
  • Prompt utilizado (haz una copia): https://docs.google.com/document/d/1p_VOt66QE5813q4RqJKsM1akhXjF_0F2M31p9laoNe8/copy
  • Blog principal: https://rodrigoolivares.com/blog/
  • Cómo crear un sitio web con WordPress (tutorial): https://rodrigoolivares.com/como-crear-un-sitio-web-con-wordpress-tutorial-paso-a-principiantes/
  • Cómo hacer una web nicho con IA: https://rodrigoolivares.com/como-hacer-una-web-nicho-en-20-minutos-usando-ia-tutorial-paso-a-paso/
  • Estrategias SEO para abogados: https://rodrigoolivares.com/estrategias-seo-para-abogados/
  • Hostinger: qué debes saber: https://rodrigoolivares.com/hostinger-2023-lo-que-debes-saber-de-este-hosting-antes-de-comprar/
  • Rank Math SEO — instalación y configuración: https://rodrigoolivares.com/rank-math-seo-instalacion-configuracion/
  • Optimización de imágenes con Smush: https://rodrigoolivares.com/como-optimizar-las-imagenes-de-wordpress-automaticamente-con-smush/
  • Cómo monetizar tu blog: https://rodrigoolivares.com/como-monetizar-tu-blog-de-forma-efectiva/

✅ Conclusión: lo que aprendiste y próximos pasos

En esta guía has visto cómo:

  • Preparar un prompt optimizado para Claude Sonnet 4 que genere un tema completo de WordPress.
  • Instalar WordPress en Hostinger y crear un sitio limpio para desarrollar el tema.
  • Descargar cada archivo generado por la IA y subirlos a wp-content/themes via hPanel.
  • Activar el tema, diagnosticar problemas comunes y pedir a Claude que los corrija (incluso usando capturas).
  • Generar contenido de prueba con la herramienta integrada de Hostinger para mostrar el tema funcionando.
  • Realizar ajustes finales en WordPress (títulos, categorías, menús) y preparar el sitio para SEO y rendimiento.

Si quieres replicar exactamente lo que hice, copia el prompt (https://docs.google.com/document/d/1p_VOt66QE5813q4RqJKsM1akhXjF_0F2M31p9laoNe8/copy), crea tu cuenta en Claude (https://claude.ai) y prueba con Hostinger (http://hostinger.com/rodrigo). Recuerda: mantén el proceso ordenado, usa el prompt tal como está para evitar errores, y desactiva caché durante el desarrollo.

Si te interesa seguir aprendiendo, en mi sitio tengo muchos recursos relacionados con WordPress, SEO, monetización y uso de IA para crear contenido y sitios web de nicho. Revisa los enlaces del apartado anterior.

Gracias por leer. Si te quedó alguna duda técnica o quieres que haga una versión avanzada (por ejemplo integrando WooCommerce, formularios de contacto avanzados o soporte multilenguaje), dímelo en los comentarios y prepararé un nuevo tutorial paso a paso.

Nos vemos en el próximo artículo. ¡Chau chau!

Entradas relacionadas