Si tienes un sitio web de WordPress y quieres mostrar u ocultar elementos HTML según el rol de los usuarios, estás en el lugar correcto. En este artículo, te explico cómo hacerlo con un poco de código PHP y CSS.
Paso 1: Agregar una clase al body según el rol del usuario
Lo primero que necesitas hacer es agregar una clase al body de tu sitio web según el rol del usuario actual. Para hacer esto, puedes usar la función add_role_class_to_body que agregará una clase para cada rol que tenga el usuario actual:
function add_role_class_to_body($classes) {
$user_roles = wp_get_current_user()->roles;
foreach ($user_roles as $role) {
$classes[] = $role;
}
return $classes;
}
add_filter('body_class', 'add_role_class_to_body');
Este código agrega una clase para cada rol que tenga el usuario actual. Por ejemplo, si un usuario tiene el rol de «Autor» y «Colaborador», la clase «author» y «contributor» se agregarán al body.
Este código tienes que agregarlo en el «functions.php» de tu tema hijo o utilizar algún plugin como CODE SNIPPETS.
Paso 2: Ocultar elementos HTML según el rol del usuario
Ahora que tienes las clases según el rol del usuario en el body, puedes usar CSS para mostrar u ocultar elementos HTML según el rol del usuario. Por ejemplo, si deseas ocultar un elemento HTML con la clase «header» para los usuarios con el rol de «Autor», puedes usar el siguiente código CSS:
body.author .header {
display: none;
}
Este código selecciona el elemento con la clase «header» y lo oculta utilizando la propiedad display: none;. Pero, solo se aplica si el body tiene la clase «author», que solo se agregará si el usuario ha iniciado sesión y tiene el rol de «Autor».
Paso 3: Modificar el código para otros roles de usuario
Si deseas ocultar elementos HTML para otros roles de usuario, simplemente agrega una nueva regla CSS que incluya la clase correspondiente. Por ejemplo, si deseas ocultar el mismo elemento para los usuarios con el rol de «Colaborador», puedes usar el siguiente código CSS:
body.contributor .header {
display: none;
}
Este código selecciona el elemento con la clase «header» y lo oculta utilizando la propiedad display: none;. Pero, solo se aplica si el body tiene la clase «contributor», que solo se agregará si el usuario ha iniciado sesión y tiene el rol de «Colaborador».
En el siguiente vídeo vamos a ver como agregar el código y como ocultar elementos a los roles de suscriptor y autor utilizando la class del elemento en sí y la class de cada rol.
Ahora sabes cómo mostrar u ocultar elementos HTML según el rol de los usuarios en WordPress utilizando un poco de código PHP y CSS. Con este enfoque, puedes personalizar la experiencia de los usuarios según su rol en tu sitio web de WordPress. ¡Inténtalo!
Nos vemos en el siguiente tutorial.
Un saludo.