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.
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/
Hola Jhon, muchas gracias por tu vídeo, es justo lo que necesito para mi web, pero me gustaría que en vez de regular la visibilidad de un widget, lo que se oculte o no, debe de ser un link.
Veo que has implementado dos widgets con el id “#custom_html-2” y “3”, pero, ¿Cómo podría hacerlo para un enlace?
La idea es que en mi web solo vean ese determinado enlace de descarga de un determinado producto, los usuarios que tienen un rol de “cliente” que ya tengo implementado.
En definitiva, que si han pagado (usuarios con rol “comprador”), puedan ver el enlace de descarga, y los visitantes (usuarios sin rol), no lo vean.
Mi duda es cómo poner un ID a un link…
Espero que puedas ayudarme, si me ayudas te haré una donación por PayPal.
Muchas gracias.
Hola Ruben, lo que planteas es interesante, de manera general se me ocurre agregar una clase CSS al body basada en el rol del usuario, y luego con CSS ocultarlo. Sin embargo lo más seguro seria no generar el enlace en absoluto, evaluaré esto para un futuro artículo.