Cómo crear fácilmente un tema personalizado de WordPress (sin ningún código)

¿Quieres crear un tema personalizado de WordPress desde cero?

En el pasado, había que seguir el códice de WordPress y tener un conocimiento decente de codificación para construir un tema personalizado de WordPress. Pero gracias a los nuevos generadores de temas de WordPress, ahora cualquiera puede crear un tema de WordPress completamente personalizado en una hora (sin necesidad de conocimientos de codificación).

En este artículo, le mostraremos cómo crear fácilmente un tema personalizado de WordPress sin escribir ningún código.

Creación de un tema personalizado de WordPress para principiantes

A diferencia de los sitios HTML estáticos, los temas de WordPress son un conjunto de archivos de plantilla escritos en PHP, HTML, CSS y JavaScript. Típicamente, usted necesitaría 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 usted contrató a un desarrollador o agencia, entonces el costo de un tema personalizado de WordPress puede llegar a miles de dólares.

Dado que muchos propietarios de pequeñas empresas no podían permitirse los altos costos de un tema personalizado de WordPress, muchos de ellos se conformaron con los temas predeterminados que venían con WordPress.

Aquellos que no querían conformarse y querían personalizaciones usaban un constructor de páginas WordPress de arrastrar y soltar, o usaban un marco de trabajo de temas para crear un tema personalizado.

Aunque los marcos temáticos de WordPress facilitaron la creación de un tema de WordPress, son una solución para desarrolladores, no para un propietario de sitio web promedio.

Por otro lado, los plugins de WordPress hicieron super fácil crear diseños de página personalizados usando una interfaz de arrastrar y soltar, pero estaban limitados a los diseños solamente. No se pueden crear temas personalizados con él.

Hasta que Beaver Builder, uno de los mejores plugins de WordPress decidió resolver este problema con su complemento llamado Beaver Themer.

Beaver Themer es un complemento de creación de sitios que le permite crear diseños de temas personalizados mediante una interfaz de arrastrar y soltar y sin necesidad de aprender a codificar.

Echemos un vistazo a cómo usar Beaver Themer para crear fácilmente un tema de WordPress.

Video Tutorial

Suscribirse a AprenderWP

Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.

Configuración de Beaver Themer para construir un tema personalizado

Beaver Themer es un complemento para Beaver Builder, así que necesitarás ambos plugins para este artículo.

Primero, necesitas instalar y activar los plugins Beaver Builder y Beaver Themer. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Beaver Themer te permite crear un tema personalizado, pero aún así necesitarás un tema para empezar. Recomendamos usar un tema ligero que incluya una plantilla de página de ancho completo para que actúe como tema inicial.

Puedes encontrar muchos de estos temas en el directorio de temas de WordPress.org. La mayoría de los temas modernos de WordPress incluyen una plantilla de ancho completo. Nuestras mejores selecciones son:

  • Astra – Un tema de WordPress liviano y liviano que viene con soporte incorporado para Beaver Builder.
  • OeanWP – Otro popular tema multiusos de WordPress que viene con soporte para creador de páginas completas.
  • Temas de StudioPress – Todos sus temas son compatibles con Beaver Builder y funcionarían muy bien con Beaver Themer.

Para este tutorial, usaremos Astra, que es ligero y fácil de personalizar el tema de WordPress.

Configurando su tema para Beaver Themer

Al crear un tema personalizado de WordPress con Beaver Themer, es importante asegurarse de que Beaver Themer tenga acceso a todo el cuerpo de la página (de borde a borde).

Este es el diseño predeterminado de Astra. Como puede ver, este diseño incluye una barra lateral con la que puede ser difícil trabajar cuando se usa Beaver Themer.

Puede cambiar eso visitando el panel de administración de su sitio web y luego navegar a Apariencia » Personalizar página. Desde aquí, debe cambiar a la pestaña Layout » Sidebars .

Una vez allí, simplemente seleccioneNo Sidebar en la opción de diseño predeterminado y haga clic en el botón Publicar para guardar los cambios.

El tema empezará a utilizar una presentación sin barras laterales. Este es el mejor diseño para usar con Beaver Themer.

Este diseño de página completa permite a Beaver Themer utilizar cada pulgada de la pantalla, para que puedas crear una hermosa experiencia visual de principio a fin.

La mayoría de los temas de WordPress incluyen un archivo de plantilla para páginas de ancho completo. Si está usando algún otro tema, es posible que encuentre una opción para quitar las barras laterales en la configuración del tema.

Si no lo encuentras, ponte en contacto con el desarrollador de tu tema y es posible que te puedan ayudar con eso.

Una vez que haya configurado su tema en un diseño de ancho completo, estará listo para crear su tema personalizado de WordPress usando Beaver Themer.

Fundamentos de Quick Beaver Themer

Beaver Themer trabaja sobre Beaver Builder. Como un plugin de constructor de páginas, Beaver Builder te permite arrastrar y soltar elementos a una página para crear diseños personalizados.

Tiene los siguientes elementos que puede utilizar en sus diseños:

  • Plantilla: Una colección de filas de columnas y módulos que forman un diseño de página completo.
  • Columnas: Módulos de diseño vertical que ayudan a alinear el contenido horizontalmente.
  • Filas: Colección horizontal de múltiples módulos
  • Módulo: Un elemento que produce información específica como título, bloque de texto, tabla, galería, etc.

Simplemente edita una página en Beaver Builder y luego haz clic en el botón de añadir en la esquina superior derecha. A continuación, puede arrastrar y soltar columnas, filas, módulos, a su página y empezar a editarlos de inmediato.

Si no quiere empezar de cero, entonces seleccione de una lista de plantillas prefabricadas para empezar.

Beaver Builder también te permite guardar tus diseños y luego usarlos como plantillas.

Para saber más, vea nuestro artículo sobre cómo crear un diseño de página personalizado usando Beaver Builder.

Sin embargo, no sólo queremos crear diseños de página. Queremos crear un tema personalizado completo.

Aquí es cuando entra Beaver Themer.

Añade otro elemento a Beaver Builder llamadoThemer Layout.

Los diseños de Themer le permiten crear diseños personalizados para el encabezado, el pie de página, las áreas de contenido, la página 404 y otras partes de la plantilla.

Estos son los bloques de construcción de todos los temas de WordPress y al usarlos podrás crear un tema personalizado que se ajuste a tus necesidades.

Uso de plantillas de Beaver Themer para crear un tema personalizado de WordPress

En las siguientes instrucciones, le guiaremos a través de los pasos necesarios para crear los elementos temáticos personalizados más populares. Para cuando termines, habrás transformado completamente tu tema base en un tema hijo de WordPress totalmente personalizado.

Creación de un encabezado personalizado para su tema

Comencemos con el área de cabecera de su sitio web. Un encabezado personalizado es un componente esencial de un tema y la construcción de uno puede ser difícil usando métodos tradicionales.

Afortunadamente, Beaver Themer tiene características de cabecera incorporadas. Puede utilizar la plantilla pre-creada o utilizar el menú y los módulos de imagen con un diseño de dos columnas.

Para llegar a esta área de cabecera, primero, necesitaremos establecer un diseño de cabecera en Beaver Themer. Visita Beaver Builder » Añadir nueva página y proporciona un título para tu encabezado.

A continuación, seleccione Themer Layout como tipo y Header como opción de diseño. Una vez que haya terminado, haga clic en el botón «Agregar diseño de Themer» para continuar.

Esto le llevará a la página de configuración de diseño. Desde aquí tienes que seleccionarTodo el sitio como la ubicación en la que se mostrará la plantilla de encabezado.

A continuación, haga clic en el botón `Launch Beaver Builder para abrir la interfaz del constructor.

Beaver Builder se lanzará con una sola columna básica y un diseño de encabezado de dos filas como punto de partida.

Puedes usar las mismas herramientas de arrastrar y soltar de Beaver Builder para cambiar el fondo, los colores, el texto, etc. También puede añadir otros módulos, cargar plantillas prefabricadas y añadir filas/columnas haciendo clic en el botón Añadir en la esquina superior derecha.

Una vez que esté satisfecho con el diseño, haga clic en el botón Hecho para guardar o publicar su diseño.

Ahora puede visitar su sitio web para ver el encabezado de su tema personalizado en acción. Como puede ver, hemos aplicado el diseño del encabezado a nuestro tema personalizado.

Aparte del encabezado, no mostrará ningún contenido todavía, y probablemente verá el área de pie de página de su tema base.

Vamos a cambiar esto.

Creación de un pie de página personalizado para su tema

Puedes crear un pie de página personalizado para tu tema usando el Beaver Themer de la misma manera que creaste un encabezado personalizado.

Vaya a Beaver Builder » Add New page y proporcione un título para su diseño de pie de página. A continuación, seleccione Themer Layout como tipo y Footer como opción de diseño.

Haga clic en el botónAdd Themer Layout para continuar.

Esto le llevará a la página de configuración de diseño. Desde aquí debe seleccionarTodo el sitio como la ubicación en la que se mostrará la plantilla.

Después de eso, haga clic en el botón `Launch Beaver Builder para abrir la interfaz del constructor.

Beaver Builder se lanzará con un diseño de pie de página usando tres columnas. Puede utilizar este layout como punto de partida y empezar a editar.

Puede añadir módulos, bloques de texto o cualquier otra cosa que desee. Siempre puede cambiar los colores, las fuentes, añadir una imagen de fondo y mucho más.

Una vez que esté satisfecho con el diseño, haga clic en el botón Hecho para guardar o publicar su diseño.

Creación de un área de contenido para publicaciones y páginas

Ahora que hemos creado encabezados y pies de página para cada página y post en el sitio web, es el momento de construir el post o cuerpo de la página (el área de contenido).

Empezaremos de la misma manera que construimos el encabezado y el pie de página añadiendo el diseñoSingular en la página Add New.

A continuación, elegirá dónde mostrar este diseño. Puedes elegir el singular para usarlo para todos los mensajes y páginas individuales, o puedes elegir mensajes o sólo las páginas.

Después de eso, haga clic en el botón `Launch Beaver Builder para abrir la interfaz del constructor.

Beaver Builder cargará un diseño singular de muestra con el título de la publicación/página en la parte superior, seguido por el contenido, el cuadro de biografía del autor y el área de comentarios.

Puede apuntar y hacer clic para editar cualquiera de estos elementos o agregar nuevos módulos, columnas y filas según sea necesario.

Una vez que esté satisfecho con el diseño, haga clic en el botón Hecho para guardar y publicar sus cambios.

Ahora puede visitar su sitio web para verlo en acción.

Creación de diseños de archivo para su tema personalizado

Ahora que su tema personalizado ha comenzado a tomar forma, puede pasar a crear diseños para otras partes de su sitio web. Las páginas de archivo son donde WordPress muestra sus categorías, etiquetas, autor y archivos mensuales.

Vamos a crear un diseño para las páginas de archivo en su tema personalizado.

Comenzarás visitando Beaver Builder » Add New page y proporcionando un título para el diseño de tu archivo.

Después, seleccione Themer Layout como tipo, y Archive como opción de diseño. Haga clic en el botónAdd Themer Layout para continuar.

Esto le llevará a la página de configuración de diseño. Desde aquí tiene que seleccionarAll Archive como la ubicación en la que se mostrará la plantilla. También puede crear layouts separados para cada tipo de archivo individual como fecha, resultados de búsqueda, categoría, etiquetas, etc.

Después de eso, haga clic en el botón `Launch Beaver Builder para abrir la interfaz del constructor.

Beaver Builder se iniciará con un diseño básico de archivo de una sola columna. Mostrará el título del archivo comprimido en la parte superior, seguido de los mensajes.

Puede apuntar y hacer clic en cualquier elemento para editar sus propiedades. También puede agregar nuevos módulos, filas y columnas según sea necesario.

Después de eso, haga clic en el botón «Listo» para guardar y publicar sus cambios.

Creación de otros diseños para su tema personalizado de WordPress

Beaver Themer también le permite crear diseños para otras páginas en la jerarquía de plantillas, por ejemplo, página 404, partes de plantillas, página de resultados de búsqueda y más.

Usando la funcionalidad incorporada de arrastrar y soltar de Beaver Builder, puedes crear fácilmente tu propio tema personalizado de WordPress desde cero sin tener que escribir código. Este es verdaderamente el método de desarrollo de temas de WordPress más amigable para principiantes que existe.

Esperamos que este artículo le haya ayudado a aprender a crear un tema personalizado de WordPress sin tener que aprender a codificar. También puede que desee ver nuestra guía sobre cómo acelerar su sitio web WordPress para un mejor SEO y experiencia de usuario.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.

Deja un comentario