¿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
(4 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 !!
Jhon saludos! Como hago para contactarte personalmente? Es que necesito algo de ayuda. (Obviamente por honorarios)
Hola Jose, puedes hacerlo desde el formulario de contacto: https://decodecms.com/contacto/
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
MIL GRACIAS… gran ayuda…. en serio…. FANTÁSTICO !!!!
Hola Jhon muy bueno el tutorial, me gusto mucho, pero estoy perdido en una cosa, a ver si me podrías ayudar, donde y como puedo meter una url de re-dirección cuando hagan el logged_in y también una para cuando hagan logout, es decir, que cuando hagan el login me redirija a una url y cuando hagan el logout lo redirija a otra… Gracias de antemano..!
Hola Juan,
Ambas funciones wp_logout_url() y wp_login_url() tiene como parámetro la url de redirección, puedes poner cualquier url, en el caso del ejemplo estoy usando la url actual a través de la función get_permalink(), pero podría usar otra, por ejemplo tras el logout redirigirlo a google.com
Hola Juan muy bueno el tutorial, estoy intenta colocar solamente el botón de cierre de sesión como podría hacerlo?
Hola, en ese caso sólo quédate con la primera parte de la condicional, es decir el código dentro del «if», el código del «else» no sería necesario.
Hola Jhon muy buen tutorial, esto creando una web con el tema Mesmerize Companion pero necesito que cuando piquen en la pestaña del menu superior (ejemplo area privada) es cuando tiene que aparecer lo de iniciar sesion o registrarse, lo he intentado con varios plugins pero todos se instalan en la barra superior o en la lateral.
ayuda por favor.
Hola, mejor evalúa mostrar el Area Privada como un menú y el login o logout como submenus, puedes seguir la idea de este artículo debería ser similar en tu theme. Saludos.
Hola existe algo para trabajar los usuarios de wordpress con una TABLA creada por mi en SQL???
Hola, si, si es una tabla personalizada como parte de la base de datos de WordPress puedes igual gestionarla, por ejemplo revisa el siguiente artículo: https://decodecms.com/mostrar-datos-desde-una-tabla-personalizada-de-la-base-de-datos-de-wordpress/
¡Hola!
¡Estupendo el artículo, clarísimo! ¡Muchísimas gracias!
Un saludo,
Juanjo.
Hola Jhon,
Estoy intentando modificar las url de login y de logout pero no lo consigo. Necesito que el ‘acceder’ te lleve al area privada de una tienda:
la url de login sería:
https://www.ejemplo.com/mi-cuenta/
y logout:
https://www.hikabodega.com/mi-cuenta/customer-logout/?action=logout
Hola, usa la opción 2 de este artículo, allí verás el código desglosado para login y logout, pero en lugar de esas funciones coloca directamente la url para ambos casos. Saludos.
Hola, Jhon Buenas tardes,
Quisiera saber que puedo hacer ya que el codigo me funciona bien el los navegadores del desktop pero el los celulares no aparecen los botones. que podría ser, esto usando el them TwentyTwenty
Hola, tienes que agregar en la condicional para que se agregue también el menú en la posición de menú de móvil y no sólo del menú principal, es decir la condicional quedaría:
Saludos.
Muchas gracias.
Hola, me ha funcionado perfectamente el código, pero si deseo añadir el nombre del usuario una vez que accese, es posible añadir codigo a esa misma función, sin utilizar plugin, es posible??
Me ayudas con ello porfa.» preferiblemente estándo en el menú»
ejemplo: Menu I hola, Jaime I Salir
Hola, revisa este artículo en donde se explica lo que comentas: https://decodecms.com/mostrar-el-nombre-de-usuario-en-el-menu-de-wordpress/
Hola que tal amigo !!
tengo una duda sobre el tutorial que hiciste, de agregar login y logout en la parte que hay que modificar no se donde se encuentra el archivo, me podrías ayudar a resolver el problema.
saludos , espero tu respuesta.
Hola, supongo que te refieres al archivo functions.php de tu theme, ya que allí se agrega el código PHP del ejemplo. Busca en los archivos de tu sitio web en wp-content/themes/ ubica la carpeta del tema que usas, de preferencia deberías usar un tema hijo, luego dentro de la carpeta del tema deberás encontrar el archivo functions.php