¿Quieres crear un tema personalizado de WordPress desde cero?
En el pasado, tenías que seguir tutoriales complicados de WordPress y tener conocimientos decentes de codificación para crear un tema personalizado de WordPress. Pero gracias a los nuevos constructores de temas de WordPress, ahora puedes crear uno fácilmente sin aprender ninguna habilidad de programación.
En este artículo, te mostraremos cómo crear fácilmente un tema personalizado de WordPress sin escribir ningún código.
Aquí tienes la lista de temas que cubriremos en este artículo.
- Creación de un tema personalizado de WordPress para principiantes
- Creación de un tema personalizado con SeedProd Theme Builder
- Edición de un tema con SeedProd Theme Builder
- Cambio del diseño de todo el sitio para tu tema
- Aplicación y publicación de tu tema personalizado de WordPress
- Creación de otros diseños para tu tema personalizado de WordPress
¿Listo? Empecemos.
Tutorial en video
Si prefieres instrucciones escritas, sigue leyendo.
Creación de un tema personalizado de WordPress para principiantes
Un sitio web de WordPress utiliza un tema para el diseño y la estructura del sitio web. Estos temas están compuestos por archivos de plantilla escritos en PHP, HTML, CSS y JavaScript.
Normalmente, necesitarías tener una comprensión decente de todos estos lenguajes de diseño web o contratar a un desarrollador web para crear un tema personalizado de WordPress.
Si contrataste a un desarrollador o agencia, entonces el costo de un tema personalizado de WordPress puede ascender a miles de dólares.
Dado que muchos propietarios de pequeñas empresas no podían pagar los altos costos de un tema personalizado de WordPress, muchos se conforman con temas predeterminados. Aquellos que no querían conformarse usaron un constructor de páginas de WordPress o un framework de temas para crear un tema personalizado.
Si bien los frameworks de temas de WordPress facilitaron la creación de un tema de WordPress, son una solución para desarrolladores, no para el propietario promedio de un sitio web.
Por otro lado, los plugins constructores de páginas de WordPress facilitaron enormemente la creación de diseños de página personalizados utilizando una interfaz de arrastrar y soltar, pero se limitaban solo a diseños de página única. No podías crear temas personalizados con ellos.
Aquí es donde entra SeedProd.
Es el mejor plugin constructor de temas de WordPress que te permite crear fácilmente un tema personalizado de WordPress sin escribir código.
SeedProd es un constructor de páginas de WordPress de arrastrar y soltar para empresas, bloggers y propietarios de sitios web. Ahora también viene con un nuevo diseñador de temas personalizados que te permite simplemente hacer clic para editar cualquier elemento.
También puedes agregar elementos de diseño de uso común a tu tema con arrastrar y soltar.
Lo mejor del constructor de temas SeedProd es que es agnóstico al tema. Eso significa que no depende de tu tema de WordPress existente para el estilo o la funcionalidad, lo que te da total libertad y control sobre el diseño de tu sitio web.
Si buscas una alternativa, también puedes crear fácilmente un tema personalizado de WordPress con el plugin Thrive Theme Builder.
Dicho esto, veamos cómo crear tu tema personalizado de WordPress sin escribir código usando SeedProd.
Creación de un tema personalizado con SeedProd Theme Builder
Configurar el constructor de temas de SeedProd es bastante sencillo, ya que funciona con cualquier sitio web de WordPress usando cualquier tema.
Primero, necesitas instalar y activar el plugin SeedProd. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Nota: Necesitarás al menos el plan Pro o Elite para desbloquear el constructor de temas.
Tras la activación, ve a la página SeedProd » Ajustes para introducir la clave de licencia de tu plugin. Puedes encontrar esta información en tu cuenta en el sitio web de SeedProd.
Después de ingresar tu clave de licencia, ahora estás listo para crear tu tema personalizado de WordPress usando el creador de temas de SeedProd.
Crear tu propio tema personalizado de WordPress con SeedProd es bastante sencillo.
Primero, necesitas dirigirte a la página SeedProd » Theme Builder. Aquí verás la lista de plantillas para tu tema personalizado actual de SeedProd. Como aún no hemos comenzado, solo tenemos una plantilla de CSS global. Te mostraremos cómo usarla más adelante en el tutorial.
Para empezar, tienes dos opciones.
- Usar uno de los temas prefabricados de SeedProd como punto de partida
- Crear plantillas de tema manualmente desde cero
Echemos un vistazo a cómo funcionan estas opciones.
1. Empezar con un tema prefabricado (Recomendado)
Recomendamos empezar con un tema existente. Esto permite que SeedProd genere automáticamente todos los archivos de plantilla. Estos son temas completos diseñados profesionalmente, lo que te da una ventaja para editar las plantillas según tus propios requisitos.
Simplemente haz clic en el botón Temas y elige uno de los temas disponibles. Hay diferentes temas para distintos tipos de sitios web, así que puedes elegir uno que se ajuste mejor a tus necesidades.
No te preocupes demasiado por el diseño y la disposición en este punto. Todos estos temas son completamente editables, por lo que puedes cambiar cada aspecto dentro del creador de temas.
Una vez que hayas elegido un tema, SeedProd generará todas las plantillas del tema.
Esta es la versión de borrador de tu tema personalizado de WordPress.
Más adelante en este tutorial, te mostraremos cómo editar estos archivos de tema para diseñar tu tema y luego publicar tu tema para aplicarlo en tu sitio web.
2. Crear plantillas de tema manualmente desde cero
Alternativamente, puedes empezar tu tema desde cero haciendo clic en el botón 'Agregar Nueva Plantilla de Tema'. Tendrás que darle un nombre a tu plantilla y luego elegir uno de los tipos de plantilla para empezar.
Actualmente, tienes la opción de elegir entre los siguientes tipos de plantilla:
- Encabezado
- Pie de página
- Publicación única
- Página Única
- Archivo
- Resultados de Búsqueda
- Parte Global
- Página Personalizada
También puedes establecer condiciones para usar una plantilla. Por ejemplo, puedes aplicarla a todo el sitio o a una sección específica de tu sitio web.
Una vez que guardes la plantilla, SeedProd la abrirá en el constructor de temas donde podrás empezar a editarla.
Edición de un tema con SeedProd Theme Builder
Una vez que hayas generado tus plantillas de tema, puedes editarlas usando el Constructor de Temas de SeedProd.
Simplemente haz clic en el enlace Editar Diseño debajo de un archivo de plantilla para editarlo.
Esto iniciará el archivo de plantilla en el constructor de temas de SeedProd.
Verás una vista previa en vivo de la plantilla en la columna derecha con un panel de edición en la columna izquierda.
Para cambiar un elemento en tu archivo de plantilla, simplemente puedes hacer clic y editarlo.
Dependiendo del tipo de elemento, verás diferentes opciones de edición en la columna izquierda. Podrás cambiar fuentes, colores, fondo, espaciado y más.
Para agregar nuevos elementos, puedes añadir bloques de SeedProd desde la columna izquierda. Viene con un montón de tipos de bloques que puedes agregar a tu plantilla.
1. Bloques de etiquetas de plantilla
Los bloques de etiquetas de plantilla son los bloques dinámicos que te permiten generar elementos del tema sobre la marcha desde tu base de datos de WordPress.
Por ejemplo, puedes usar el bloque de Entradas para listar tus entradas recientes o el bloque de Contenido de entrada para mostrar el contenido de la entrada o página que se está mostrando actualmente.
2. Bloques estándar
A continuación, tienes tus bloques estándar para agregar elementos comunes de diseño web a la plantilla de tu tema.
Puedes usarlos para agregar texto, medios, botones, columnas, divisores y más.
3. Otros bloques
Otros bloques avanzados te permiten agregar formularios de contacto, perfiles sociales, botones para compartir, códigos cortos de WordPress, Google Maps, listas de precios, temporizadores de cuenta regresiva y más.
SeedProd también viene con integración completa de WooCommerce.
Si tienes una tienda en línea, entonces puedes usar los bloques de WooCommerce en tu tema.
Puedes crear plantillas de WooCommerce completamente personalizadas con una página de carrito personalizada y experiencia de pago.
Uso de Secciones Para Diseños Rápidos de Temas
Además de los bloques, también puedes agregar secciones completas a la plantilla de tu tema.
Simplemente cambia a la pestaña Secciones en el panel de Diseño.
Las secciones son grupos de bloques para diferentes áreas del diseño del sitio web. Por ejemplo, encontrarás secciones listas para usar para tu encabezado, pie de página, llamadas a la acción, características y más.
Simplemente haz clic en una sección para agregarla a la plantilla de tu tema, y luego edítala según tus propios requisitos.
Uso del Creador de Sitios Web con IA para Generar Contenido al Instante
SeedProd también ofrece un potente Creador de Sitios Web con IA que elaborará automáticamente el contenido escrito para la plantilla de tu tema. Puedes generar al instante titulares, descripciones, llamadas a la acción, texto del cuerpo y más.
Simplemente haz clic en cualquier bloque de Encabezado o Texto del constructor de SeedProd para abrir el panel de configuración en el lado izquierdo. Luego, haz clic en el botón 'Generar Texto con IA'.
A continuación, escribe una indicación en el campo de texto, que es básicamente una descripción de lo que quieres que el asistente de IA escriba para ti. O bien, puedes elegir una indicación sugerida de la lista.
Después de eso, haz clic en el botón 'Generar Texto'.
En solo unos segundos, SeedProd creará automáticamente el contenido por ti. A partir de ahí, puedes optimizar el texto, cambiar el tono e incluso traducir el texto a más de 50 idiomas.
Cuando estés satisfecho con el contenido, haz clic en el botón ‘Insertar’ para agregarlo a la plantilla de tu tema.
También puedes usar la integración DALL-E del Constructor de Sitios Web con IA para generar imágenes originales para tu tema automáticamente.
Simplemente arrastra un bloque de Imagen a tu página y haz clic en él para abrir el panel de configuración. Luego, haz clic en el botón ‘Agregar con IA’.
A continuación, escribe una descripción de la imagen que deseas crear y haz clic en el botón ‘Generar Imagen’.
Una vez que la imagen se haya generado, SeedProd la mostrará. Para agregar la imagen a la plantilla de tu tema, haz clic en el botón ‘Insertar’.
También puedes editar la imagen con IA, así como generar variaciones de la imagen, para que coincida con la visión exacta que tenías en mente.
Guardar y Publicar Tu Plantilla
Una vez que estés satisfecho con el diseño, simplemente puedes hacer clic en el botón Guardar y seleccionar Publicar para guardar tu plantilla.
Repite el proceso para editar otros archivos de plantilla según tus necesidades de contenido y diseño.
Cambio del diseño de todo el sitio para tu tema
Mientras editas las plantillas de tu tema, querrás asegurarte de que tu diseño sea coherente en todo tu sitio web.
Por ejemplo, probablemente querrás usar el mismo estilo de tipografía, tamaños de fuente, colores y otros estilos visuales en cada página.
En los temas tradicionales de WordPress, tenías que hacerlo manualmente editando archivos CSS complejos. Este proceso requería usar la herramienta Inspeccionar del navegador, localizar clases CSS, aprender código y más.
SeedProd también hace esto muy fácil.
En lugar de escribir código CSS, simplemente puedes editar la plantilla CSS Global.
La plantilla CSS Global te permite previsualizar elementos comunes del sitio web, y luego puedes simplemente hacer clic en ellos para editar sus propiedades.
Aplicación y publicación de tu tema personalizado de WordPress
Una vez que estés satisfecho con tu tema personalizado de WordPress, el último paso es activarlo en tu sitio web de WordPress.
SeedProd te permite aplicar tu tema personalizado de WordPress con un simple interruptor.
Simplemente ve a la página SeedProd » Theme Builder y activa el interruptor junto a la opción ‘Enable SeedProd Theme’ a ‘Yes’.
SeedProd ahora reemplazará el tema de WordPress existente con el tema de WordPress personalizado que has creado.
Ahora puedes visitar tu sitio web para ver tu tema de WordPress personalizado en acción.
Creación de otros diseños para tu tema personalizado de WordPress
Ahora que has creado tu tema de WordPress personalizado, tienes la opción de extender su funcionalidad y crear más diseños y maquetaciones basados en tu tema.
SeedProd lo hace extremadamente fácil.
Aún puedes ajustar tu tema de WordPress personalizado y crear múltiples plantillas para diferentes secciones de tu sitio web.
Por ejemplo, es posible que desees agregar una nueva plantilla de encabezado a tu tema que solo se muestre en categorías específicas.
De manera similar, es posible que desees crear una plantilla para páginas o publicaciones específicas.
También puedes agregar eso a tu tema.
¿Qué tal crear páginas de destino personalizadas?
SeedProd también te cubre en ese aspecto.
Simplemente puedes ir a SeedProd » Páginas de destino y hacer clic en el botón Agregar nueva página de destino para crear una.
Para más detalles, consulta nuestro tutorial sobre cómo crear una página de destino con WordPress.
Al usar el creador de temas de arrastrar y soltar de SeedProd, fácil de usar para principiantes, puedes crear fácilmente cualquier tipo de diseño personalizado que necesites.
Esperamos que este artículo te haya ayudado a aprender cómo crear un tema de WordPress personalizado sin necesidad de saber programar. También te puede interesar nuestra guía sobre cómo acelerar tu sitio web de WordPress para mejorar el SEO y la experiencia del usuario, o nuestras selecciones de las mejores soluciones de análisis para WordPress.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Mrteesurez
Esto es increíble, ¡qué herramienta tan increíble de un equipo increíble! Seedprod es realmente potente para crear un tema de WordPress sin codificar ni lidiar con jerga técnica, incluso tiene plantillas de temas de inicio para empezar.
Pero, ¿es posible que instale el tema o lo use en otro sitio de WordPress?
Soporte de WPBeginner
Puedes exportar tus archivos de tema para usarlos en otro sitio con SeedProd.
Administrador
Mrteesurez
Me alegra saber que puedo exportar mi archivo de tema y usarlo en otro lugar, gracias por tomarte el tiempo de responder. Significa que necesito tener Seedprod instalado en el sitio web donde propongo usar el tema.
Jiří Vaněk
Esa es una gran idea, Mrteesurez, que en realidad nunca se me ocurrió, y me alegra que el equipo de WPBeginner haya confirmado que es posible. Yo también tengo SeedProd y estoy interesado en esta idea. ¿Hay alguna guía para esto en alguna parte, o planean crear una?
Ayanda Temitayo
¡Guau! Todo este tiempo creí que solo los muy buenos programadores de PHP podían crear temas de WordPress. Nunca pensé que se pudiera crear un tema con otro plugin de WordPress. Este es un gran desarrollo para WordPress y gracias a WordPress y a su entusiasta comunidad de desarrolladores por hacerlo increíble cada día que pasa.
SeedProd es muy potente. Estoy aprendiendo sus funciones y también intentaré implementarlas.
Artículo increíble
Soporte de WPBeginner
Thank you and glad we could share how to make a theme without the requirement of coding knowledge
Administrador
Mrteesurez
¡Sentí lo mismo al principio! Es increíble cómo ha evolucionado WordPress, haciendo que la creación de temas sea accesible para más personas sin necesidad de ser un experto en codificación. SeedProd es realmente un cambio de juego con su constructor de arrastrar y soltar y sus plantillas prefabricadas. Ayuda a crear temas personalizados rápidamente, lo que habría llevado mucho más tiempo si uno tuviera que codificar todo desde cero. Mirando hacia el futuro, estoy emocionado por las posibilidades de integrar herramientas de diseño impulsadas por IA en WordPress. Es asombroso cómo la plataforma sigue innovando, haciéndola más fácil y potente para usuarios de todos los niveles.
Moinuddin Waheed
Hasta ahora había un zumbido en el mercado de WordPress de creación de páginas y aquí viene el avance en forma de desarrollo de temas personalizados, incluso sin ninguna base de conocimiento de código.
Gracias WordPress y a su entusiasta comunidad de desarrolladores que lo hacen increíble cada día que pasa.
SeedProd es muy poderoso. Estoy aprendiendo sus funciones y aplicándolas en mis sitios web.
Satish
¿Cómo diseñó wpbeginner su página de inicio?
Soporte de WPBeginner
We created a theme for ourselves
Administrador
Fahad
¿Podemos vender estos temas?
Soporte de WPBeginner
Querrías codificar manualmente un tema en lugar de usar este método si quisieras vender un tema.
Administrador
Flox
Gracias por la publicación. Me es muy útil para crear un sitio. Gracias…
Soporte de WPBeginner
You’re welcome, glad our article was helpful
Administrador
Hosli
Hola equipo,
¿Puedo crear una página de destino con esto?
Soporte de WPBeginner
Si bien no necesitas Beaver Themer en este momento, puedes usar Beaver Builder para crear una página de destino
Administrador
Irene
Gracias por el tutorial. Pregunta rápida: ¿puedo también volver a agregar mis barras laterales después de construir un nuevo tema personalizado con Beaver? Si es así, ¿cómo puedo hacerlo, por favor?
Soporte de WPBeginner
Necesitarías volver al personalizador para agregar la barra lateral de nuevo
Administrador
Louise Findlay
¿Cuáles son los beneficios de usar Beaver Themer sobre solo Beaver Builder?
Soporte de WPBeginner
Varía según lo que edite; Beaver Builder es para editar el área de contenido, mientras que Beaver Themer es para ubicaciones distintas del área de contenido
Administrador
Kathy Smith
Una vez que creo un tema, ¿puedo usarlo para otros sitios web sin necesidad de Beaver Builder?
Soporte de WPBeginner
En este momento, requeriría Beaver Builder para funcionar también en otros sitios.
Administrador
Athena
Bit of a newbie question ..what happens to all my existing content as in pages and widgets (currently using the Asta theme) etc whilst I’m doing this or am I first building a separate website first inside wordpress and if so how then do I transfer it over?
Thanks
Soporte de WPBeginner
Your posts and pages would remain, you would normally need to readd the widgets for the new widget areas
Administrador
Vince
No he probado Beaver Builder, pero ¿funciona como Divi? ¿Son similares? Si es así, entonces diría que hasta ahora, sin importar qué tipo de tema, no he encontrado un tema que dé un 0% de codificación total.
Sí, es posible construir una página o un tema con 0% de codificación. PERO, normalmente hay características que un tema no posee pero que el cliente requeriría para su sitio y, por lo tanto, necesitaría codificar.
Soporte de WPBeginner
If you visit the Beaver Builder site there is the option for you to try the live demo to see how it works
Administrador
Sayed Ezhar
¡Buen material! Lo probaremos. Gracias.
Soporte de WPBeginner
You’re welcome
Administrador
Zulqar
Hola,
Soy un novato y fan del sitio WP Beginner. No sé nada de código, ¡así que esta publicación es una revelación para mí!
Una pregunta rápida: he estado tratando de entender Generate Press. Me parece que necesito aprender algo de codificación para jugar con el diseño o crear botones. ¿Tienes algún consejo para mí?
¡Gracias por ayudar a la comunidad de WP Beginner!
Saludos.
Soporte de WPBeginner
Si vas al sitio de Generate Press, tienen una página de documentación para ayudarte como punto de partida con su plugin.
Administrador
kat
Actualmente estoy usando Adobe Muse para crear múltiples sitios web para clientes, porque es rápido y fácil, y wysiwyg.
Pero, Adobe lo ha matado. Necesito convertir TODOS mis sitios de clientes a otro software. Mi hosting tiene C-panel, así que puedo obtener la aplicación de WordPress y publicar en los dominios.
¿Este proceso me permitirá recrear los diseños que ya he construido y que los clientes quieren, y qué tan complejo puede ser un sitio usando esto?
juego en Wordpress, no TRABAJO en WP.
Soporte de WPBeginner
You would want to reach out to Beaver Builder’s support for specifics on the design depending you your needs
Administrador
Mohamed Hassan
¡Gracias por la gran información!
Soporte de WPBeginner
You’re welcome
Administrador
Sy
¡Otro gran post! Gracias.
Solo me pregunto por qué WPBeginner siempre parece evitar Elementor?
Construir un tema con Elementor es muy similar a construirlo con Beaver Builder, pero Elementor es más rápido y tienes muchas más opciones con estilo y elementos/módulos.
¡Me encanta tu contenido!
Soporte de WPBeginner
Que Elementor pro no cumpla con la licencia GPL es una de las mayores preocupaciones al recomendarlo, dependiendo del caso de uso del usuario.
Administrador
Monique
Fantástico tutorial. Justo lo que necesitaba. ¡Gracias!
Soporte de WPBeginner
You’re welcome
Administrador
Captaiing
Gracias, lo intentaré
Soporte de WPBeginner
We hope our article makes it easier for you
Administrador
Muhammad Waqar
Gracias por enseñarme sobre este plugin que es muy útil para mí. Esta web es muy útil para mí. Gracias de nuevo
Soporte de WPBeginner
Glad our article could help
Administrador
sajid
gracias por compartir, muy informativo.
Soporte de WPBeginner
You’re welcome
Administrador
Louise Findlay
Estoy considerando emprender un proyecto para migrar un sitio de WordPress.com a la versión autoalojada y usar Divi para renovarlo.
Siguiendo la lectura de tu artículo sobre los mejores constructores de páginas de WordPress, ¿qué recomendarías, Beaver Builder o Divi?
Con Divi, obtienes una gama de temas y plugins de ElegantThemes, pero he leído críticas negativas sobre el bloqueo de temas y ser demasiado restrictivo. ¿Tienes alguna experiencia personal con él?
Con Beaver Builder, parece que la funcionalidad del constructor de páginas es perfecta, aunque parece más complejo con todas las opciones distribuidas en varias páginas y no obtienes temas ni plugins con la suscripción.
Personal editorial
Ambas son excelentes opciones y están en nuestro top 5.
El plugin Divi Page Builder funciona con otros temas también, así que no estás bloqueado con ElegantThemes. Sin embargo, como con cualquier tema, si cambias de un tema a otro, puedes perder ciertas características. Pero por eso debes asegurarte de que el nuevo tema tenga un conjunto de características comparables.
Siempre y cuando estés usando el plugin Divi Page Builder, conservarás las funciones de arrastrar y soltar.
El beneficio de Divi son los temas/diseños adicionales que ofrece ElegantThemes. Sin embargo, el beneficio de Beaver Builder son las opciones de personalización avanzada.
Administrador
Richard Ross
Sin mencionar el hecho de que Beaver Builder no usa códigos cortos para poblar las áreas de contenido.
Chris Nieass
Is not using short codes to populate content is a good thing? Be gentle, I’m a newbie
Rob Dewing
@Chris Nieass, sí, no usar códigos cortos es una gran ventaja de Beaver. Ocasionalmente, incluso en las mejores instalaciones, un constructor de páginas como Divi o Beaver falla. Cuando Divi falla, terminas con contenido de página que se ve feo con códigos cortos renderizados literalmente en toda la página. Si lo mismo le sucediera a Beaver, simplemente obtendrías tu contenido apilado y legible en una serie de bloques hacia abajo en la página en lugar de columnas bonitas.
Divi es para diseñadores que aman su interfaz colorida y fácil de usar y el hecho de que todos sus amigos lo usan. Beaver es para personas que se preocupan por qué tan bien funciona el sitio, la facilidad de personalizaciones más profundas, etc., etc.