Cómo crear un tema de bloque de WordPress (en 3 pasos)

Como principiante de WordPress, es posible que haya evitado crear temas personalizados en el pasado reciente, pensando que requería un proceso de codificación complicado. Ahora puede personalizar todo su sitio web con Full Site Editing (FSE), pero aún queda el problema de exportar sus diseños personalizados.

Afortunadamente, puede crear fácilmente un tema de bloque con el complemento Crear tema de bloque. Después de personalizar su tema con el Editor del sitio, puede exportarlo como un tema de bloque personalizado. Luego, puede instalarlo en otros sitios web en lugar de tener que reconstruir su diseño desde cero.

En esta publicación, explicaremos qué es un tema de bloque y cómo puede usar la herramienta Crear tema de bloque para crear uno. Luego, le mostraremos cómo hacerlo en tres sencillos pasos. ¡Empecemos!

¿Qué es un tema de bloque de WordPress?

Cuando se lanzó Gutenberg como parte de WordPress 5.0, transformó por completo la experiencia de creación de contenido. Esto se debe a que su nuevo Editor de bloques le permitió personalizar publicaciones y páginas agregando diferentes bloques de contenido:

En 2021, WordPress amplió aún más esta función. La actualización 5.8 lanzó la edición completa del sitio, lo que le permite crear todo su sitio web utilizando un sistema basado en bloques. Con el Editor del sitio, puede agregar bloques temáticos a su sitio web, crear plantillas de bloques y más:

Sin embargo, para comenzar a usar la edición completa del sitio, deberá instalar un tema de bloque. En pocas palabras, estos son temas creados con bloques de Gutenberg.

Estas son algunas de las funcionalidades que obtendrá al instalar un tema de bloque de WordPress:

• Edite cualquier parte de su sitio web sin código
• Personaliza los colores y la tipografía con Global Styles
• Mejore la velocidad del sitio cargando solo estilos para bloques renderizados en la página
• Agregue funciones de accesibilidad como un botón Saltar al contenido y navegación con el teclado

Usando un tema de bloque, puede tener un control completo sobre el diseño de su sitio. Anteriormente, habría sido difícil editar archivos de temas sin conocimientos de codificación. Sin embargo, ahora cualquiera puede personalizar un sitio web simplemente creando y editando diseños de bloques.

Una introducción al complemento Crear tema de bloque

En muchos casos, los propietarios y desarrolladores de sitios web crean temas secundarios personalizados para ayudarlos a personalizar un sitio web. Un tema hijo es simplemente un tema que hereda la apariencia y la funcionalidad de su tema principal. Con un tema secundario, puede editar de forma segura un tema de bloque sin perder los cambios con las nuevas actualizaciones de software.

Puede crear un tema secundario creando una nueva carpeta de tema y una hoja de estilo con la codificación del tema principal. Suena bastante simple, pero a menudo implica el uso de técnicas complicadas que pueden ser difíciles para los principiantes.

Afortunadamente, los desarrolladores de WordPress crearon el complemento Create Block Theme para resolver este problema. Gracias a esta nueva herramienta, puedes exportar fácilmente tu tema de bloque editado:

Eso significa que puede crear temas de bloques personalizados y luego usarlos en otros sitios web. Después de realizar cambios con el Editor del sitio, puede descargar su nuevo diseño como un tema secundario, un clon o una variación de estilo del tema principal. Esto puede simplificar el diseño del sitio web y hacerlo más accesible para los usuarios de todos los niveles.

Cómo crear un tema de bloque de WordPress (en 3 pasos)

Ahora que conoce los temas de bloques y sus ventajas, analicemos cómo crear uno en WordPress. De esta forma, no tendrá que editar archivos de tema cada vez que necesite crear un nuevo tema de bloque.

Paso 1: instala un tema de bloque de WordPress

Para crear su primer tema de bloque, deberá comenzar con un tema de bloque principal. Usando el directorio de temas de WordPress, puede elegir entre más de cien opciones diferentes. Aquí, simplemente haga clic en la pestaña Bloquear temas para agregar un filtro de edición completa del sitio :

Una vez que encuentre un tema de bloque que le guste, puede descargarlo. Luego, ve a Apariencia > Temas en tu panel de WordPress para instalar y activar el nuevo tema. Para este tutorial, usaremos Twenty Twenty-Two:

Ahora deberá seleccionar Complementos> Agregar nuevo y buscar 'Crear tema de bloque'. A continuación, instale y active el complemento:

Antes de comenzar a editar su tema, también deberá tener la última versión del complemento de Gutenberg. Si aún no lo ha hecho, asegúrese de que esta herramienta también esté instalada, activada y actualizada.

Paso 2: personaliza tu tema con el editor del sitio

A continuación, puede abrir el Editor del sitio y modificar el tema de su bloque. Para hacer esto, vaya a Apariencia > Editor (beta) :

Esto abrirá el Editor de sitio completo. Aquí, puede hacer clic en elementos específicos como el encabezado o el pie de página para cambiar la configuración del bloque:

Al hacer clic en el ícono del círculo de duotono en la esquina superior derecha, puede actualizar la tipografía, los colores y el diseño. Incluso puede elegir una de las combinaciones de estilo de tema predeterminadas:

Si necesita agregar nuevos bloques, puede seleccionar el botón +. De esta lista de opciones, simplemente puede arrastrar y soltar elementos en la página:

Para ver las plantillas de su tema, haga clic en el logotipo de WordPress en la esquina superior izquierda. Aquí, puede seleccionar Plantillas o Partes de plantilla :

Dependiendo de sus objetivos de diseño, es posible que desee agregar nuevas plantillas. Alternativamente, puede editar las opciones predeterminadas disponibles:

Después de seleccionar una plantilla, abrirá el editor de plantillas. Puede editar esta página agregando nuevos bloques, patrones de bloques o partes de plantillas:

En última instancia, hay formas casi infinitas en las que puede diseñar su tema de bloque. Una vez que haya realizado todas las ediciones necesarias, guarde los cambios.

Paso 3: exporta tu tema de bloque

Para reutilizar este tema de bloque en otros sitios web, vaya a Apariencia > Crear tema de bloque . Esto le permitirá exportar su nuevo tema de bloque de diferentes maneras:

Si desea exportar el tema con los cambios que acaba de realizar, seleccione Exportar . Sin embargo, aquí están las opciones de exportación alternativas disponibles con el complemento Create Block Theme:

• Crear un tema secundario : Descarga un nuevo tema secundario usando el tema activado como principal.
• Clonar el tema actual : clona el tema activado, incluidos todos sus activos y cambios de usuario.
• Sobrescribir archivos de tema : guarda las ediciones como cambios de tema y luego elimina los cambios del usuario.
• Generar tema en blanco : crea un tema repetitivo dentro del directorio de temas de su sitio.
• Crear una variación de estilo : guarda los cambios como una variación de estilos globales del tema activado.

Si selecciona Exportar o Sobrescribir , simplemente puede descargar sus archivos de tema. Para cualquier otra opción, deberá proporcionar un nombre de tema, descripción, URI de tema, autor y URI de autor:

La única excepción es la variación de estilo. Esto requiere solo un nombre de variación :

Después de seleccionar una de estas opciones, haga clic en Crear tema . Esto descargará su tema de bloque personalizado como un archivo .zip, que contiene todos los archivos de tema editados. Luego puede instalar este tema en otros sitios para acelerar el proceso de desarrollo.

Conclusión

Antes de la edición completa del sitio y los temas de bloques, crear su propio diseño de sitio web único era un proceso complicado. Si es un principiante de WordPress, es posible que no tenga las habilidades de codificación necesarias para el trabajo. Sin embargo, ahora, el Editor del sitio y el complemento Crear tema de bloque pueden trabajar juntos para simplificar radicalmente esta tarea que antes era complicada.

En resumen, así es como puede crear un tema de bloque de WordPress:

1. Instala un tema de bloque de WordPress.
2. Personaliza tu tema con el Editor del sitio.
3. Exporte su tema de bloque con Crear tema de bloque.

¿Tiene alguna pregunta sobre cómo crear su primer tema de bloque en WordPress? ¡Háganos saber en la sección de comentarios!