• 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
  • Agregar rel=0 a videos YouTube de manera automática en WordPressAgregar rel=0 a videos YouTube de manera automática en WordPress
  • Agregar subtítulos en WordPressAgregar subtítulos en 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.

  2. Gabriel B

    8 junio, 2022

    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 🙂

    • Jhon Marreros Guzmán

      9 junio, 2022

      Hola, revisa el plugin Adminimize, puedes agregar también selectores CSS: https://decodecms.com/eliminar-opciones-de-pantalla-en-wordpress/

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

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Agregar Tabs personalizados en WooCommerce sin plugins

Excluir páginas de la búsqueda de WordPress

Mostrar subcategorías de una categoría en listado de entradas

Mostrar categorías y etiquetas en lista de productos WooCommerce

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