• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Mostrar el nombre de usuario en el menú de WordPress

Mostrar el nombre de usuario en el menú de WordPress

Mostrar el nombre de usuario en el menú de WordPress

[ 12 febrero 2019 ] [ Actualizado: 28 noviembre 2019 ]
[ Autor: Pedro Mendez Rey ][ Themes - Intermedio] [ ]

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

Esta solución se puede usar para cualquier tema y no tendrá problemas de compatibilidad con ningún plugin, ya que solo usa las funciones básicas de WordPress.

 

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

item de menú con marcador

 

Puedes poner por ejemplo el elemento “Enlaces Personalizados” con la url de cerrar sesión. De tal modo el usuario cuando pulse en su nombre aparece la opción de cerrar la conexión con la web.

 

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;
}

En caso de que esté utilizando tu propio marcador de posición, recuerda reemplazar #profile_name# con el nombre personalizado que elijas en el código de arriba.
Tal como te he comentado al inicio, puedes agregar este código en el archivo functions.php de tu child theme o usando algún plugin de snippets.

 
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:

Nombre usuario menú resultado final

 
Si prefieres ver en formato vídeo como se realiza todo el proceso. Lo puedes ver a continuación:

 

Autor: Pedro Mendez Rey – Desarrollador y optimizador de sitios web con WordPress.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • login y logout en un menú de WordPressAgregar login y logout en un menú de WordPress
  • Página estática y entradas recientesPágina estática y entradas recientes en el inicio de WordPress
  • Adaptar un theme WordPress a GutenbergAdaptar un theme WordPress a Gutenberg
  • Agregar archivos de fuentes tipográficas en WordPressAgregar archivos de fuentes tipográficas en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. eduardo

    4 julio, 2019

    hola Pedro, podrías ayudarme gracias
    como hacer que aparezca de esta manera

    • Jhon Marreros Guzmán

      4 julio, 2019

      Hola, no enviaste tu enlace, detalla a qué manera te refieres.

  2. david

    17 julio, 2019

    como puedo mostrar el nombre usuario en las entradas

    • Jhon Marreros Guzmán

      19 julio, 2019

      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/

  3. Kildom

    28 agosto, 2019

    No es el mismo código el que usas en el vídeo y el que publicas aquí

    • Jhon Marreros Guzmán

      29 agosto, 2019

      Hola, si, efectivamente, el código posteriormente fue depurado, el del este artículo debería funcionarte sin problemas.

      Saludos.

  4. Edgar

    9 octubre, 2019

    Hola buen día.. Muy buen articulo muchas felicidades. Como puedo hacer que aparezca el avatar en el menu?

    • Jhon Marreros Guzmán

      9 octubre, 2019

      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/

      • andy

        27 noviembre, 2019

        ¿Podrías demostrar como agregar al código el avatar a un lado?

        • Jhon Marreros Guzmán

          28 noviembre, 2019

          Hola, he actualizado el artículo ahora también hay un código que agrega el avatar.

  5. andy

    30 noviembre, 2019

    Muchas gracias!!

  6. Jose Manuel

    23 diciembre, 2019

    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?

    • Jhon Marreros Guzmán

      23 diciembre, 2019

      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.

  7. Nedgardo

    26 febrero, 2020

    me aparece el Avatar pero no el nombre de usuario. AYUDA!!!

    • Nedgardo

      26 febrero, 2020

      Sorry si aparece Gracias!

  8. Albert

    3 marzo, 2020

    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!

    • Albert

      3 marzo, 2020

      bien, la idea es para Woocommerce, substituir el “Mi Cuenta” por el nombre del usuario una vez se ha hecho login/registro.

    • Jhon Marreros Guzmán

      3 marzo, 2020

      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)

      if ( $user->ID ){
      	// codigo si el usuario esta conectado
      } else {
      	// codigo si el usuario no 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.

  9. Ivan

    8 abril, 2020

    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?]

    • Jhon Marreros Guzmán

      10 abril, 2020

      Hola, puedes modificar la siguiente línea de código

      $menu_item->title = $avatar." Hola ".$user->user_firstname;

      Saludos.

      • Omae

        28 junio, 2020

        Hola, grandioso, una consulta: con el item de “mi cuenta” de Woo, se podrá hacer??

        • Jhon Marreros Guzmán

          29 junio, 2020

          Hola, si, aunque WooCommerce ya te genera una página de “Mi cuenta” que puedes usar.

  10. Pedro

    10 abril, 2020

    El codigo del video tampoco funciona….

    • Jhon Marreros Guzmán

      10 abril, 2020

      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.

  11. enrique

    20 abril, 2020

    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…

    • Jhon Marreros Guzmán

      22 abril, 2020

      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.

  12. cesar

    25 mayo, 2020

    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?

    • Jhon Marreros Guzmán

      26 mayo, 2020

      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.

  13. Eric Larreynaga

    27 mayo, 2020

    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:

     $menu_item->title = "Hola ".$user->user_firstname .$user->user_lastname;
    • Jhon Marreros Guzmán

      27 mayo, 2020

      Hola, prueba concatenando con un espacio, es decir quedaría:

       $menu_item->title = "Hola ".$user->user_firstname." ".$user->user_lastname;

      Saludos.

  14. Enrique Tamayo

    20 junio, 2020

    Hola, Me gustaría en vez del nombre, mostrar el Alias, como podría hacer esto? gracias

    • Jhon Marreros Guzmán

      20 junio, 2020

      Hola, el alias se guarda en la metadata del usuario, por lo que podrías probar con:

      $menu_item->title = get_user_meta( $user->ID, 'nickname', true );
      
  15. david

    25 junio, 2020

    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 !

    • Jhon Marreros Guzmán

      25 junio, 2020

      Hola, posiblemente requieras corregirlo con CSS, envía la url de tu sitio para verificar.

  16. Jaime

    2 julio, 2020

    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

    • Jhon Marreros Guzmán

      2 julio, 2020

      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.

  17. Daniel

    26 julio, 2020

    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.

    • Jhon Marreros Guzmán

      30 julio, 2020

      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/

  18. Manuel

    31 julio, 2020

    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

    • Jhon Marreros Guzmán

      3 agosto, 2020

      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/

  19. Carlos

    3 agosto, 2020

    Buenísimo, justo lo que buscaba.
    Saludos!!

  20. CÉSAR ADAME RAMÍREZ

    30 agosto, 2020

    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

    • Jhon Marreros Guzmán

      30 agosto, 2020

      Hola, puedes contactarme a través del formulario de contacto: https://decodecms.com/contacto/

  21. CÉSAR ADAME RAMÍREZ

    30 agosto, 2020

    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

    • Jhon Marreros Guzmán

      30 agosto, 2020

      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.

  22. Juan

    3 septiembre, 2020

    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!

    • Jhon Marreros Guzmán

      3 septiembre, 2020

      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

  23. Angel

    25 septiembre, 2020

    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.

    • Jhon Marreros Guzmán

      27 septiembre, 2020

      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

  24. Simone

    11 octubre, 2020

    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.

    • Jhon Marreros Guzmán

      12 octubre, 2020

      Con el código sin usar gravatar si se muestra el nombre?, teóricamente no debería haber problema.

      • Simone

        16 noviembre, 2020

        Hola Jhon, perdona la tardanza en contestar, al final lo conseguí, ya se me muestra el nombre. Muchas Gracias.

  25. sara

    1 diciembre, 2020

    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:

    
    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; //también he probado:  $menu_item->title = echo "".$user->user_firstname;
            		 $final_menu[] = $menu_item;
                }
                else {
                    $menu_item->title = "Iniciar sesión";
                    $final_menu[] = $menu_item;
                }
            } else {
            	$final_menu[] = $menu_item;
            }
        }
        return $final_menu;
    }
    
    • Jhon Marreros Guzmán

      3 diciembre, 2020

      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.

  26. Tony Abaroa

    29 diciembre, 2020

    MUCHAS GRACIAS !!!!

  27. Sergio

    31 enero, 2021

    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.

    • Jhon Marreros Guzmán

      2 febrero, 2021

      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.

  28. Ivan

    13 febrero, 2021

    Hola, John! Yo solo quiero que aparezca el avatar (sí puede ser con un círculo como en instagram).
    Gracias, de antemano, compañero!

    • Jhon Marreros Guzmán

      16 febrero, 2021

      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.

  29. Carlos Rojas

    9 junio, 2021

    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?

    • Jhon Marreros Guzmán

      10 junio, 2021

      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/

  30. Hugo Arturo

    12 octubre, 2021

    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

    • Jhon Marreros Guzmán

      24 noviembre, 2021

      Hola, podrías evaluar hacer un widget, o un shortcode, pero sería otra programación completamente diferente a este artículo.

  31. Daniel Rodriguez

    24 noviembre, 2021

    Hola es posible insertar el nombre de usuario en una url? Estoy intentando hacer esto desde hace tiempo pero no sé como hacerlo.

    • Jhon Marreros Guzmán

      24 noviembre, 2021

      Hola, te refieres a que el usuario acceda con una url personalizada (que incluya su nombre) a su área de cliente por ejemplo?

  32. Dani

    4 febrero, 2022

    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

    • Jhon Marreros Guzmán

      6 febrero, 2022

      Hola, ¿podrías enviar la url de algún sitio de ejemplo para tener claro a qué te refieres?

  33. gabriel

    2 diciembre, 2022

    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-

    • Jhon Marreros Guzmán

      5 diciembre, 2022

      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.

  34. Carlos

    12 diciembre, 2022

    Hola Jhon,
    No me muestra el nombre de usuario en Mozilla Firefox, pero si en Chorme y en Edge. ¿Que puede ser?
    Un saludo

    • Jhon Marreros Guzmán

      12 diciembre, 2022

      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.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Fechas relativas en WordPress a través de código

Crear usuario Administrador de WordPress desde la Base de Datos

Letra capital en párrafos en WordPress

Cómo usar Roles y Capacidades en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados