Descubre en este tutorial cómo añadir una clase CSS personalizada al bloque que tú quieras de forma automática mediante código.
Todos los bloques del editor te permiten añadir clases CSS adicionales desde la interfaz de usuario. De hecho, lo es una opción que hemos usado en muchos tutoriales, para personalizar diseños, modificar consultas o incluso ocultar bloques.
Pero en ocasiones puede ser más interesante poder añadirlas de forma programática. En este tutorial vamos a ver cómo puede hacerlo.
Código para asignar una clase de CSS personalizada a un bloque de WordPress de forma programática
A continuación puedes ver 3 snippets que puedes añadir al final del fichero functions.php o a tu plugin de funcionalidades:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
En estos snippets usas el filtro render_block_{$this->name} en combinación con la clase WP_HTML_Tag_Processor para agregar la clase CSS «clase-personalizada», pero puedes sustituirla por la clase que tú quieras.
Como puede ver, para cada ejemplo tienes que personalizar el filtro (por ejemplo, render_block_core/group) y la etiqueta de HTML (por ejemplo, div). Si quieres usarlo para otro bloque solo tienes que modificar estos parámetros.
Para sacarle más partido todavía a esta estrategia puedes usarlo conjuntamente con etiquetas condicionales de WordPress.
Conclusión
Gracias al filtro render_block_{$this->name} y la clase WP_HTML_Tag_Processor puedes añadir clases CSS personalizadas al bloque que quieras de forma automática.
¿Alguna duda? Te leo en los comentarios.
Y si quieres darme una sugerencia para próximos tutoriales, déjamela en el formulario de contacto. Ventajas de ser suscriptor. 😉
