• 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
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

  • Mostrar mensajes en la administración de WordPress y en Gutenberg Mostrar mensajes en la administración de WordPress y en Gutenberg
  • Configura el theme Twenty Twenty de WordPress Configura el theme Twenty Twenty de WordPress
  • Mostrar el nombre del archivo que esta usando un tema sin usar plugins Mostrar el nombre del archivo que esta usando un tema sin usar plugins
  • Archivo HTML como página de inicio en WordPress Archivo HTML como página de inicio en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 3,67 de 5)
Cargando…

Interacciones del lector

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!!

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

*

* Gravatar habilitado

Barra lateral primaria

Únete a DecodeCMS

Recibirás como regalo:

Fundamentos de programación:
Guía base para entender la estructura de WordPress.

Mini curso en video de:
Cómo construir un plugin de entradas populares.

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Modificar elementos en página de producto de WooCommerce

Deshabilitar el editor de archivos para temas y plugins en WordPress

Modificar desplegable de orden de productos en WooCommerce

Usando Custom Post Types en WordPress

Recientes

  • Mostrar mensajes en la administración de WordPress y en Gutenberg
  • Configura el theme Twenty Twenty de WordPress
  • Mostrar el nombre del archivo que esta usando un tema sin usar plugins
  • Archivo HTML como página de inicio en WordPress
alojamiento wordpress

© logo decode pie Copyright 2019 | Todos los derechos reservados | Política de Privacidad