¿Quieres crear un tema de WordPress personalizado desde cero?
En el pasado, había que seguir el códice de WordPress y tener un conocimiento decente de codificación para crear un tema de WordPress personalizado. 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 de WordPress personalizado sin escribir ningún código.
Creación de un tema de WordPress personalizado 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. Normalmente, necesitaría tener un conocimiento decente de todos estos lenguajes de diseño web o contratar a un desarrollador web para crear un tema de WordPress personalizado.
Si se contrata a un desarrollador o a una agencia, el coste de un tema de WordPress personalizado puede alcanzar los miles de dólares.
Como muchos propietarios de pequeñas empresas no pueden permitirse los altos costes de un tema de WordPress personalizado, muchos de ellos se conforman con los temas por defecto que vienen con WordPress.
Aquellos que no querían conformarse y querían personalizaciones, o bien utilizaban un constructor de páginas de WordPress de arrastrar y soltar, o bien utilizaban un framework de temas para construir un tema personalizado.
Aunque los frameworks de temas de WordPress facilitan la construcción de un tema de WordPress, son una solución para los desarrolladores, no para el propietario medio de un sitio web.
Por otro lado, los plugins del constructor de páginas de WordPress facilitaban enormemente la creación de diseños de página personalizados mediante una interfaz de arrastrar y soltar, pero se limitaban únicamente a los diseños. No se podían crear temas personalizados con ellos.
Hasta que Beaver Builder, uno de los mejores plugins constructores de páginas de WordPress, decidió resolver este problema con su complemento llamado Beaver Themer.
Traducción realizada con la versión gratuita del traductor www.DeepL.com/Translator
Beaver Themer es un complemento del constructor de sitios que le permite crear diseños de temas personalizados utilizando una interfaz de arrastrar y soltar y sin aprender a codificar.
Echemos un vistazo a cómo utilizar Beaver Themer para crear fácilmente un tema de WordPress.
Configuración de Beaver Themer para crear un tema personalizado
Beaver Themer es un plugin complementario para Beaver Builder, por lo que necesitará ambos plugins para este artículo.
Primero, necesita instalar y activar los plugins Beaver Builder y Beavear Themer. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Beaver Themer le permite crear un tema personalizado, pero aún así necesitará un tema para empezar. Recomendamos utilizar 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. Nuestros mejores temas son:
Traducción realizada con la versión gratuita del traductor www.DeepL.com/Translator
- Astra – Un tema gratuito de WordPress multipropósito y ligero que viene con soporte incorporado para Beaver Builder.
- OeanWP – Otro popular tema de WordPress multipropósito que viene con soporte completo para el constructor de páginas.
- Temas de StudioPress – Todos sus temas son compatibles con Beaver Builder y funcionan muy bien con Beaver Themer.
Para este tutorial, utilizaremos Astra, que es un tema de WordPress ligero y fácil de personalizar.
Configuración de su tema para Beaver Themer
Cuando se construye un tema personalizado de WordPress con Beaver Themer, es importante asegurarse de que Beaver Themer tiene acceso a todo el cuerpo de la página (de borde a borde).
Este es el diseño por defecto de Astra. Como puede ver, este diseño incluye una barra lateral que puede ser difícil de trabajar cuando se utiliza Beaver Themer.
You can change that by visiting the admin panel of your website and then navigate to Appearance » Customize page. From here, you need to switch to the Layout » Sidebars tab
Puede cambiar esto visitando el panel de administración de su sitio web y luego navegar a la página Apariencia » Personalizar. Desde aquí, tienes que cambiar a la pestaña Diseño » Barras laterales.
.
Una vez allí, simplemente seleccione «Sin barra lateral» en la opción de diseño por defecto y haga clic en el botón Publicar para guardar los cambios.
Su tema comenzará a utilizar un diseño 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 centímetro de la pantalla, para que pueda crear una hermosa experiencia visual de principio a fin.
La mayoría de los temas de WordPress incluyen un archivo de plantilla para las páginas de ancho completo. Si está utilizando algún otro tema, entonces puede encontrar una opción para eliminar las barras laterales en la configuración de su tema.
Si no la encuentras, ponte en contacto con el desarrollador de tu tema y puede que te ayude con eso.
Una vez que haya configurado su tema a un diseño de ancho completo, usted está listo para crear su tema personalizado de WordPress utilizando Beaver Themer.
Fundamentos rápidos de Beaver Themer
Beaver Themer funciona sobre Beaver Builder. Como un plugin constructor de páginas, Beaver Builder le 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 columnas, filas y módulos que conforman 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: Elemento que da salida a una información específica, como un título, un bloque de texto, una tabla, una galería, etc.
Simplemente edite una página en Beaver Builder y luego haga 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 desde cero, seleccione de una lista de plantillas prefabricadas para empezar.
Beaver Builder también le permite guardar sus diseños y utilizarlos posteriormente 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 llamado ‘Themer Layout’.
Los diseños temáticos te permiten crear diseños personalizados para la cabecera, 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.
Usando las 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 construir los elementos de los temas personalizados más populares. Cuando haya terminado, habrá transformado completamente su tema base en un tema hijo de WordPress totalmente personalizado.
Construyendo un encabezado personalizado para su tema
Comencemos con el área de la cabecera de su sitio web. Un encabezado personalizado es un componente esencial de un tema y construir uno puede ser complicado usando métodos tradicionales.
Por suerte, Beaver Themer tiene características de cabecera incorporadas. Puedes utilizar la plantilla pre-creada o utilizar los módulos de menú e imagen con un diseño de dos columnas.
Con el fin de llegar a esta zona de cabecera, en primer lugar, tendremos que configurar un diseño de cabecera en Beaver Themer. Visite Beaver Builder » Añadir nueva página y proporcione un título para su cabecera.
Después de eso, seleccione ‘Themer Layout’ como el tipo y ‘Header’ como la opción de diseño. Una vez que hayas terminado, haz clic en el botón «Añadir diseño de Themer» para continuar.
Esto te llevará a la página de configuración del diseño. Desde aquí tienes que seleccionar «Todo el sitio» como la ubicación en la que se mostrará la plantilla de cabecera.
A continuación, 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 una columna y dos filas de cabecera 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 puedes añadir otros módulos, cargar plantillas ya hechas y añadir filas/columnas haciendo clic en el botón de 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 su cabecera temática personalizada en acción. Como puede ver, hemos aplicado el diseño de la cabecera a nuestro tema personalizado.
Aparte de la cabecera, 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.
Construir un pie de página personalizado para su tema
Puede crear un pie de página personalizado para su tema utilizando el Beaver Themer al igual que creó un encabezado personalizado.
Diríjase a Beaver Builder » Añadir nueva página y proporcione un título para su diseño de pie de página. A continuación, seleccione ‘Themer Layout’ como el tipo y ‘Footer’ como la opción de diseño.
Haga clic en el botón «Add Themer Layout» para continuar.
Esto le llevará a la página de configuración del diseño. Desde aquí debe seleccionar «Todo 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 iniciará con un diseño de pie de página con tres columnas. Puede utilizar este diseño como punto de partida y empezar a editarlo.
Puedes añadir módulos, bloques de texto o cualquier otra cosa que quieras. Siempre puedes 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.
Construyendo el área de contenido para los post y las páginas
Ahora que hemos creado los encabezados y pies de página para cada página y post en el sitio web, es el momento de construir el cuerpo del post o página (el área de contenido).
Empezaremos de la misma manera que construimos la cabecera y el pie de página, añadiendo el diseño «Singular» en la página Añadir Nuevo.
A continuación, elegirás dónde mostrar este diseño. Puedes elegir singular para utilizarlo en todas las entradas y páginas individuales, o puedes elegir las entradas 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, la caja de biografía del autor y el área de comentarios.
Puede apuntar y hacer clic para editar cualquiera de estos elementos o añadir 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 tu tema personalizado ha empezado a tomar forma, puedes pasar a crear diseños para otras partes de tu 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 tu tema personalizado.
Empezarás visitando Beaver Builder » Añadir nueva página y proporcionando un título para tu diseño de archivo.
Después, seleccione «Themer Layout» como tipo, y «Archive» como opción de diseño. Haga clic en el botón «Add Themer Layout» para continuar.
Esto le llevará a la página de configuración del diseño. Desde aquí debe seleccionar «Todos los archivos» como la ubicación en la que se mostrará la plantilla. También puede crear diseños 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. Se mostrará el título del archivo en la parte superior, que es seguido por los puestos.
Puede señalar y hacer clic en cualquier elemento para editar sus propiedades. También puede añadir nuevos módulos, filas y columnas según sea necesario.
Después de eso, haga clic en el botón ‘Done’ para guardar y publicar sus cambios.
Creación de otros diseños para su tema de WordPress personalizado
Beaver Themer también le permite crear diseños para otras páginas en la jerarquía de la plantilla, por ejemplo, la página 404, las partes de la plantilla, la página de resultados de búsqueda, y más.
Usando la funcionalidad integrada de arrastrar y soltar de Beaver Builder, puede crear fácilmente su propio tema de WordPress personalizado desde cero sin tener que escribir código. Este es realmente el método de desarrollo de temas de WordPress más amigable para los principiantes que existe.
Esperamos que este artículo le haya ayudado a aprender cómo crear un tema de WordPress personalizado sin aprender a codificar. Quizás también quieras ver nuestra guía sobre cómo acelerar tu sitio web de WordPress para mejorar el SEO y la experiencia del usuario.
¿Te ha resultado útil??
0 / 0