Agregar login y logout en un menú de WordPress

[ 30 octubre 2017 ] [ Autor: Jhon Marreros Guzmán ] [ Themes - Intermedio] [ ]

mejoras

¿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.

Valora este artículo : (1 votos, promedio: 5,00 de 5)

Cargando…