Foto de perfil do usuário no menu do tema WordPress

Saiba como inserir a foto no menu do usuário logado em seu site WordPress.

1º Passo é adicionar em Aparência > Menus um link personalizado, com um rótulo único. No meu caso escolhi {{user-avatar}}

O menu então ficará assim:

No meu caso o menu tem sub-itens, mas não é necessário.

2º Passo é adicionar o seguinte código no functions.php do seu tema:

function foto_menu($items, $args){  

    //Foto do usuário 
    //Retorna uma imagem padrão caso não haja uma foto escolhida ou usuário não está logado. 
    //30 é o tamanho da foto em px. 
    $img_user = get_avatar(get_current_user_id(), 30, '', 'foto usuario', '');  

    //Altera o rótulo do menu pela foto. 
    $items = str_replace('{{user-avatar}}', $img_user, $items);  

    return $items; 
} 

 add_filter('wp_nav_menu_items', 'foto_menu', 10, 2);

Dica: use o plugin WP User Avatar para gerenciar os avatares dos usuários e a foto padrão para quando o usuário não estiver logado/sem foto.

WP User Avatar | User Profile Picture

Bônus: Imagem e nome do usuário no menu do WordPress:

function foto_nome_menu($items, $args){

    $current_user = wp_get_current_user();

    //Foto do usuário
    //Retorna uma imagem padrão caso não haja uma foto escolhida ou usuário não está logado.
    //30 é o tamanho da foto em px.
    $img_user = get_avatar($current_user->ID, 30, '', 'foto usuario', '');

    //Altera o rótulo do menu pela foto.
    $items = str_replace('{{user-avatar}}', $img_user, $items);

    //Nome do usuário
    $items = str_replace('{{user-name}}', $current_user->user_firstname, $items);

    if(is_user_logged_in()){
 
        //Nome do usuário
        $items = str_replace('{{user-name}}', $current_user->user_firstname, $items);

    }else{

        //Apaga a tag {{user-name}} caso nenhum usuário esteja logado.
        $items = str_replace('{{user-name}}', '', $items);

    }

    return $items;

}

add_filter('wp_nav_menu_items', 'foto_nome_menu', 10, 2);

Publicado em: 21/07/2018

35 Comentários

Luana disse:

09/11/2021 às 20:01

por aqui funcionou a imagem e o nome porém não consegui fazer dessa forma como dropdown. quando coloco no menu, tudo da minha conta fica em baixo, aumentando a largura do menu. consegue me falar um pouco como fez o processo antes dos codigos? seria legal adicionar com imagens no conteúdo.

Responder
1. conradomd disse:
  
  10/11/2021 às 23:21
  
  Olá Luana! Acho que no seu caso você vai precisar fazer ajustes no CSS apenas…
  
  Responder
Alefi disse:

17/09/2020 às 17:56

Boa tarde tudo bem ?
como que eu adiciono no header a imagem do usuário sem ser pelo menu?

Responder
Daniel Nunes de Avila disse:

01/09/2020 às 20:42

Faltou o primeiro $ na linha: “items = str_replace(‘{{user-name}}’, ”, $items);”

Responder
1. conradomd disse:
  
  01/09/2020 às 20:44
  
  Corrigido, vlw!
  
  Responder
Daniel Nunes de Avila disse:

01/09/2020 às 18:33

Show de Bola!! Apareceu no meu site, tudo ok! Alguém descobriu como colocar o nome do usuário tb?

Responder
1. conradomd disse:
  
  01/09/2020 às 18:41
  
  Fala Daniel! tenta usar essa função:
  
  function foto_menu($items, $args){  
  
  $current_user = wp_get_current_user();
  
  //Foto do usuário 
  //Retorna uma imagem padrão caso não haja uma foto escolhida ou usuário não está logado. 
  //30 é o tamanho da foto em px. 
  $img_user = get_avatar($current_user->ID, 30, ”, ‘foto usuario’, ”);  
  
  //Altera o rótulo do menu pela foto. 
  $items = str_replace(‘{{user-avatar}}’, $img_user, $items);  
  
  //Nome do usuário
  $items = str_replace(‘{{user-name}}’, $current_user->user_firstname, $items);  
  
  return $items; 
  } 
  
   add_filter(‘wp_nav_menu_items’, ‘foto_menu’, 10, 2);
  
  Lembrando que lá no menu você precisa colocar assim: {{user-avatar}}{{user-name}}
  
  Responder
  1. Daniel Nunes de Avila disse:
    
    01/09/2020 às 18:47
    
    Obrigado meu velho”
    
    Deu um erro: “syntax error, unexpected ‘usuario’’ (T_STRING), expecting ‘,’ or ‘)'”
    
    Responder
    1. Daniel Nunes de Avila disse:
      
      01/09/2020 às 18:49
      
      linha com erro: $img_user = get_avatar($current_user->ID, 30, ”, ‘foto usuario’, ”);
      
      Responder
      1. conradomd disse:
        
        01/09/2020 às 18:50
        
        Aguenta aí que vou atualizar o post com o nome do usuário. Bastante gente pede isso…
      2. conradomd disse:
        
        01/09/2020 às 19:07
        
        Atualizei o post! Me diz se deu tudo certo!
      3. Daniel Nunes de Avila disse:
        
        01/09/2020 às 20:36
        
        Excelente! Obrigado pela presteza
carol disse:

20/05/2020 às 21:29

queria colocar que o usuario upe uma imagem como?

Responder
1. conradomd disse:
  
  01/09/2020 às 19:42
  
  Atualizei o post com o código para o nome do usuário…
  
  Responder
carol disse:

03/05/2020 às 23:20

Post maravilhoso procurei em todo lugar,como eu então faço com que o usurário que logou mude a foto de perfil?

Responder
Reinaldo Reis disse:

28/03/2020 às 22:43

Quando copio o código pra colar no function.php aparece umas bolinhas vermelhas e dar erro, só salva depois que apago elas, mas mesmo assim, não funciona, poderia me ajudar?

Responder
1. conradomd disse:
  
  28/03/2020 às 23:06
  
  Isso! tira todas as bolinhas (melhor ainda se você colocar no editor de textos para não copiar nenhum lixo). Não esquece de adicionar o item no menu daquela forma… Qualquer coisa chama no whats que te ajudo…
  
  Responder
  1. Reinaldo Reis disse:
    
    28/03/2020 às 23:31
    
    Oi Conrado, fiz dessa forma, mas mesmo assim, não deu certo, sera que tem configurar alguma coisa no plugin?
    Desculpe estar te incomodando, é porque dentro dos códigos sou bem leigo.
    
    Responder
    1. conradomd disse:
      
      28/03/2020 às 23:43
      
      Na verdade nem precisa do plugin, ele só serve pra alterar a imagem sem o gravatar. Tenta trocar isso: $items = str_replace(‘{{user-avatar}}’, $img_user, $items);   por isso $items = str_replace(‘{{user-avatar}}’, ‘TESTE’, $items);   veja se muda no menu.
      
      Responder
      1. Daniel Nunes de Avila disse:
        
        01/09/2020 às 18:42
        
        só pega caso esteja logado, sem estar logado aparece no menu da página: {{user-avatar}} ou “Teste”, na sugestão que vc enviou por último
Marcos disse:

16/09/2019 às 13:29

como eu coloco o nome da pessoa?

Responder
felipe disse:

22/04/2019 às 19:46

Como colocar o nome do usuário? ao lado da imagem?

Responder
victor disse:

15/12/2018 às 05:05

Poxa boa idéia ótimo tópico, estou a tempo tentando,
coloquei fuctions código lá da pasta wp. /tema/ bizworx/fuctions.php do wordpress. fuctions.php
colei o código do tutorial em cima em baixo, no meio. fuctions, o código nada mudou =/

Em que parte do arquivo fuctions.php se adiciona este código amigo?

Valeu

Responder
1. Conrado Diório disse:
  
  15/12/2018 às 06:25
  
  Em qualquer parte, de preferência no final. O que não funcionou? Ele não substituiu o texto pela foto?
  
  Responder
  1. Reinaldo Reis disse:
    
    28/03/2020 às 23:14
    
    Criei o menu {{user-avatar}}, coloquei o código no final do function.php, instalei o plugin WP User Avatar, mas não substituiu o texto pela foto.
    
    Responder
2. Reinaldo Reis disse:
  
  28/03/2020 às 23:09
  
  O meu Também não funcionou, fiz igualzinho ele explicou.
  
  Responder
Renan Cruz disse:

02/12/2018 às 02:59

img src=”http://empregospara.com.br/wp-content/uploads/ultimatemember/7/profile_photo-190×190.jpg?1543719218″ class=”gravatar avatar avatar-90 um-avatar um-avatar-uploaded” width=”90″ height=”90″ alt=”Renan Cruz” data-default=”http://empregospara.com.br/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg” onerror=”if ( ! this.getAttribute(‘data-load-error’) ){ this.setAttribute(‘data-load-error’, ‘1’);this.setAttribute(‘src’, this.getAttribute(‘data-default’));}”

Desculpe a gafe 🙁

Responder
1. Conrado Diório disse:
  
  02/12/2018 às 03:14
  
  Coloca no Css:
  
  .gravatar.avatar{
  border-radius: 100%;
  }
  
  Responder
  1. Renan Cruz disse:
    
    05/12/2018 às 01:28
    
    Fiz isso e mesmo assim não funcionou. 🙁
    
    Responder
  2. Daniel Nunes de Avila disse:
    
    01/09/2020 às 21:32
    
    Não entendi como inserir no código pra fica redondo? em que parte do código insere?
    
    Responder
    1. Daniel Nunes de Avila disse:
      
      02/09/2020 às 11:45
      
      Consegui deixar redondo assim:
      
      .avatar {
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      }
      
      Na opção personalização da aparência > CSS
      
      Responder
Renan Cruz disse:

02/12/2018 às 00:48

Como ela ficou redondinha assim?

Responder
1. Conrado Diório disse:
  
  02/12/2018 às 00:54
  
  border-radius: 100%
  
  Responder
  1. Renan Cruz disse:
    
    02/12/2018 às 01:51
    
    Desculpe, mas sou completamente leigo, pode me falar aonde exatamente devo inserir esse código?
    
    Responder
  2. Renan Cruz disse:
    
    02/12/2018 às 02:58
    
    Tentei aumentar o tamanho para maior que 30 e não tiver resultado, então inspecionei o elemento HTML e apareceu esses data-load-error, isso tem alguma coisa haver? Obrigado pelo suporte.
    
    Responder

Conrado Diório

Foto de perfil do usuário no menu do tema WordPress

Compartilhar:

35 Comentários

Deixe um comentário Cancelar resposta