¿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.
Artículos Relacionados
(3 votos, promedio: 5,00 de 5)
Cargando…
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.
Gracias por este artículo. Me fue de muchísima utilidad!
Hola Jhon, disculpa yo active el plugin Them my login,
pero al tratar de cerrar sesión, este me redirige a un pagina con el siguiente mensaje
¿Estás seguro de que quieres salir?
le digo que si, pero no cierra sesión y se sigue manteniendo en esa pagina.
¿como puedo solucionar ese problema?
espero me puedas ayudar.
Hola, prueba mejor lo que comento en este artículo y descarta el uso del plugin.
Hola Jhon, me gustaría saber si puedes ayudarme, quiero realizar lo que indicas pero en una barra diferente a la del menú, es una barra que está justo en el header de mi página web, y si existe la posibilidad de que cuando esté logeado diga el Hola @usuario, y cuando no esté logeado diga ACCEDER
Hola, cada theme es diferente, es posible que lo que comentas sea una posición, una posición no tiene hooks, tendrías que modificar el registro de la posición posiblemente. otra opción sería añadir un widget que te permita colocar código PHP y colocar el widget en esa posición.
Hola Jhon, Excelente articulo pero presento el siguiente problema. El acceder y cerrar sesion me redirige a un articulo que tengo, y no a donde este ¿esto por que puede ser?.
Hola, en el ejemplo uso get_permalink(), que te llevará a la pantalla actual, pero puedes poner la url explicitamente a la que quieres que se redirija cuando se desconecte.
Muchas gracias por el artículo. Tengo una duda, quiero agregar dentro del botón de login, uno que sea de registro, osea, que al darle al botón me ponga las 2 opciones, login y sign up.
Te he contestado en los comentarios de YouTube.
El cógigo funciona de maravilla. Mil gracias por el tutorial!!
En todos los codigos que hay en internet la mayoria no funciona, siempre tiene algo de mas o le falta algo asi solo los expertos saben el error. Este codigo lo probe en varios temas y no me funciono, hasta que descubri el porque: !=
if ($args->theme_location == ‘primary’)
if ($args->theme_location != ‘primary’ )
Hola según veo estas haciendo una comparación negativa !=, es posible que tu theme no tenga ninguna posición registrada como «primary» por eso te funciona, lo ideal es apuntar directamente a la posición que quieres con == , sin embargo en tu caso si sólo tienes un menú funcionará.
hola, en mi tema sydney copie el codigo pero no me aparece las opciones en el menu
Excelente articulo y muy bien explicado, sobretodo el vídeo.
Te he dejado una pregunta en Youtube que te copio a quí mismo porque no se que tienes más controlado.
Saludos y a seguir así.
Adapté un poco para crear lo mismo en el menú Off canvas que se muestra en los dispositivos móviles, pero me gustaría que en este caso el item se añadiera al inicio del menú, para que al desplegar el menú se vea lo primero. ¿Como podría indicarle esto?
Hola, en el código tienes que cambiar la concatenación, uso .= para concatenar puedes cambiarlo agregando la variable $items al final, tal como:
Saludos.
Hola Jhon, genial el artículo.
Tengo un pequeño problema, quizás puedas solucionarlo. Utilizo Futurio theme y un plugin Futurio extra para añadir una plantilla al tema.
El caso es que ya tengo implementado el primer código y hasta ahí bien, pero a la hora de meter el código de botón y color en el style.css no pasa nada. no se si no lo reconoce o quizás el tema de Futurio utilizar otro archivo css para el color y el botón en el menú principal.
Hola, es posible que las clases CSS que usa tu theme sean diferentes, te sugiero revisar: https://decodecms.com/usar-el-inspector-de-codigo-para-modificar-un-theme-wordpress/
Muchas gracias Jhon, me ha servido. Un saludo !!
Gracias en mi caso se llamaba main, y para saberlo comenté la condición
y puse el texto $args->theme_location dentro de lo que imprime el HTML, muchas gracias por este aporte