¿Desea crear un tema de WordPress personalizado desde cero?
En el pasado, tenía que seguir el códice de WordPress y tener un conocimiento decente de codificación para crear 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 (no se necesitan 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 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. Por lo general, necesitará 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 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 pueden pagar los altos costos de un tema personalizado de WordPress, muchos de ellos simplemente se conformaron con los temas predeterminados que venían con WordPress.
Aquellos que no querían conformarse y querían personalizaciones usaron un arrastre & soltar el creador de páginas de WordPress, o utilizaron un marco temático para crear un tema personalizado.
Si bien los marcos temáticos de WordPress facilitaron la creación de un tema de WordPress, son una solución para los desarrolladores, no para el propietario promedio de un sitio web .
Por otro lado, los complementos de creación de páginas de WordPress hicieron que fuera muy fácil crear diseños de página personalizados usando una interfaz de arrastrar &, pero estaban limitados a diseños solamente. No se podían crear temas personalizados con él.
Hasta que Beaver Builder, uno de los mejores complementos de creación de páginas 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 aprender a codificar.
Echemos un vistazo a cómo usar Beaver Themer para crear fácilmente un tema de WordPress.
Video tutorial
Si no te gusta el video o necesitas más instrucciones, continúa leyendo.
Configurando Beaver Themer para Cree un tema personalizado
Beaver Themer es un complemento adicional para Beaver Builder, por lo que necesitará ambos complementos para este artículo.
Primero, debe instalar y activar los complementos Beaver Builder y Beaver Themer. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.
Beaver Themer le permite crear un tema personalizado, pero aún necesitará un tema para comenzar. Recomendamos utilizar un tema ligero que incluya una plantilla de página de ancho completo para que actúe como tema de inicio.
Puede 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 opciones son:
- Astra: un tema de WordPress para todo uso, liviano y gratuito que viene con soporte integrado para Beaver Builder.
- OeanWP: otro popular tema de WordPress multipropósito gratuito que viene con soporte completo para el creador de páginas.
- Temas de StudioPress: todos sus temas son compatibles con Beaver Builder y funcionarían muy bien con Beaver Themer.
Por el bien de este tutorial, usaremos Astra, que es un tema de WordPress ligero y fácil de personalizar.
Configuración de su tema para Beaver Themer
Al crear un tema personalizado de WordPress con Beaver Themer, es importante asegurarse de que Beaver Themer tenga acceso al cuerpo completo de la página (desde 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 cambie eso visitando el panel de administración de su sitio web y luego navegue hasta Apariencia «Página de personalización». Desde aquí, debe cambiar a la pestaña Diseño «Barras laterales».
Una vez allí, simplemente seleccione Sin barra lateral debajo de la opción de diseño predeterminada y haga clic en el botón Publicar para guardar los cambios. .
Su tema ahora comenzará a usar 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 que Beaver Themer use cada centímetro de la pantalla, para que pueda crear una hermosa experiencia visual de un extremo a otro.
La mayoría de los temas de WordPress incluyen un archivo de plantilla para 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 puede encontrarlo, comuníquese con el desarrollador de su tema y es posible que él pueda ayudarlo con eso.
Una vez que haya configurado su tema con 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 complemento de creación de páginas, Beaver Builder le permite arrastrar y soltar elementos en 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 componen 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 varios módulos
- Módulo: un elemento que genera información específica como título, bloque de texto, tabla, galería, etc.
Simplemente edite una página en Beaver Builder y luego haga clic en el botón Agregar en la esquina superior derecha. Luego puede arrastrar y soltar columnas, filas, módulos a su página y comenzar a editarlos de inmediato.
Si no quiere empezar desde cero, 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 obtener más información, consulte nuestro artículo sobre cómo crear un diseño de página personalizado con Beaver Builder.
Sin embargo, no solo queremos crear diseños de página. Queremos crear un tema personalizado completo.
Aquí es cuando entra Beaver Themer.
Agrega otro elemento a Beaver Builder llamado «Themer Layout».
Estos diseños le permiten crear diseños personalizados para el encabezado, pie de página, áreas de contenido, página 404 y otras partes de la plantilla .
Estos son los componentes básicos de todos los temas de WordPress y, al usarlos, podrá crear un tema personalizado que se adapte a sus necesidades.
Uso de las plantillas Beaver Themer para crear un tema personalizado de WordPress
En las siguientes instrucciones, lo guiaremos a través de los pasos necesarios para crear los elementos de temas personalizados más populares. Cuando haya terminado, habrá transformado completamente su tema base en un tema hijo de WordPress totalmente personalizado.
Creación de un encabezado personalizado para su tema
Comencemos con su área de encabezado del sitio web. Un encabezado personalizado es un componente esencial de un tema y crear uno puede ser complicado con los métodos tradicionales.
Afortunadamente, Beaver Themer tiene funciones de encabezado integradas. Puede usar la plantilla creada previamente o usar el menú y los módulos de imagen con un diseño de dos columnas.
Para llegar a esta área de encabezado, primero, necesitaremos configurar un diseño de encabezado en Beaver Themer. Visite Beaver Builder «Agregar nueva página y proporcione un título para su encabezado.
Después de eso, seleccione Diseño de Themer como el tipo y «Encabezado» como la opción de diseño. Una vez que haya terminado, haga clic en el botón «Agregar diseño de Themer» para continuar.
Esto lo llevará a la página de configuración de diseño. Desde aquí debe seleccione Todo el sitio como la ubicación donde se mostrará la plantilla de encabezado.
Luego, haga clic en Iniciar Botón de Beaver Builder para abrir la interfaz del constructor.
Beaver Builder se iniciará con un diseño de encabezado básico de una sola columna y dos filas como punto de partida.
Puede usar las mismas herramientas de arrastrar y soltar de Beaver Builder para cambiar el fondo, los colores, el texto, etc. También puede agregar otros módulos, cargar plantillas prefabricadas y agregar filas / columnas haciendo clic en el botón Agregar en la esquina superior derecha.
Una vez que esté satisfecho con el diseño, haga clic en el botón Listo 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, todavía no mostrará ningún contenido, y probablemente verá el área de pie de página de su tema base .
Cambiemos esto.
Creación de un pie de página personalizado para su tema
Puede crear un pie de página personalizado para su tema usando Beaver Themer tal como creó un encabezado personalizado.
Dirígete a Beaver Builder «Agregar nueva página y proporciona un título para el diseño de tu pie de página. A continuación, selecciona» Diseño de Themer «como tipo y» Pie de página «como opción de diseño.
Haga clic en el botón Agregar diseño para continuar.
Esto lo llevará a la página de configuración de diseño. aquí debe seleccionar Todo el sitio como la ubicación en la que se mostrará la plantilla.
Luego, haga clic en el botón Iniciar 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 usar este diseño como punto de partida y comenzar a editar.
Puede agregar módulos, bloques de texto o cualquier otra cosa que desee. Siempre puede cambiar colores, fuentes, agregar una imagen de fondo y más.
Una vez que esté satisfecho con el diseño, haga clic en el botón Listo para guardar o publicar su diseño.
Crear área de contenido para publicaciones y páginas
Ahora que Hemos creado encabezados y pies de página para cada página y publicación en el sitio web, es hora de crear la publicación o el cuerpo de la página (el área de contenido).
Comenzaremos de la misma manera que construimos el encabezado y pie de página agregando el diseño «Singular» en la página Agregar nuevo.
A continuación, elegirá dónde mostrar este diseño. Puede elegir singular para usarlo para todas las publicaciones y páginas individuales, o puede elegir publicaciones o solo las páginas.
Después de eso, haga clic en el botón Iniciar 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 del contenido, el cuadro de biografía del autor y el área de comentarios.
Puede señalar 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 Listo 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 continuar con la creación de 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.
Creemos un diseño para las páginas de archivo en su tema personalizado.
Comenzará por visitar Beaver Builder «Agregar nueva página y proporcionar un título para el diseño de su archivo.
Después de eso, seleccione Themer Layout como tipo y Archive como la opción de diseño. Haga clic en el botón Add Themer Layout para continuar.
Esto lo llevará al diseño página de configuración. 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.
Luego, haga clic en el botón Iniciar Beaver Builder para abrir la interfaz del constructor.
Beaver Builder iniciar con un diseño de archivo básico de una sola columna. Mostrará el título del archivo en la parte superior, seguido de publicaciones.
Puede señalar 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 plantilla, página de resultados de búsqueda, y más.
Con la función de arrastrar y soltar incorporada de Beaver Builder, puede crear fácilmente su propio tema personalizado de WordPress desde cero sin tener que escribir código. Este es realmente 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 cómo crear un tema de WordPress personalizado sin aprender a codificar. También es posible que desee ver nuestra guía sobre cómo acelerar su sitio web de WordPress para mejorar el SEO y la experiencia del usuario.
Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.