Si sigues el blog hace tiempo, y has tenido ya más de 15 años para hacerlo, sabrás que en bastantes ocasiones comparto pequeños fragmentos de código CSS que, añadidos a tu web, pueden modificar fácilmente el aspecto e incluso funcionalidades.
Hace unos años, cuando había que añadir CSS personalizado lo hacíamos, o directamente en la hoja de estilos del tema, mejor si era un tema hijo. Más adelante, con la llegada del personalizador de WordPress, el modo más sencillo pasó a ser añadir estos códigos en la sección de CSS adicional de esta herramienta.
Pero con la llegada de los bloques, de Gutenberg, todo cambió, y , si te decidiste por usar un tema de bloques, o de edición completa del sitio, seguro que más de una vez te has preguntado por dónde puñetas se añade ahora el CSS personalizado.
Añadir CSS personalizado en temas de bloques desde el personalizador
¡Sorpresa! ¿Pensabas que por usar un tema de bloques o de edición completa del sitio no tenías acceso al personalizador? Pues resulta que no.
Lo que desaparece es el enlace al personalizador de la administración de WordPress, pero sigues pudiendo acceder a un personalizador básico, con poca cosa, pero funcional para lo que nos ocupa hoy.
Solo tienes que añadir /wp-admin/customize.php a la URL de tu sitio. Por ejemplo: https://midominio.com/wp-admin/customize.php, y se abrirá el personalizador, en el que una de las secciones que permanece es la de CSS adicional.
Como ves, ahí está, y puedes seguir usándolo para añadir fragmentos de código CSS igual que hacías con los temas clásicos.
Añadir CSS personalizado en temas de bloques desde editor del sitio
Ahora bien, más te vale que empieces a acostumbrarte a prescindir del truco anterior, porque, entre otras cosas, no sabemos cuánto durará ese atajo y truco; es bastante probable que en algún momento la API del personalizador deje de estar disponible, no será enseguida, porque hay centenares de miles de temas clásicos, algunos entre los más populares, y solo unos cientos de temas de bloques, pero llegará el momento.
Por otra parte, el futuro de WordPress está hecho de bloques – por si no te habías dado cuenta aún – y nos toca acostumbrarnos, sí o sí.
Así que, ya concienciados de que hay que aprender en profundidad cómo funcionan los temas de bloques, algo imprescindible, que no debe ser un freno a la hora de optar por uno de estos temas, es saber dónde se añade código CSS personalizado en estos temas.
Además, debes tener en cuenta que los temas de bloque, por su naturaleza, tienden a incluir la menor cantidad de código CSS posible. Esto se debe principalmente a que están controlados por un archivo theme.json , que incluye la configuración para cada detalle del tema.
Pero así, con todo eso siendo cierto, habrá multitud de ocasiones en que quieras, o necesites, añadir CSS personalizado adicional a tu web, aunque uses un tema de bloques, algo que en realidad es bastante sencillo, solo que está un poquito escondido…
Para empezar, debes mostrar el panel de estilos:
A continuación, ya dentro del panel de estilos del editor, hacer clic en el menú de los 3 puntitos de más opciones, donde encontrarás el enlace a la sección de CSS adicional:
Y ahí lo tienes, totalmente funcional, igual que en el personalizador, solo que sin resaltado de sintaxis ni ayudas de código predictivo, pero funcional, la caja para añadir código CSS adicional:
En la captura anterior he puesto un ejemplo sencillo de CSS adicional, pero mi consejo es que antes de añadir códigos demasiado básicos, revises los estilos globales del tema activo, y si procede cambiarlos ahí, pues muchos de estos cambios estarán a golpe de clic, dejando la caja de CSS adicional únicamente para aquellos códigos personalizados que realmente necesites añadir y no estén contemplados en los estilos del tema activo.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
