1- Usando enlaces personalizados
Esta es la manera más simple de crear ítems de menú de login/logout y es creando enlaces personalizados. Debes ir a Apariencia > Menús, elegir el menú en el que quieres mostrar las opciones de logueo 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 fuente para creación de ítems en el menú (2 maneras)
Login/Logout en una sola función
Existe un función en WordPress bastante sencilla y rápida que nos ahorrará código llamada wp_loginout(), esta función muestra un enlace de login o logout, es decir la función empaqueta la funcionalidad de verificación de usuario conectado:
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;
}
Login/Logout con redirecciones y estilos CSS independientes.
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;
}
Finalmente usaremos código CSS para dar un aspecto de botón a los links, acá les dejo un ejemplo para botoneras verde y roja según esté logueado o no.
.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;
}