En un artículo anterior habíamos visto los estilos CSS que WordPress genera por defecto, sin embargo no tenemos un estilo que nos indique el rol de un usuario conectado.
Resultado final
En el ejemplo que veremos, buscamos ocultar por CSS los widgets de la barra lateral y mostrar sólo el que corresponde al rol del usuario conectado.
Código para agregar una clase de rol
La idea general es agregar al elemento HTML body una clase adicional que indique el rol del usuario, de esta forma podemos estilizar elementos que se cargan en el sitio de acuerdo a esa clase CSS de rol.
add_filter( 'body_class', function( $classes ){
foreach( (array) wp_get_current_user()->roles as $role ){
$classes[] = "role-$role";
}
return $classes;
});
En el código anterior:
- Usamos el Hook body_class, que hace referencia a una función anónima
- La función pasa el argumento $classes que es un array
- Usamos la función wp_get_current_user() para obtener el rol o roles del usuario actual
- Agregamos los roles encontrados en el argumento
- Finalmente retornamos el argumento $classes modificado
Código CSS
En nuestro ejemplo usamos dos widgets HTML, los cuales ocultamos por defecto y sólo mostramos el que corresponde con el rol correcto de acuerdo a la clase CSS agregada.
#custom_html-2,
#custom_html-3{
display:none;
}
.role-customer #custom_html-2,
.role-author #custom_html-3{
display:block;
}
Conclusión
Como hemos visto, puedes agregar clases adicionales a las clases que genera por defecto WordPress, en este caso nos interesó agregar una clase para mostrar el rol del usuario y de esta forma controlar el diseño particular para un usuario de un determinado rol.
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...
Hola quiero realizar una tienda con woocommerce, el problema es que los productos son personalizados, necesito que el cliente suba imágenes y me lleguen por mail, pero que la cantidad de imágenes que puedan subir sea la cantidad que compren. Si me puedes guiar sería de mucha ayuda
Hola, para lo que comentas, puedes evaluar: https://wordpress.org/plugins/woo-addon-uploads/ , sin embargo para el otro punto de que compre la misma cantidad de imágenes que sube, esto es algo muy particular y posiblemente tendrías que hacerlo con programación a medida.
Saludos.
Hola Jhon, excelente artículo!!! lo pude hacer, pero tengo otra necesidad. Yo quiero ocultar ocultar el campo precio en el administrador de Woocommerce pero según el rol del usuario, la clase se lla específicamente p.form-field._regular_price_field. Por ejemplo el administrador puede acceder a todo sin problemas, pero el que posee el roll shop manager puede cargar productos, PERO No puede modificar precio, por eso quiero ocultar ese campo. Mi duda es que código usar para hacer esto sobre el panel interno de wordpress. Segui este otro tutorial https://decodecms.com/agregar-css-personalizado-al-area-de-administracion-de-wordpress/ pero no logro hacer que me ponga la clase con Rol en el <body del administrador de WP. Solo lo hace sobre el Front end. Desde ya muchisimas gracias por tu ayuda 🙂
Hola, revisa el plugin Adminimize, puedes agregar también selectores CSS: https://decodecms.com/eliminar-opciones-de-pantalla-en-wordpress/