Si tienes un sitio de membresía o una web que permite el registro de usuarios, ya sean de pago o no, y que muestra una información diferente cuando los usuarios inician sesión, es posible que quieras mostrar un menú diferente para estos usuarios.
Por ejemplo, podríamos para los usuarios loggeados:
- Ocultar el menú de registrarse y el de acceder o iniciar sesión
- Sustituir el menú de contacto por uno de soporte.
- Añadir acceso a páginas de su cuenta, u otros recursos.
- etc…
En este artículo vamos a ver 3 formas para poder hacerlo:
Opción A: Plugin If Menu
Una opción sencilla es utilizar un plugin tipo If Menu, que es gratuito y te añade opciones adicionales en la página de administración de menús para ocultar o mostrar cada elemento según algunas condiciones, entre ellas si el usuario ha iniciado sesión o no.
Además del estado de la sesión, permite también tener en cuenta el dispositivo, el rol del usuario, idioma, etc… y tiene una versió premium con opciones avanzadas.
Opción B: Estilos CSS
Otra opción, también sencilla, es jugar con los estilos CSS teniendo en cuenta que WordPress por defecto añade la clase ‘logged-in’ a la etiqueta body cuando un usuario ha iniciado sesión.
Teniendo eso en cuenta, podríamos ocultar algunos elementos simplemente con los estilos adecuados, sabiendo la clase del menú que queremos ocultar:
.logged-in .menu-item-15751 {
display: none;
}Opción C: Crear dos menus diferentes
Por último, si los cambios que quieres realizar en el menú para usuarios que han iniciado sesión son bastantes, tienes la opción de crear dos menús diferentes y añadir la opción en código para que se muestre uno u otro en cada caso.
El código para poder hacerlo en WordPress de forma genérica lo tienes aquí: https://advent.elliottrichmond.co.uk/create-a-specific-menu-for-logged-in-users/
Pero si estás utilizando Genesis Framework, los pasos a dar cambian un poco, y los vemos a continuación:
1- Dar soporte a los nuevos menús
Lo primero que vamos a hacer es dar soporte a los dos menús, en este caso el «user menu», para cuando el usuario ya ha iniciado sesión y el «Login» menú, para cuando no lo ha hecho.
add_theme_support(
'genesis-menus', array(
'logged-in-menu' => __( 'User Menu', CHILD_THEME_NAME ),
'logged-out-menu' => __( 'Login', CHILD_THEME_NAME )
)
);
Ten en cuenta que esta función sutituirá a la de genesis y tu child theme, por lo que si quieres conservar el primary menu, deberás añadirlo también en el array para tenerlo disponible.
2- Asignar el menú correspondiente
Una vez tenemos los dos menús creados, declararemos la función que asignará uno u otro menú, según el condicional is_user_logged_in() y le añadirá las clases necesarias (incluida la de genesis-responsive-menu, para que funcione el cambio de menú en dispositivos, si es necesario)
function dpw_users_menu() {
if ( ! genesis_nav_menu_supported( 'logged-in-menu' ) || ! has_nav_menu( 'logged-in-menu' ) ) {
return;
}
$class = 'menu genesis-nav-menu genesis-responsive-menu';
if ( genesis_superfish_enabled() ) {
$class .= ' js-superfish';
}
genesis_nav_menu( array(
'theme_location' => is_user_logged_in() ? 'logged-in-menu' : 'logged-out-menu',
'menu_class' => $class,
) );
}
add_action( 'genesis_header', 'dpw_users_menu', 12 );En este caso, añadimos la función al genesis_header, pero podría ser en el genesis_footer, en el genesis_header_right o donde tu necesites que se muestre.
3- Darle los estilos CSS necesarios
Por último quedará darle a los nuevos menús los estilos CSS necesarios.
Si estás partiendo de un child theme ya con sus propios estilos, lo más cómodo es buscar los estilos del .nav-primary, que son los que suelen venir para el menú principal y están preparados ya para los diferentes tamaños de dispositivo.
.nav-primary, .nav-logged-in-menu, .nav-logged-out-menu { }Como suele pasar, tenemos diferentes opciones para llegar al mismo resultado, y deberemos buscar la que más nos cuadre por lo que necesitamos hacer, el tipo de web y nuestros conocimientos.
¿Eres implementador o desarrollador WordPress?
En la Zona DPW encontrarás más recursos, tutoriales, plantillas, y una biblioteca de snippets para poder utilizar en tu día a día y ganar tiempo en tu trabajo:
ACCEDER AHORA