Cómo generar un tema de WordPress con Telex

El desarrollo de temas de WordPress siempre ha tenido una curva de aprendizaje. 

Entre el PHP, el CSS, la jerarquía de plantillas y ese inevitable error misterioso que aparece siempre para darte una sorpresa, no es algo que la mayoría de la gente domine en una tarde.

Telex elimina por completo esa barrera. Le dices lo que quieres, genera un tema, lo instalas y tu web tiene un estilo totalmente nuevo.

¡Así es como funciona!

1. Pídele a Telex que cree un tema

Empieza con un prompt. Cuantos más detalles incluyas, más se acercará el resultado a lo que tienes en mente. 

Fíjate en este ejemplo para la página de destino de una empresa de recursos humanos:

«Crea un tema de negocios profesional para una empresa de recursos humanos. Utiliza un diseño limpio, tipografías que inspiren confianza, una paleta de colores suaves con un color de contraste fuerte, llamadas a la acción claras para candidatos y responsables de contratación y una sección de servicios visible sin hacer scroll».

Es recomendable incluir siempre el estilo visual y la estructura que buscas para el diseño y el propósito de la web. 

Por ejemplo, una página de destino de selección de personal debe transmitir confianza y profesionalidad desde el primer vistazo, algo que no tiene tanta relevancia en un porfolio o un blog. 

Cuanto más contexto tenga Telex, menos tendrás que corregir después.

2. Haz clic en «Mejorar prompt» antes de generar el tema

Antes de generar tu tema, haz clic en el botón Mejorar prompt. 

Telex reescribirá tu descripción convirtiéndola en unas instrucciones completas del diseño, rellenando detalles que quizás no te habías planteado sobre el lenguaje del diseño, la estructura, las tipografías y las opciones de espaciado.

Para una web de selección de personal, Telex podría añadir recomendaciones sobre elementos para inspirar confianza, espacios en blanco y jerarquía visual que quizá no hayas pedido explícitamente, pero que sin duda te pueden resultar útiles. 

Nuestro prompt actualizado incluye nuevos detalles, como:

«Utiliza un diseño limpio y minimalista con tipografía sans-serif que transmita confianza y una paleta neutra suave con un único color de contraste llamativo para las llamadas a la acción. La plantilla de la página de inicio debe mostrar una sección hero visible sin hacer scroll con un titular, un subtítulo y dos botones de llamada a la acción destacados: uno para candidatos y otro para responsables de contratación. Justo debajo de la sección hero, añade una sección de servicios con bloques con iconos que destaquen los principales servicios, como la búsqueda de talentos, la selección de directivos y la contratación temporal. Incluye plantillas para un listado individual de empleo, una página «Acerca de» y una página de contacto. En el front-end, procura que la web cargue rápido, tenga un diseño adaptable, y que haya una sección de cabecera fija con el logotipo y el menú de navegación, y un pie de página con información de contacto y enlaces a redes sociales».

Con este tendrás una base mucho más sólida.

3. Otra opción: sube una imagen de referencia

Si has visto una web que te gusta de alguien de tu sector, tienes un diseño de marca preliminar o incluso un boceto aproximado de cómo quieres que sea la página, súbelo a Telex para ayudarle a orientar la dirección visual del tema.

Telex analizará la imagen y la usará como base para el tema.

Si ya tienes clara la dirección que buscas para tu marca, esta suele ser la vía más rápida para conseguir un resultado que se parezca lo máximo posible a lo que tienes en mente.

4. Elige entre las cuatro variaciones que genera Telex

A partir de aquí, Telex te ofrecerá cuatro variaciones entre las que podrás comparar, cada una interpretando tus instrucciones de forma ligeramente diferente, con su propio enfoque de tipografía, espaciado, diseño y estilo.

Elige la que mejor encaje con tu marca, tu audiencia y la impresión que quieres causar. Recuerda, esto es solo un punto de partida.

Para una página de destino empresarial, presta especial atención la jerarquía y la legibilidad de cada alternativa.

Empieza con la versión que comunique de forma más clara lo que ofreces y guíe la vista de forma natural hacia la llamada a la acción.

Siguiendo con el ejemplo de la web de selección de personal, elegimos este tema:

5. Crea el resto de plantillas

Ahora puedes pedirle a Telex que cree otras plantillas para los tipos de páginas que necesites.

Por defecto, empieza con una única plantilla que WordPress aplica a todas las páginas, pero un tema completo necesita diseños diferentes según los distintos tipos de contenido. 

Para una web de selección de personal, por ejemplo, podrías pedir lo siguiente:

• «Crea una plantilla de página de servicios con iconos y descripciones breves para cada servicio».

• «Crea una plantilla de página «Acerca de» con una biografía, una foto y señales de confianza como los años de experiencia y opiniones de clientes».

• «Crea una plantilla de página de contacto con un formulario de captación de clientes potenciales y pasos claros que los visitantes puedan seguir fácilmente».

• «Crea una plantilla de archivo para ofertas de empleo que muestre las vacantes con su ubicación, rango salarial y un botón para enviar solicitudes».

Cada plantilla amplía el tema sin perder la coherencia visual que elegiste al principio.

6. Refina el tema hasta que se ajuste a tu visión

Una vez que la estructura del tema esté a tu gusto, ve refinando los detalles: las tipografías, la paleta de colores, los espaciados, el diseño en dispositivos móviles, el modo oscuro o cualquier otro aspecto que quieras modificar. 

Para una web de selección de personal, por ejemplo, quizás quieras que la tipografía transmita más autoridad o que el diseño móvil esté mejor optimizado, ya que muchos visitantes pueden acceder al sitio desde sus teléfonos. 

7. Descarga el ZIP e instálalo

Por último, haz clic en Descargar y Telex empaquetará el tema en un archivo ZIP que contiene las plantillas, los estilos, el theme.json y las definiciones del diseño. 

Lleva ese archivo a tu escritorio de WordPress y, en Apariencia → Temas → Añadir nuevo → Subir tema, selecciona el archivo, instálalo y actívalo.

Cuando actives el tema, WordPress adaptará las páginas y el contenido de tu web al nuevo diseño. 

Si ya tienes configuradas una página de servicios, una página «Acerca de» o una lista de ofertas de empleo, aparecerán con el nuevo diseño sin que tengas que hacer nada.

Consejo: Si más adelante quieres actualizar algún aspecto del diseño, vuelve a Telex, haz los cambios que necesites, descarga un nuevo ZIP y súbelo. Al subir el nuevo ZIP, WordPress conservará el contenido existente tal y como está aplicando el nuevo diseño.

Paso extra: prueba primero el tema en un sitio de pruebas

Antes de activar un tema en un sitio de producción, es recomendable probarlo primero en un entorno seguro. 

Por ejemplo, WordPress Playground te permite probar tus temas directamente en el navegador, sin instalar nada.

También puedes utilizar WordPress Studio, una aplicación de escritorio gratuita que ejecuta un entorno de WordPress local completo en tu ordenador sin necesidad de configurar un servidor.

Ahora te toca a ti

Imagina un tema, prueba a pedirle a la IA lo primero que se te ocurra, sube un boceto en una servilleta y mira qué sale. 

¡Y no olvides volver y enseñarnos lo que has creado en los comentarios!

Ten en cuenta que Telex sigue siendo una herramienta experimental, por lo que los resultados pueden variar y es posible que te encuentres algún problema puntual. Eso forma parte del proceso, y cada proyecto que publiques contribuye a determinar el desarrollo futuro de esta herramienta.