Conrado Diório

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.

Usuário logado com foto.

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);
Usuário não logado ou sem foto.
Usuário logado com foto.

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.



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

Compartilhar:

35 Comentários

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

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

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

    1. 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}}

      1. Obrigado meu velho”

        Deu um erro: “syntax error, unexpected ‘usuario’’ (T_STRING), expecting ‘,’ or ‘)'”

        1. linha com erro: $img_user = get_avatar($current_user->ID, 30, ”, ‘foto usuario’, ”);

          1. Aguenta aí que vou atualizar o post com o nome do usuário. Bastante gente pede isso…

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

  5. 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?

    1. 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…

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

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

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

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

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

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

      1. Não entendi como inserir no código pra fica redondo? em que parte do código insere?

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

      1. Desculpe, mas sou completamente leigo, pode me falar aonde exatamente devo inserir esse código?

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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *