Poner botones de login y logout en el menú

¿Cuando necesitamos tener botones de login y logout en el menú?

Si tienes una web en la que manejas usuarios, seguramente necesitas poner botones de login y logout en el menú para que estos puedan iniciar y cerrar sesión fácilmente.

En esta ocasión vamos a ver cómo podemos hacerlo de una forma muy sencilla.

Hacer que los botones de login y logout en el menú se vean y funcionen

Lo primero que tenemos que hacer es decirle a WordPress que vamos a trabajar con la función wp_loginout. Si quieres saber más sobre esta función, puedes visitar el Codex de WordPress.

Esta función sirve para decirle a WordPress que vamos a utilizar las funciones login y logout en el menú principal (por lo general se llama menú primario), creando un nuevo elemento que utilice la misma clase que el resto de elementos del menú principal. Por último, le decimos que traiga automáticamente el texto y la URL de inicio o cierre de sesión, dependiendo de si hemos iniciado sesión en el sistema o no.

Esto que puede parecer complejo, lo podrás entender mejor en el siguiente código (sacado del codex de WordPress). En definitiva, este es el código que vamos a utilizar:

add_filter( ‘wp_nav_menu_items’, ‘wpsites_loginout_menu_link’, 10, 2);
function wpsites_loginout_menu_link( $items, $args ) {
if ($args->theme_location == ‘primary’) {
$loginout = ‘<li class=»menu-item»>’
.wp_loginout(get_permalink(), false ).
‘</li>’;
$items .= $loginout;
}
return $items;
}

Como siempre, este código lo tenemos que copiar y pegar en nuestro plugin de funciones o en el archivo functions.php de nuestro tema activo. El resultado sería este:

Insertar botones de login y logout en el menú
Insertar botones de login y logout en el menú

Adaptar los nuevos items al diseño general de la web

Como puedes ver, los botones ya funcionan, lo único que nos falta es ponerlos «más bonitos», es decir, que hagan juego con el diseño general de nuestra página.

Para ello vamos a utilizar un poco de código CSS, y añadiremos una nueva clase al código que hemos creado anteriormente, por ejemplo una clase llamada boton-entrar-salir. Con esto, el código anterior debería quedar así:

add_filter( ‘wp_nav_menu_items’, ‘wpsites_loginout_menu_link’, 10, 2);
function wpsites_loginout_menu_link( $items, $args ) {
if ($args->theme_location == ‘primary’) {
$loginout = ‘<li class=»menu-item boton-entrar-salir»>’
.wp_loginout(get_permalink(), false ).
‘</li>’;
$items .= $loginout;
}
return $items;
}

Y lo último que nos faltaría es añadir al personalizador, el código CSS necesario para formatear los botones:

/* Estilos para los botones de login y de logout */
.boton-entrar-salir a{
background: #000000;
padding: 5px;
border-radius: 5px;
color: #ffffff !important;
}
.boton-entrar-salir a:hover,
.boton-entrar-salir a:focus{
text-decoration: none;
color: #ffffff;
background: gray;
}

Ya has visto lo sencillo que es crear botones de login y logout en el menú de navegación de nuestro WordPress. En mi caso, los botones serán negros y al ponerse sobre ellos, cambiarán a un color gris.

Aspecto final del botón
Aspecto final del botón


¿Qué te ha parecido el artículo?. Házmelo saber en los comentarios que tienes más abajo. Estoy deseando leerte.

Por último, si crees que este artículo puede ser interesante para algún amigo tuyo, te agradecería enormemente que lo compartieras con él y con todo el mundo a través de las Redes Sociales.

Puntúa este artículo:
[Total: 0 - Promedio: 0]

Puede que también te interese...

Deja un comentario

Información básica sobre protección de datos
Responsable: Jose González Bueno.
Finalidad: Moderación y publicación de comentarios.
Destinatarios: No se comunican datos a terceros.
Derechos: Tienes derecho a acceder, rectificar, exportar y suprimir tus datos.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la política de privacidad de este sitio. *