Descubre en este tutorial cómo añadir CSS personalizado a un bloque de WordPress usando el fichero theme.json.
El fichero theme.json permite tal grado de personalización de un tema de WordPress que merece la pena familiarizarse con él.
Por eso, estoy publicando una serie de tutoriales centrados en que entiendas cómo funciona y, sobre todo, cómo puedes personalizarlo a tu gusto.
A partir de WordPress 6.2 se añadió la posibilidad de añadir CSS personalizado directamente desde el fichero theme.json.
Así que en este tutorial vamos a ver cómo puedes hacerlo.
Instrucciones para añadir CSS personalizado a un bloque en un tema de WordPress
1. Modificar (o crear) el fichero theme.json
En caso de que tu tema ya cuente con un fichero theme.json busca la sección de "styles" (si no existe, créala al mismo nivel que "settings") y añade lo siguiente.
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
En este sencillo ejemplo estás añadiendo el CSS al bloque de botón, para que el fondo sea negro.
En caso de que el tema no cuente con uno, tienes que crear un fichero llamado theme.json y colocarlo en la raíz de tu tema. Te recomiendo que eches un ojo al tutorial donde explico la anatomía del fichero theme.json.
Una vez lo hayas hecho, añade el siguiente código:
Para ver este código y los otros 1921 snippets de esta web,
identifícate o suscríbete aquí.
2. Interfaz en el editor de bloques
Una vez que hayas añadido este snippet, bien sea añadiendo un nuevo fichero theme.json o modificando uno existente, verás que el código se muestra en los ajustes avanzados del bloque (en el apartado de estilos globales).
Conclusiones
Ahora ya sabes cómo añadir CSS personalizado en cualquier bloque en un tema de WordPress usando el fichero theme.json.
Si tienes alguna duda sobre este tutorial, déjala en los comentarios.
¿Sugerencias para próximos snippets? Envíamelas con el formulario de contacto.
Todo ventajas de ser suscriptor.
