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 subitens, 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 quando o usuário não estiver logado ou sem foto.

WP User Avatar




Compartilhar:

Share on facebook
Share on twitter
Share on linkedin
Share on skype
Share on whatsapp
Share on email

12 Comentários

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

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

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