• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Clases CSS basadas en el Rol de usuario en WordPress

Clases CSS basadas en el Rol de usuario en WordPress

Clases CSS basadas en el Rol de usuario en WordPress

[ 18 noviembre 2020 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

css

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Resultado final

 

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Agregar CSS personalizado al área de administración de WordPressAgregar CSS personalizado al área de administración de WordPress
  • Clases CSS por defecto WordPressEstilos CSS por defecto que genera WordPress
  • Búsqueda en tabla personalizada en WordPressBúsqueda en tabla personalizada en WordPress
  • login y logout en un menú de WordPressAgregar login y logout en un menú de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Agustin

    19 noviembre, 2020

    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

    • Jhon Marreros Guzmán

      20 noviembre, 2020

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Evitar la selección de texto, copiar y pegar en WordPress

Agregar login y logout en un menú de WordPress

Configura el Tema Twenty Nineteen WordPress

Mover la carga de Javascript y CSS al footer en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2022 Todos los derechos reservados