¿Te gustaría añadir como ítems de menú opciones para que el usuario se pueda conectar y desconectar y sin usar plugins?, eso es lo que veremos en este artículo crearemos enlaces de login y logout en un menú de WordPress.
Resultado final
Al final lo que queremos obtener será algo similar a la siguiente imagen. Se puede ver que conectar y desconectar son ítems del menú principal y con CSS le damos apariencia de botones.

1- Usando enlaces personalizados
Esta es la manera más simple, crear ítems de menú de login y logout creando enlaces personalizados. Desde Apariencia > Menús, elegir el menú y luego en la pantalla de enlace personalizado colocar la url y el texto.

Para la url de login usaremos:
http://tudomino.com/wp-login.php
Para la url de logout usaremos:
http://tudomino.com/wp-login.php?action=logout
2- Usando código para creación de ítems de menú
En este caso tendremos más control sobre los ítems de menú creados, podemos darle un estructura HTML y definir la redirección.
add_filter( 'wp_nav_menu_items', 'dcms_items_login_logout', 10, 2);
function dcms_items_login_logout( $items, $args ) {
if ($args->theme_location == 'primary') {
if (is_user_logged_in())
{
$items .= '<li class="menu-item btn-menu btn-logout">
<a href="'. wp_logout_url(get_permalink()) .'">'. __("Log Out") .'</a>
</li>';
}
else
{
$items .= '<li class="menu-item btn-menu btn-login">
<a href="'. wp_login_url(get_permalink()) .'">'. __("Log In") .'</a>
</li>';
}
}
return $items;
}
En el código anterior:
- Utilizamos el filtro wp_nav_menu_items, este filtro tiene dos parámetros y hace referencia a la función dcms_items_login_logout()
- En la función dcms_items_login_logout(), pasamos los parámetros de los ítems de menú y un parámetro de argumentos
- Primero validamos a través del parámetro de argumento la posición del menú, esto depende de cómo se registró el menú en theme que estamos usando, en el ejemplo es ‘primary’
- Luego validamos si el usuario esta logueado o no y de acuerdo a eso creamos un ítem de menú de login o logout
- Para la creación del ítem de menú de desconexión se usa la función wp_logout_url(), esta función simplemente crea una url de desconexión, la concatenamos a los ítems existentes
- Para la creación del ítem de menú de conexión se usa la función wp_login_url(), esta función simplemente crea una url de conexión, igualmente la concatenamos a los ítems existentes
- Ambas funciones de conexión y desconexión tienen un parámetro que indica la url de redirección, en nuestro caso usamos la función get_permalink() que devuelve la url actual, es decir al conectarse o desconectase regresará a la pantalla actual.
- Puesto que tenemos los links diferenciados podemos dar estilos CSS individuales, para el link de acceso usamos la clase btn-login y para el de desconexión usamos btn-logout
- Finalmente devolvemos la cadena en la variable $items de menú con los ítems de menú añadidos
Finalmente usaremos código CSS para dar un aspecto de botón a los links, para el caso del theme de ejemplo usamos el siguiente código:
.btn-menu a{
background: green;
padding:10px;
border-radius: 5px;
color:white;
}
.btn-menu a:hover,
.btn-menu a:focus{
text-decoration: none;
color:white;
background: gray;
}
.btn-menu.btn-login a{
background: green;
}
.btn-menu.btn-logout a{
background: darkred;
}
Nota: Login/Logout en una sola función
Existe un función en WordPress llamada wp_loginout(), esta función muestra un enlace de login o loguot según el usuario este conectado o no, es decir la función empaqueta la funcionalidad de verificación de usuario conectado, nuestro código anterior se reduciría a:
add_filter( 'wp_nav_menu_items', 'dcms_items_login_logout', 10, 2);
function dcms_items_login_logout( $items, $args ) {
if ($args->theme_location == 'primary') {
$loginout = '<li class="menu-item btn-menu">'
.wp_loginout(get_permalink(), false ).
'</li>';
$items .= $loginout;
}
return $items;
}
¿Aún con dudas?, en el siguiente video se explica los puntos tratados anteriormente.
Hola, Jhon, gracias por la explicación. Tengo una pregunta…
Hay alguna forma de cerrar sesión directamente evitando este mensaje de confirmación?:
Estás intentando cerrar tu sesión en ML-Streaming.
¿Estás seguro de que quieres salir?
Para la redirección uso el plugin Peter’s Login Redirect, pero no sé como evitar ese punto intermedio.
También uso el plugin Snippets para introducir los códigos. Cuál código debería poner para que apareciese “SALIR” en un nuevo menú creado (ni principal ni secundario) y que redirija directamente a la home u otra url?
GRACIAS DE ANTEMANO
Hola, en lo que explico no hay mensaje de confirmación cuando cierras sesión. Te sugiero revisar el video para que te quede más claro.