Es posible que quieras mostrar el nombre del usuario que se ha registrado y posteriormente ha iniciado sesión en tu sitio web WordPress. Muchos sitios web utilizan este sistema que garantiza que el usuario está conectado a la web y puede navegar por la administración del sitio.
Generalidades
La forma de hacer esto es bastante sencilla. Solo tienes que incluir un código en el archivo functions.php de tu tema activo de WordPress, preferiblemente en un tema hijo (child theme) o en un plugin desarrollado para tal cosa, como puede ser por ejemplo un plugin de Snippets.
Creando el ítem de menú
En el panel de administración de WordPress dirígete a Apariencia – Menús y elige el menú donde quieres poner el nombre de usuario. El nuevo ítem de menú tendrá un marcador de posición que posteriormente será reemplazado (lo puedes ver en la captura de pantalla a continuación). Ejemplo: #profile_name#, #usuario#, #nombre#.
Código para interpretar el marcador del ítem de menú
Más adelante incluye el código en el archivo functions.php del tema hijo o del plugin de Snippets. Este es el código que tenemos que incluir:
add_filter( 'wp_nav_menu_objects', 'my_dynamic_menu_items' );
function my_dynamic_menu_items( $menu_items ) {
$final_menu = [];
foreach ( $menu_items as $menu_item ) {
if ( '#profile_name#' == $menu_item->title ) {
$user=wp_get_current_user();
if ( $user->ID ){
$menu_item->title = $user->user_firstname;
$final_menu[] = $menu_item;
}
} else {
$final_menu[] = $menu_item;
}
}
return $final_menu;
}
Si quieres mostrar el gravatar del usuario podrías usar get_avatar(), el código anterior quedaría como:
add_filter( 'wp_nav_menu_objects', 'my_dynamic_menu_items' );
function my_dynamic_menu_items( $menu_items ) {
$final_menu = [];
foreach ( $menu_items as $menu_item ) {
if ( '#profile_name#' == $menu_item->title ) {
$user=wp_get_current_user();
if ( $user->ID ){
$avatar = get_avatar( $user->ID, 16 );
$menu_item->title = $avatar." ".$user->user_firstname;
$final_menu[] = $menu_item;
}
} else {
$final_menu[] = $menu_item;
}
}
return $final_menu;
}
Resultado final
Como ves es bastante fácil incluir el nombre del usuario que ha iniciado sesión en nuestro menú de WordPress, dando a la persona que está conectado a la web la facilidad de saber que está vinculado. Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:
Si prefieres ver en formato vídeo como se realiza todo el proceso. Lo puedes ver a continuación:
Artículos Relacionados
(5 votos, promedio: 4,00 de 5)
Cargando...
hola Pedro, podrías ayudarme gracias
como hacer que aparezca de esta manera
Hola, no enviaste tu enlace, detalla a qué manera te refieres.
como puedo mostrar el nombre usuario en las entradas
Hola, en este caso tendrías que usar una lógica similar para obtener el usuario dentro de un Shortcode, revisa: https://decodecms.com/que-son-los-shortcodes-en-wordpress-y-como-usarlos/
No es el mismo código el que usas en el vídeo y el que publicas aquí
Hola, si, efectivamente, el código posteriormente fue depurado, el del este artículo debería funcionarte sin problemas.
Saludos.
Hola buen día.. Muy buen articulo muchas felicidades. Como puedo hacer que aparezca el avatar en el menu?
Hola, puedes hacerlo usando el email del $user, tendrías que usar la función que se sugiere en Gravatar, revisa: https://es.gravatar.com/site/implement/images/php/
¿Podrías demostrar como agregar al código el avatar a un lado?
Hola, he actualizado el artículo ahora también hay un código que agrega el avatar.
Muchas gracias!!
Buenas navidades, he seguido tu tutorial y no me funciona, el codigo escrito arriba no se parece al codigo que pones en el video. el codigo #profile_name# lo he puesto en texto del enlace y en la url he puesto # para que me dejara colocarlo en el menu. Después he colocado tu codigo escrito arriba con code snippets y no me funciona. Lo único que ha echo es que el texto de enlace desaparezca del menu pero no me sale el nombre del usuario. Que hago mal si dices que funciona en todas las plantillas?
Hola, el código final es el de este artículo, si que debería funcionarte, asegúrate de que estes conectado con algún usuario, podrías probar con otro theme en caso haya alguna funcionalidad de tu theme que haga conflicto.
me aparece el Avatar pero no el nombre de usuario. AYUDA!!!
Sorry si aparece Gracias!
genial Jhon! es lo que estaba buscando y no habia manera. Sólo una duda, es posible añadir un condición para que muestre primero un texto “tu cuenta” y despues de hacer login cambie por el “nombre” y al salir vuelva a mostrar “tu cuenta”? Saludos!
bien, la idea es para Woocommerce, substituir el “Mi Cuenta” por el nombre del usuario una vez se ha hecho login/registro.
Hola, la idea sería que amplíes con un else el código de comprobación del ID, (o lo que es lo mismo comprobación si el usuario esta conectado)
Evaluaré hacer esto para WooCommerce con el ítem de menú de mi cuenta, ya que con este código de este artículo tendrías que usar un ítem de menú personalizado.
Saludos.
Gracias por el aportem una consulta como puedo agregar la palabara “Hola” antes el nombre, es posible poner en cualquier otro lugar de la web?]
Hola, puedes modificar la siguiente línea de código
Saludos.
Hola, grandioso, una consulta: con el item de “mi cuenta” de Woo, se podrá hacer??
Hola, si, aunque WooCommerce ya te genera una página de “Mi cuenta” que puedes usar.
El codigo del video tampoco funciona….
Hola, el código que deberías probar es el del artículo, ¿qué error te aparece?, usas algún plugin para el menú?. Saludos.
Hola, aunque el código es diferente del video, funciona todo. Tanto muestra el usuario como avatar junto con el texto Hola tal y como indica, .Por cierto el tamaño del avatar se puede cambiar??
Estos pequeños detalles de funcionalidad dan otro nivel a la web. Mil gracias chicos!!!
Ahora para bordarlo y/o si os aburris, jajaja no se como quitar el “contruido por wordpress” de mi footer pues esta alojado con un widget del tema Mesmerize y no logro dar con el. el tema lo tengo con tema hijo funcionando…
Hola, con respecto al tamaño del avatar, con el segundo parámetro de la función defines el tamaño, en el ejemplo es 16 pero podrías cambiarlo. Con respecto a tu otra consulta no tiene relación con este artículo, pero de manera general podría ser alguna configuración de tu theme, un widget o estar directamente en el footer.php. Saludos.
Hola jhon como estas, he creado un registro personalizado de numero de telefono con gravity forms y quisiera, mostrarlo de la misma forma que lo haces en el tutorial, como podria hacerlo?
Hola, no me queda claro que quieres mostrar, si quieres mostrar el acceso al formulario o directamente el número de teléfono. Si quieres mostrar datos adicionales tal vez te convenga mostrarlo en la parte superior en un topbar por encima de la cabecera, si tu theme no cuenta con esta posición podrías evaluar agregarla.
Muchas gracias por tu tutorial. Solamente te tengo una consulta. Yo personalice el campo agregandole el apellido, pero no he podido concatenarlo con un espacio y el nombre me sale unido (nombre y apellido). Mi codigo es el siguiente:
Hola, prueba concatenando con un espacio, es decir quedaría:
Saludos.
Hola, Me gustaría en vez del nombre, mostrar el Alias, como podría hacer esto? gracias
Hola, el alias se guarda en la metadata del usuario, por lo que podrías probar con:
Hola!
muchas gracias, funciona perfecto.. solo que el nombre de usuario quedo un poco mas arriba que el resto del menu… como lo podría bajar o a través de que codigo css?
gracias !
Hola, posiblemente requieras corregirlo con CSS, envía la url de tu sitio para verificar.
Hola Jhon, no me funciona, el tema es básico y no funciona, también observé que el código que presentas aquí es distinto al que utilizas en el video, he probado con ambos y no me funcionó, inclusive me dió error el wordpress con el cód del video.
Posiblemente esté haciendo algo mal.
IMPORTANTE, por cierto he utilizado el login, logout, de tu enlace: https://decodecms.com/agregar-login-y-logout-en-un-menu-de-wordpress/
Saludos
Hola, prueba con el código de este artículo que es el que esta actualizado.
Verifica sólo con este código, si te da problemas prueba cambiar temporalmente de theme usando uno de los que vienen por defecto.
Hola, estoy intentando que me de un enlace de iniciar sesión que se sustituya por el nombre una vez se inicie sesión. Pero no encuentro como hacer que desaparezca una vez se inicia sesión.
Hola, podrías usar un else a nivel de la comparación: if ( $user->ID ) , sin embargo otra alternativa es tener un menú diferente, revisa: https://decodecms.com/como-mostrar-un-menu-diferente-para-usuarios-registrados/
Hola, muchas gracias por la ayuda con tu código me fue muy útil.
Solo quería hacerte una consulta me gustaría que el botón “Registrate / Ingresa” (La web usa woocomerce por ende este botón va a la pagina de “Mi cuenta”), cuando el usuario ingrese se sustituya por el nombre. Esto es posible?
Nuevamente gracias
Hola, podrías evaluar tener dos menús y mostrar un u otro dependiendo de si el usuario esta conectado o no, revisa: https://decodecms.com/como-mostrar-un-menu-diferente-para-usuarios-registrados/
Buenísimo, justo lo que buscaba.
Saludos!!
hola muchísimas gracias por tus aportaciones pedirte de favor me puedas apoyar con la personalización del código, me gustaría mostrar avatar mas Hola mas el nombre, te lo agradeceré mucho…. otra pregunta cual seria el medio de poder contactarte respecto a dudas que puedan surgir respecto a los códigos
Hola, puedes contactarme a través del formulario de contacto: https://decodecms.com/contacto/
una consulta mas en el menu me aparece #usuario# al no iniciar sesion, mi problema al de la pregunta pasada ya esta resuelta.
mi peticion es esta, como quitar #usuario# puesto da mala imagen al menu por los simbolos. me gustaria que hasta que inicie sesión aparezca gravatar hola y nombre ojala me puedas apoyar saludos
Hola, si un usuario no esta conectado el ítem #usuario# no se agrega a los ítems de menú, por lo tanto no debería aparecerte, revisa bien el video o revisa el código que implementaste, el código actualizado es el que figura en este artículo.
Hola me ha funcionado, gracias por el aporte. Una pregunta me gustaría que apareciera tanto el nombre de usuario y tambien el nick name. ¿Cómo lo haria ? Gracias!
Hola, revisa esta respuesta para recuperar el nickname: https://decodecms.com/mostrar-el-nombre-de-usuario-en-el-menu-de-wordpress/#comment-5718 , luego puedes concatenarlo tal como comento en: https://decodecms.com/mostrar-el-nombre-de-usuario-en-el-menu-de-wordpress/#comment-5553
Hola,
El codigo del archivo functions.php me da error concretamente en esta linia 2:
function my_dynamic_menu_items( $menu_items ) {$final_menu = [];
foreach ( $menu_items as $menu_item ) {
Se puede saber a que es debido.
Gracias.
Hola, veo correcto el código, sin embargo usar [] como array podría ser el problema si estas usando una versión antigua de PHP, verifica qué versión tienes, prueba al menos la 7.2
Hola Pedro, gracias por el articulo, he probado a utilizar el código sin lo de la imagen de gravatar y no me funciona 🙁 lo he insertado con el plugin SnippedCode y he añadido un nuevo elemento al menú pero nada.
¿Cómo podría solucionarlo?
https://www.mejor-robot.shop/
Gracias.
Con el código sin usar gravatar si se muestra el nombre?, teóricamente no debería haber problema.
Hola Jhon, perdona la tardanza en contestar, al final lo conseguí, ya se me muestra el nombre. Muchas Gracias.
Buenas tardes, me funcionó todo correctamente incluso añadí el texto “Iniciar sesión” cuando el usuario no está loggeado.
Quería preguntar si es posible añadir un icono antes del nombre. Ya que al añadir me da error.
Pongo el cógido usado por si acaso:
Hola, usar iconos depende si tu theme los esta cargando, usualmente a través de una fuente de íconos, si tienes problemas con los iconos podrías evaluar colocar en su lugar una imagen, es decir puedes insertar cualquier código HTML antes del nombre, asegúrate que la ruta de la imagen sea absoluta.
MUCHAS GRACIAS !!!!
Hola Jhon lo primero felicitarte por tu web y tus post son de gran ayuda , una pregunta me podrías ayudar quiero poner en las paginas de mi web el nombre de cliente, por ejemplo en la pagina de gracias ponerle- Gracias y el nombre.
Vi en un comentario anterior que seria con ShortCode , mi tema tiene para crearlos que tendría que añadir al ShortCode y a código soy muy novato jeje un saludo espero que me puedas ayudar.
Hola, supongo que te refieres a que cuando se realice una compra, en la página de gracias agregar el nombre del cliente. Es algo interesante lo anotaré para revisarlo en un futuro artículo.
Hola, John! Yo solo quiero que aparezca el avatar (sí puede ser con un círculo como en instagram).
Gracias, de antemano, compañero!
Hola, para que aparezca el avatar, revisa el código, lo comento en el artículo, que luzca como círculo es darle un diseño diferente con CSS.
Hola buenas noches, ¿Si yo quiero tomar los datos que el usuario ingreso cuando se registro y luego ponerlos en un formulario como lo puedo hacer?
Hola, puedes guardar datos adicionales como meta del usuario, revisa este artículo de guía para mostrar/recuperar datos de usuario en el backend: https://decodecms.com/agregar-campos-adicionales-al-perfil-de-usuario/
buen dia como puedo hacer para que el nombre del usuario y avatar aparescan en otro lugar que no sea dentro del menu es posible y como gracias
Hola, podrías evaluar hacer un widget, o un shortcode, pero sería otra programación completamente diferente a este artículo.
Hola es posible insertar el nombre de usuario en una url? Estoy intentando hacer esto desde hace tiempo pero no sé como hacerlo.
Hola, te refieres a que el usuario acceda con una url personalizada (que incluya su nombre) a su área de cliente por ejemplo?
Hola, de casualidad sabrias como bajar la imagen de perfil y el menu que posee a un menu de plantilla, estoy creando un estilo de red social con buddypress
Hola, ¿podrías enviar la url de algún sitio de ejemplo para tener claro a qué te refieres?
Hola muy genial tu código me podrias ayudar a modififacar el avtar con css un ejemplo por favor y otra idea es como podria hacer uno como lo usa la web de mercado libre-
Hola, espero preparar un futuro artículo para incluir la imagen ya que el código de este artículo esta limitado a mostrar texto.
Hola Jhon,
No me muestra el nombre de usuario en Mozilla Firefox, pero si en Chorme y en Edge. ¿Que puede ser?
Un saludo
Hola, has probado limpiando la cache de tu navegador, es raro que existan diferencias entre Chrome y Firefox, ambos siguen el standard, también es posible que tengas algún otro plugin o tu tema que genera código que hace conflicto. Si sigues con problemas envíame un mensaje a través del formulario de contacto con la url de tu sitio para verificar.
Hola Como se podria colocar en el menu o en el encabezado, colocar el avatar pero poder configurar el tamaño y los bordes?
Hola, en el código hay una función get_avatar() en donde puedes especificar el tamaño de la imagen que se recuperará, para adaptarlo y darle border puedes usar código CSS.
como puedo recuperar mi usuario de word press tengo la contraseña pero no usuario me dice que es erroneo
Hola, posiblemente tengas que entrar al backend de WordPress con algún otro usuario y luego revisar los usuarios que tienes e incluso cambiar la clave. Para crear un usuario administrador puedes hacerlo si tienes acceso a la BD, revisa: https://decodecms.com/crear-usuario-administrador-de-wordpress-desde-la-base-de-datos/
hola,
he usado la guia de tu web pero me pone siempre contraseña perdida y lo que deseo es que ponga acceder o entrar cuando se esta desconectado, ayudame gracias
Hola, si que debería funcionarte, sin embargo tienes otra alternativa para mostrar un menu diferente, revisa por ejemplo: https://decodecms.com/como-mostrar-un-menu-diferente-para-usuarios-registrados/
Saludos.