Como modificar el aspecto de un tema de bloques de WordPress

En un artículo anterior, vimos como crear un nuevo tema de bloques desde cero para WordPress. Si no has leído dicho artículo, es importante que lo leas ya que aunque lo que vamos a explicar en este se aplica a cualquier tema de bloques, vamos a hacer uso de un plugin y vamos a dar por sabidos varios conceptos que se explicaron en dicho artículo.

El archivo theme.json

Lo primero que debemos de hacer, es una copia del archivo theme.json del tema que vamos a modificar. Así, si lo «rompemos», siempre podemos restaurarlo.

Después, debemos de comprobar si este archivo JSON tiene dentro de «settings» una propiedad llamada «appearanceTools» con valor «true». Si has creado el tema utilizando el plugin Create Block Theme, lo más probable es que ya tengas dicha propiedad con el valor correcto.

En caso contrario, debes de añadir dicha propiedad dentro de «settings» tal y como se aprecia en la imagen de arriba. Si no sabes lo que es un archivo JSON, se trata de un formato utilizado para almacenar (e intercambiar) información organizada mediante la forma que tienen los objetos en JavaScript.

Aunque podemos modificar el aspecto del tema «simplemente» manipulando este archivo, lo suyo es hacer uso de las herramientas que nos ofrece WordPress (y la ayuda el plugin Create Block Theme).

Con la propiedad «appearanceTools» puesta con valor «true», WordPress nos dará acceso a más herramientas para configurar el aspecto del tema.

Una vez hecho este cambio, ya podemos entrar en nuestro WordPress e ir al editor de temas (Apariencia > Editor) para modificar nuestro tema. Una vez en el editor, podemos darle al botón de «Estilos» para empezar con el cambio de aspecto.

A continuación, vamos a ver como utilizar las herramientas que nos proporciona WordPress para cambiar el aspecto de nuestro tema. Aunque, como siempre existe la posibilidad de que queramos añadir algo de código CSS directamente, podemos utilizar el botón de los 3 puntitos y seleccionar la opción de «CSS adicional».

Añadir nuevas fuentes a nuestro tema

Para añadir una o varias tipografías a nuestro tema, debemos de ir al apartado «Tipografía» (en el editor de estilos del tema).

Allí podremos consultar las fuentes disponibles en nuestro tema (si el tema es nuevo solo nos saldrá la fuente del «sistema»). Y después, le damos al botón «Gestionar fuentes«, que hay justo arriba del listado de fuentes disponibles.

Después, nos aparecerá una pantalla con varias pestañas donde podremos «Subir» nuestras fuentes, o «Instalar Fuentes«. En esta última pestaña, tendremos la opción para conectarnos a Google Fonts y elegir alguna de las fuentes que pone a nuestra disposición de forma gratuita.

En mi caso, he hecho uso del buscador incorporado para buscar la fuente Montserrat, y después, he elegido los grosores que quiero utilizar; tamaño normal (400) y grueso/negrita (700).

Es importante seleccionar solo aquellos aquellas fuentes y aquellos grosores que vamos a utilizar, a fin de evitar que después nuestro sitio web cargue demasiado lento.

Para darle algo de variedad es recomendable instalar alguna fuente secundaria, en mi caso voy a instalar la fuente «Averia Serif Libre».

Una vez tenemos las fuentes deseadas podemos seleccionar, uno a uno, a que tipo de elementos se aplicará cada fuente.

Al hacer clic en uno de estos elementos, podremos seleccionar la fuente deseada, el grosor, el interlineado (alto de línea), espacio entre letras, etc.

Una vez hemos terminado, podemos darle al botón «Libro de estilos» (el del ojo) para tener una visión general de como se verán los diferentes elementos con las tipografías indicadas.

Si no te aparecen las tipografías que has seleccionado, es posible que tengas que salir y volver a entrar en el editor.

Cambiar los colores de nuestro tema

Si no eres diseñador, lo primero que debes de hacer es decidir que colores vas a utilizar en tu tema (si eres diseñador, probablemente ya lo hayas decidido). Esta no es una cuestión banal. No es correcto hacer una elección azarosa de los colores. Los colores elegidos deben de ir a juego con cosas como lo que quieres transmitir, con el color del logotipo de la empresa, etc.

Si no haces una elección de colores adecuada es muy probable que el aspecto de tu tema no sea agradable. Afortunadamente, existen varias páginas que te van a permitir elegir una paleta de colores adecuada para tu tema. Como por ejemplo; Adobe Color, Color Hunt o Coolors.

Una vez tengas seleccionada tu paleta con 3, 4 o incluso 5 colores (junto con el blanco, negro y gris, claro), en el editor de estilos del tema, en la opción de Colores (justo debajo de la opción Tipografía), hacemos clic sobre el botón de Paleta para configurarla:

Aquí podremos ver una serie de colores por defecto, y tendremos la opción de añadir colores personalizados con el botón +.

A cada color que añadamos, le podemos dar un nombre. De hecho, es muy recomendable darle uno y de este modo dejar claro para que vamos a utilizar cada color personalizado.

Una vez hemos añadido nuestros colores, le damos al «botón» de «Hecho«. Y después, al igual que hicimos con la tipografía, para cada elemento indicamos que color (o colores) va a utilizar.

Ten en cuenta que algunos elementos tienen 2 colores; uno para el texto y otro para el fondo.

Cambios de estructura

Además de la tipografía y los colores, el editor de estilos también nos permite realizar algunos cambios adicionales. Entre ellos tenemos las Sombras y la Estructura. Para no alargar demasiado el artículo nos vamos a centrar solo en la estructura, que tiene mayor interés.

En esta opción (Estructura), además de poder ajustar la separación por defecto entre los bloques (Espaciado del bloque), podemos ajustar el ancho del contenido de nuestra página.

Además, disponemos también de un segundo ancho del contenido llamado «Amplio«. Después, cuando estemos creando nuestro contenido, este ancho (amplio) podemos indicarlo en algunos nodos. Como por ejemplo, los nodos de tipo Galería.

Ajustes por cada tipo de bloque

Además de todos los cambios «globales» que hemos visto, también tenemos la opción de hacer ajustes adicionales por cada tipo de bloque.

Dependiendo del tipo de bloque nos saldrán unas opciones u otras (en algunos tipos de bloques nos permitirá elegir el tipo de Sombra, por ejemplo). Pero lo que normalmente nos saldrá casi siempre, son las opciones para indicar el relleno, los márgenes, y una opción de «Avanzado» donde poder indicar código CSS especifico para dicho tipo de bloques.

Guardar los cambios en los archivos del tema

Y básicamente eso seria todo en lo que respecta a modificar el aspecto.

Las modificaciones que hemos hecho en el aspecto se guardan en la base de datos. Esto puede suponer un problema (o algo indeseable) según las circunstancias. Afortunadamente, gracias al plugin Create Block Theme podemos guardar los cambios que hemos hecho en los archivos del tema:

Para ello hacemos clic sobre el botón de los 3 puntitos, después sobre la opción de «Create Block Theme«, y una vez dentro:

Seleccionamos la opción de «Guardar cambios en el tema«, y nos aseguramos de marcar las casillas de las fuentes y los cambios de estilos:

Y ahora si, ya tenemos los cambios de aspecto de nuestro tema guardados en los ficheros del tema. Si revisas dichos archivos, podrás ver una carpetita nueva llamada «fonts» con las fuentes. Además, si le echas un vistazo al contenido del archivo «theme.json«, verás que dentro están todas las modificaciones de aspecto que has realizado en el tema.

Y nada más, con este, finalizamos esta serie de artículos sobre los temas de bloques de WordPress. Esperamos que os hayan resultado interesantes 🙂