Cómo añadir una clase CSS al editor de WordPress para dar estilo
Escrito por Luis Ruiz Actualizado el
El editor de WordPress es una herramienta fantástica que facilita la creación y gestión de contenido en tu sitio web. Sin embargo, a veces es posible que desees personalizar aún más su apariencia y funcionalidad.
Una forma efectiva de lograrlo es añadiendo clases CSS personalizadas al editor de bloques de Gutenberg. Estas clases te permiten aplicar estilos únicos, y adaptar el editor a tus necesidades específicas. En este artículo, te mostraremos cómo añadir una clase CSS al editor de Gutenberg para personalizarlo, y darle un toque distintivo a tu experiencia de edición.
¡Sigue leyendo para aprender cómo hacerlo!
A la hora de crear una plantilla de Gutenberg para un tema personalizado para WordPress, vamos a necesitar dar estilo para personalizarlo, tanto al editor de la parte de administración, como la parte frontal de la web.
Para tener un CSS óptimo, la mejor forma de hacerlo es añadiendo una clase al editor Gutenberg de WordPress, y otra en la página visible para todos los usuarios. Utilizaremos el hook admin_body_class para asignar la clase en el body del editor, y body_class para el body de la parte frontal.
Añadir una clase al editor de Gutenberg para personalizarlo
Con este código asignamos una clase en el body, cuyo nombre será el Slug de la plantilla que utilicemos en la administración de WordPress para poder personalizarla.
function bk_add_admin_body_class($classes) {
$template_slug = get_page_template_slug();
if ($template_slug) {
$page_name = basename( $template_slug, '.php' );
$class_name = 'tpl-'. sanitize_html_class( $page_name );
$classes .= ' ' . $class_name;
}
return $classes;
}
add_filter('admin_body_class', 'bk_add_admin_body_class');La función bk_add_admin_body_class es llamada por el filtro admin_body_class. Este filtro se utiliza para agregar clases personalizadas al elemento body en el área de administración de WordPress.
Dentro de la función, la variable $template_slug, toma el valor devuelto por la función get_page_template_slug(). Esta devuelve el nombre de la plantilla de página actual. Para este caso vamos a suponer que el fichero es page-templates/home.php
Luego verificamos si $template_slug tiene un valor. Si es así, si utilizamos la función basename() para obtener el nombre del archivo de la plantilla de página actual sin la extensión .php, el resultado lo almacenaremos en la variable $page_name, que en este caso sería: home.
A continuación, utilizamos la función sanitize_html_class() para eliminar cualquier carácter no permitido del nombre de la página, y se agrega el prefijo tpl- al nombre de la página para que sepamos que es una plantilla. Esto es por tener algo más de contexto, e identificar lo que hace a simple vista. El resultado se almacena en la variable $class_name.
Finalmente, se agrega $class_name a la variable $classes que contiene las clases existentes del elemento body. La función devuelve $classes con la clase personalizada agregada. En este caso añadiría al body la clase tpl-home.
Añadir una clase personalizada al Body de nuestra página
Ahora toca hacer prácticamente lo mismo para la parte frontal, que es la página que se mostrará en nuestra web.
function bk_add_body_class($classes) {
if ( is_admin() ) {
return $classes;
}
$template_slug = get_page_template_slug();
if ($template_slug) {
$page_name = basename( $template_slug, '.php' );
$class_name = 'tpl-'. sanitize_html_class( $page_name );
$classes[]= $class_name;
}
return $classes;
}
add_filter('body_class', 'bk_add_body_class');Es exactamente igual que lo anterior, lo único que cambia es el filtro, que en este caso es body_class. El nombre de la función y la clase, como es lógico, al ser un array en lugar de un string, le añadimos con $classes[] que es una de las formas más sencillas de hacerlo.
Recuerda que para que se muestre en nuestra plantilla los estilos en la etiqueta body de nuestro HTML tiene que existir la función body_class(), algo así: <body <?php body_class( ); ?>>
Conclusión
Al tener disponible una clase en el body de la parte frontal y del editor Gutenberg, puedes asignar un único CSS a los elementos y darles estilo sin conflictos, porque estarán encapsulados dentro de la clase que has creado.
De todas formas, si prefieres no tocar el código, puedes utilizar nuestro «plugin Show name template» para gestionar fácilmente plantillas de WordPress, que tiene esa, y más funcionalidades. O despreocuparte del todo y contactar con un profesional de WordPress para que realice lo que mejor se adapte a tus necesidades.
