Como Adicionar Rótulo de Cargo do Usuário ao Lado dos Comentários no WordPress

Um de nossos leitores perguntou recentemente se é possível destacar as funções do usuário ao lado de cada comentário no WordPress. Esta é uma pergunta comum e faz sentido, pois os comentários podem rapidamente se tornar difíceis de acompanhar, especialmente em blogs movimentados ou sites de comunidade.

Exibir um rótulo de função do usuário ao lado de cada comentário ajuda seus visitantes a verem instantaneamente quais comentários vêm de usuários confiáveis, como autores, editores ou administradores. Isso adiciona contexto, constrói credibilidade e pode até incentivar interações mais significativas em sua comunidade.

Ajudamos muitos proprietários de sites a adicionar esse recurso, e é uma maneira simples de tornar sua seção de comentários mais organizada e profissional.

Neste artigo, mostraremos como adicionar facilmente um rótulo de função do usuário ao lado de comentários no WordPress, para que seus leitores possam reconhecer rapidamente quem está contribuindo.

Por que exibir o rótulo da função do usuário ao lado do nome do autor do comentário no WordPress?

Se você permite o registro de usuários em seu site ou gerencia um site WordPress com vários autores, exibir rótulos de função do usuário pode ajudar os visitantes a entender rapidamente quem está comentando e qual é a função do usuário.

Por exemplo, um usuário com a função de usuário editor pode ter um distintivo ao lado do nome nos comentários, sinalizando para outros que o comentário vem de um editor.

Isso não só constrói confiança com seu público, mas também incentiva interações e engajamento mais significativos em seu site.

Muitos temas do WordPress apenas destacam os comentários feitos pelo autor da postagem. Eles não mostram rótulos para outras funções de usuário, mesmo que outros comentários sejam feitos por usuários registrados, administradores ou editores. Adicionar esses rótulos garante que todos os principais contribuidores do seu site sejam facilmente reconhecidos.

Agora que você entende os benefícios, vamos dar uma olhada em como adicionar facilmente um rótulo de função de usuário ao lado dos comentários no WordPress.

Adicionando Rótulo de Função de Usuário ao Lado do Nome do Autor do Comentário no WordPress

Este tutorial requer que você adicione código aos arquivos do seu tema WordPress. Se você nunca fez isso antes, por favor, dê uma olhada em nosso guia sobre como copiar e colar trechos de código no WordPress.

A primeira coisa que você precisa fazer é adicionar o seguinte código ao arquivo functions.php do seu tema, em um plugin específico para o site, ou em um plugin de trechos de código.

if ( ! class_exists( 'WPB_Comment_Author_Role_Label' ) ) :
class WPB_Comment_Author_Role_Label {
public function __construct() {
add_filter( 'get_comment_author', array( $this, 'wpb_get_comment_author_role' ), 10, 3 );
add_filter( 'get_comment_author_link', array( $this, 'wpb_comment_author_role' ) );
}
 
// Get comment author role 
function wpb_get_comment_author_role($author, $comment_id, $comment) { 
$authoremail = get_comment_author_email( $comment); 
// Check if user is registered
if (email_exists($authoremail)) {
$commet_user_role = get_user_by( 'email', $authoremail );
$comment_user_role = $commet_user_role->roles[0];
// HTML output to add next to comment author name
$this->comment_user_role = ' <span class="comment-author-label comment-author-label-'.$comment_user_role.'">' . ucfirst($comment_user_role) . '</span>';
} else { 
$this->comment_user_role = '';
} 
return $author;
} 
 
// Display comment author                   
function wpb_comment_author_role($author) { 
return $author .= $this->comment_user_role; 
} 
}
new WPB_Comment_Author_Role_Label;
endif;

Este código de função acima engata em filtros do WordPress usados para exibir o nome do autor do comentário, incluindo o rótulo da função do usuário.

Na WPBeginner, sempre recomendamos adicionar este código usando WPCode, o melhor plugin de snippets de código para WordPress.

Usar o WPCode é mais seguro e fácil do que editar o arquivo functions.php do seu tema diretamente. Ele previne erros que poderiam quebrar seu site, mantém suas personalizações organizadas e garante que suas alterações não sejam perdidas quando você atualizar seu tema.

Para começar, você precisa instalar e ativar o plugin gratuito WPCode. Para instruções detalhadas, veja este tutorial sobre como instalar um plugin do WordPress.

Assim que o plugin for ativado, navegue até Code Snippets » + Add Snippet no painel do WordPress.

A partir daí, clique no botão ‘+ Adicionar Snippet Personalizado’ em ‘Adicionar seu código personalizado (Novo Snippet)’.

Em seguida, você precisa selecionar ‘Snippet PHP’ como o tipo de código na lista de opções que aparecem na tela.

Isso o levará à página Criar Trecho Personalizado.

A partir daqui, você precisa adicionar um título para o seu snippet de código. Pode ser qualquer coisa que ajude você a lembrar para que serve o código.

Em seguida, cole o código acima na caixa ‘Visualização do Código’.

Depois disso, basta mover o interruptor de ‘Inativo’ para ‘Ativo’ no topo da página.

Finalmente, clique no botão ‘Salvar trecho’.

Agora você pode visitar qualquer postagem com comentários para vê-lo em ação.

Comentários feitos por usuários registrados exibirão sua função de usuário ao lado do nome do autor do comentário. Qualquer comentário feito por usuários não registrados exibirá apenas o nome do autor do comentário.

Agora que adicionamos a função de usuário, é hora de estilizar e deixá-la com uma aparência limpa.

Em nosso código, adicionamos uma classe CSS para cada função de usuário, para que possamos usar essas classes CSS para personalizar cada distintivo de usuário de forma diferente (ou seja, usar cores diferentes, etc.)

Você pode usar o seguinte CSS de exemplo como ponto de partida:

.comment-author-label {
    padding: 5px;
    font-size: 14px;
    border-radius: 3px;
}
 
.comment-author-label-editor {  
background-color:#efefef;
}
.comment-author-label-author {
background-color:#faeeee;
}
 
.comment-author-label-contributor {
background-color:#f0faee;   
}
.comment-author-label-subscriber {
background-color:#eef5fa;   
}
 
.comment-author-label-administrator { 
background-color:#fde9ff;
}

Sinta-se à vontade para ajustar o CSS ao seu gosto. É assim que ficou em nosso site de demonstração:

Para mais detalhes, consulte nosso guia sobre como adicionar facilmente CSS personalizado ao seu site WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar um rótulo de função de usuário ao lado de comentários no WordPress. Você também pode querer conferir nosso guia sobre como carregar Gravatars lentamente em comentários do WordPress e nossas escolhas especializadas dos melhores plugins para melhorar comentários do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.