Cómo aplicar CSS para roles de usuario específicos en WordPress (de forma sencilla)

Cambiar la apariencia de su sitio para diferentes roles de usuario puede ayudarle a crear experiencias de usuario personalizadas.

Hemos comprobado que muchos usuarios prefieren sitios web con interfaces personalizadas. Por ejemplo, es posible que desee mostrar elementos específicos a los autores que están ocultos para otros usuarios o dar un estilo diferente a ciertas secciones para los suscriptores o clientes.

En este tutorial, le guiaremos a través de la aplicación de CSS para roles de usuario específicos en WordPress. Esto le ayudará a personalizar diferentes áreas en función de las necesidades específicas de sus usuarios.

Por qué y cuándo aplicar CSS para roles de usuario específicos en WordPress

Gestionamos varios sitios web para nuestras empresas que requieren el inicio de sesión de los usuarios. A menudo nos encontramos con la necesidad de personalizar la apariencia para diferentes roles de usuario.

Al realizar pruebas divididas en esos sitios, hemos descubierto que la personalización mejora enormemente la experiencia del usuario. Una experiencia de usuario mejorada se traduce, en última instancia, en una mayor satisfacción del cliente, más conversiones y más ventas.

Tanto si eres propietario de un sitio web como si lo desarrollas o diseñas, tener control sobre el aspecto de tu sitio para distintos usuarios puede ser muy útil.

He aquí algunos casos de uso común:

• Sitios de afiliación: Puede utilizar CSS personalizado para ofrecer diferentes experiencias a los miembros premium.
• Tiendas de comercio electrónico: puede destacar los carros de la compra, los descuentos para clientes que devuelven y otras funciones para los clientes que han iniciado sesión.
• Blogs con varios autores: Gestionar un blog con varios autores puede resultar complicado. Con CSS personalizado, puede crear una interfaz limpia y eficiente para los editores, manteniendo las cosas simples para los colaboradores y suscriptores.
• Sitios de clientes: Puede crear un área de administración simplificada para los clientes ocultando ciertos elementos con CSS personalizado.

Ahora, el problema es cómo decirle a WordPress qué código CSS cargar para los diferentes roles de usuario.

Aplicación de CSS personalizado para roles de usuario específicos en WordPress

La forma más fácil de gestionar código personalizado, incluyendo CSS, en WordPress es usando WPCode. Es el mejor plugin de fragmentos de código para WordPress y te permite gestionar de forma segura tu CSS personalizado en un solo lugar.

Nota: También existe una versión gratuita de WPCode. Sin embargo, recomendamos actualizar a un plan de pago para desbloquear más funciones.

Por qué recomendamos WPCode:

• Te permite añadir de forma segura cualquier código personalizado, incluido CSS, sin romper tu sitio web. Si un fragmento de código no funciona, puedes desactivarlo fácilmente.
• Viene con potentes herramientas de inserción de código y lógica condicional, que permiten ejecutar un fragmento sólo cuando es necesario.
• Obtendrá acceso a una enorme biblioteca de código con útiles fragmentos de código, lo que le evitará tener que instalar varios plugins por separado.

Dicho esto, vamos a añadir un poco de CSS personalizado y aplicarlo para roles de usuario específicos.

Añadir CSS personalizado en WPCode

En primer lugar, necesitas instalar y activar el plugin WPCode. Para más detalles, consulta nuestro tutorial sobre cómo instalar un plugin de WordPress.

Tras la activación, vaya a la página Fragmentos de código ” +Añadir fragmento. Allí verá muchos fragmentos útiles para diversas tareas.

Sin embargo, como está añadiendo un código CSS personalizado, tendrá que empezar desde cero haciendo clic en “+ Añadir fragmento personalizado” en el cuadro “Añadir su código personalizado (nuevo fragmento)”.

Esto le llevará al editor de código. En primer lugar, debe introducir un título para el fragmento de código y, a continuación, seleccionar “Fragmento CSS” en Tipo de código.

Ahora, puede añadir su código CSS personalizado al cuadro Vista previa del código.

Para este tutorial, usaremos este código, que resalta el menú ‘Entradas’ en el área de administración cambiando su color de fondo. Usted puede utilizar su propio código CSS aquí:

li#menu-posts {
    background-color: #bf0505;
}

Elegir rol de usuario Lógica condicional

A continuación, desplácese hacia abajo hasta la casilla “Lógica condicional inteligente” y active el interruptor situado junto a la opción “Activar lógica”.

A continuación, elija la “Condición” (Mostrar u Ocultar) y haga clic en “Añadir nuevo grupo”.

Haga clic en la primera casilla de la Regla para ampliarla. Verás una lista de reglas entre las que elegir.

Por ejemplo, puede seleccionar el estado de inicio de sesión, la función del usuario, el tipo de dispositivo, etc.

Seleccione ‘Rol de usuario’ ya que desea que este código CSS personalizado se añada para un rol de usuario en particular.

A continuación, puede seleccionar el rol de usuario al que desea aplicarlo.

Nota: Puede añadir varias reglas lógicas condicionales haciendo clic en el botón “+ Añadir nuevo grupo”.

Cuando hayas terminado, haz clic en “Guardar fragmento” en la esquina superior derecha de la pantalla y, a continuación, cámbialo a “Activo”.

WPCode ahora mostrará tu CSS personalizado a roles de usuario específicos en WordPress.

Añadir CSS Personalizado para Roles de Usuario Específicos en el Área de Administración de WordPress

Si sólo quieres que tu CSS personalizado sea añadido dentro del área de administración de WordPress, entonces WPCode lo hace aún más fácil.

En la pantalla de edición de código, desplázate hasta la opción “Ubicación”. Haz clic en el menú desplegable para expandirlo y verás un montón de ubicaciones en las que puedes cargar automáticamente el CSS.

Ahora, simplemente seleccione la opción ‘Admin header’ o ‘Admin footer’ para cargar su código CSS en el área de administración de WordPress.

Añadir CSS personalizado para funciones de usuario específicas en otras áreas

La personalización del diseño en los sitios web de comercio electrónico mejora la experiencia del usuario y se ha demostrado que reduce las ventas de carritos abandonados.

Si tienes una tienda WooCommerce, vendes cursos online o vendes otros productos digitales, entonces añadir CSS personalizado para los clientes logueados te será útil.

WPCode te permite elegir dónde añadir código personalizado a un sitio de comercio electrónico. En los ajustes de Ubicación, cambia a la pestaña ‘eCommerce’.

Verás varios lugares donde puedes añadir tu CSS personalizado, como antes del carrito, antes del formulario de pago, en las páginas de producto, y más.

WPCode es compatible con WooCommerce, Easy Digital Downloads y MemberPress.

Consejos adicionales

Los siguientes son algunos recursos adicionales para ayudarle a diseñar experiencias de usuario personalizadas en WordPress. Ni siquiera necesitas aprender CSS para algunas de estas opciones:

• Cómo mostrar contenido personalizado a diferentes usuarios en WordPress
• Cómo personalizar los colores de su sitio web WordPress
• Cómo personalizar y dar estilo a los formularios de WordPress (2 métodos sencillos)
• Cómo crear una página de inicio personalizada en WordPress (3 métodos)

Esperamos que este artículo te haya ayudado a aprender cómo aplicar CSS para roles de usuario específicos en WordPress. También puedes consultar nuestra hoja de trucos para principiantes sobre CSS generado por defecto en WordPress o echar un vistazo a estos plugins y consejos para mejorar el área de administración de WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.