Sigue este blog vía RSS, en el Fediverso en @acambronero@www.blogpocket.com, o vía email.

You don’t speak Spanish? Explore a selection of Blogpocket posts in English

Cómo construir un tema de bloques (resumen de lo publicado en Blogpocket y estado del arte)

CONSTRUIR-TEMA-DE-BLOQUES-1024x576 Cómo construir un tema de bloques (resumen de lo publicado en Blogpocket y estado del arte)

En este post resumimos lo publicado hasta ahora en Blogpocket sobre cómo construir un tema de bloques y actualizamos el estado del arte (WordPress 6.2 Dolphy).

Resumen de lo publicado en Blogpocket

Estado del arte

Desde 2001, he buscado que se pueda crear un sitio web sin código, incluida la personalización del front-end, sin depender de las restricciones impuestas por los desarrolladores de temas. ¡Y por fin hoy es posible con WordPress! Un ejemplo: mi última criatura (Artxtu Formació) hecha solo con bloques nativos y el plugin ACF.

El 29 de marzo de 2023, Anne McCarthy publicó Exploración del programa FSE: Crear un tema de bloques. En ese artículo se describía detalladamente el proceso para crear un tema de bloques.

Con el lanzamiento de WordPress 6.2, se buscaba explorar el Editor del sitio como una herramienta de diseño, pidiéndole a la gente que creara un tema de bloques, sin ningún código, directamente en el editor y usando las herramientas actuales. El objetivo era encontrar brechas en la funcionalidad y obtener comentarios sobre la experiencia de usar el Editor del sitio de esta manera centrada en el diseño, mientras se buscaba expandir la cantidad de temas de bloques.

Resumen del proceso para crear un tema de bloques

De acuerdo a esa propuesta, el proceso para crear un tema de bloques es muy fácil y se podría resumir de la siguiente manera:

  • Ten un sitio de prueba usando la última versión de WordPress. Es importante que este no sea un sitio de producción/en vivo. Para ello, es recomendable usar la aplicación Local.
  • Instala y activa el plugin Create Block Theme.
  • Instala y active Gutenberg 15.7 (o la última versión). Esto es opcional.
  • Ve a Apariencia > Crear tema de bloques.
  • Elige «Crear tema en blanco» para comenzar completamente desde cero o puedes usar el tema de bloques actualmente activo, eligiendo la opción «Clonar». Puedes partir de cualquier tema; por ejemplo, el Twenty-Twenty Three.
  • Completa la información para cualquiera de las opciones. Cuando hayas terminado, selecciona «Generar».
  • Dirígete a Apariencia > Temas y activa el tema que acabas de crear.
  • Dirígete a Apariencia > Administrar fuentes del tema.
  • Desde ahí, puedes agregar una fuente de Google o una fuente local. Esto instalará las fuentes como parte del tema, pero esas fuentes aún deben aplicarse. 
  • Una vez agregada, puedes administrar los pesos de fuente. 
  • Una vez que hayas terminado, dirígete a Apariencia > Editor y abre Estilos para configurar esas fuentes para usarlas en tu tema en Tipografía. 
  • Dirígete a Apariencia > Editor y comienza a personalizar como quieras.
  • Cuando hayas terminado de hacer los cambios, ve a Apariencia > Crear tema de bloques.
  • Desde allí, elige la opción «Exportar». Esta opción incluirá automáticamente los cambios de usuario para que no tengas que sobrescribirlos primero.

Et voilà. Ahí tendrás un tema nuevo creado por ti desde cero o basado en uno cualquiera.

Crear un tema de bloques a partir de Frost

Frost es el tema que tenemos en Blogpocket y con el que hemos diseñado un front-end brutalista y con el que hemos conseguido que la página home sea más limpia que el 95% de las páginas web probadas en websitecarbon.com. Solamente se produce la cantidad de 0,05g de CO2 cada vez que alguien la visita. Si la página recibiese unas 10.000 visitas al mes durante un año, emitiría la misma cantidad de carbono que absorbe un árbol en ese año.

Además, Frost viene con un completo conjunto de patrones de bloque minimalistas con el fin de ayudarte a diseñar fácilmente las plantillas y páginas de tu sitio web.

Siguiendo el método visto anteriormente, en este boletín enviado a nuestros suscriptores por email, dábamos las pautas para crear un tema de bloques a partir de Frost:

  • Para la creación manual de un tema básico, basado en Frost, te remito al artículo de Brian Gardner How (and Why) to Build a Base WordPress Theme. Sin embargo, es muy sencillo porque solo hay que entrar en style.css, function.php y todos los archivos dentro de la carpeta /patterns, cambiando la referencia al nombre del tema; es decir sustituyendo “frost” por “mi-tema” (siendo “mi-tema” el nombre otorgado al nuevo tema).
  • Como hemos visto, con el plugin Create Block Theme también lo puedes hacer, ahorrándote los cambios manuales. Simplemente, personaliza el tema y luego elige la opción “Clone Frost”, rellenando los valores del formulario (nombre del tema, autor, etc.).
  • Frost ha implementado un generador de temas básicos. Este generador tomará el último código fuente de Frost y reemplazará todas las instancias de las palabras, y otra información del tema para obtener un nuevo tema iniciado listo para usar.

En el siguiente episodio de HECHO CON BLOQUES, te explico cómo crear un tema de bloques a partir de Frost.

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de acambronero

Copia y pega esta URL (https://www.blogpocket.com/?p=74990) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido