Como adicionar um rótulo de função de 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. Essa é uma pergunta comum, e já ajudamos muitos proprietários de sites a adicionar esse recurso para criar um senso de comunidade mais forte.

Ao exibir o rótulo da função do usuário, você pode indicar instantaneamente quais comentários são provenientes de usuários confiáveis do seu site, como autores, editores e administradores.

Neste artigo, mostraremos como adicionar facilmente o rótulo da função do usuário ao lado dos comentários no WordPress.

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

Se você permitir o registro de usuários em seu site ou administrar um site WordPress com vários autores, os rótulos de usuário poderão apresentar os usuários uns aos outros com base em suas funções de usuário.

Por exemplo, os usuários com a função de editor exibirão um emblema ao lado de seu nome nos comentários, permitindo que outros usuários saibam que esse comentário foi feito por um editor.

Isso gera confiança no seu público e aumenta o envolvimento dos usuários nos comentários do seu site.

Muitos temas do WordPress destacam apenas os comentários feitos pelo autor da postagem. Eles não mostram rótulos para nenhuma outra função de usuário, mesmo que outros comentários sejam feitos por usuários registrados ou administradores do site.

Dito isso, vamos dar uma olhada em como adicionar facilmente o rótulo da função do usuário ao lado dos comentários no WordPress.

Adição de rótulo de função de usuário ao lado do nome do autor do comentário no WordPress

Este tutorial exige que você adicione código aos arquivos de tema do WordPress. Se nunca tiver feito isso antes, 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 plug-in específico do site ou em um plug-in de snippets 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;

Esse código de função acima se conecta aos filtros do WordPress usados para exibir o nome do autor do comentário para incluir o rótulo da função do usuário.

Recomendamos adicionar esse código usando o WPCode, o melhor plug-in de snippets de código para WordPress. É a maneira mais segura e fácil de adicionar código sem editar o arquivo functions.php do seu tema.

Para começar, você precisa instalar e ativar o plug-in gratuito WPCode. Para obter instruções detalhadas, consulte este tutorial sobre como instalar um plug-in do WordPress.

Depois que o plug-in for ativado, navegue até Code Snippets ” + Add Snippet no painel do WordPress. A partir daí, clique no botão “Use Snippet” na opção “Add Your Custom Code (New Snippet)”.

Em seguida, adicione um título para seu snippet de código na parte superior da página. Isso pode ser qualquer coisa que o ajude a lembrar para que serve o código.

Em seguida, cole o código acima na caixa “Code Preview” (Visualização de código) e selecione “PHP Snippet” como o tipo de código na lista suspensa à direita.

Depois disso, basta mover a chave de “Inativo” para “Ativo” e clicar no botão “Salvar snippet”.

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

Os 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 estilizá-la e deixá-la com uma aparência limpa.

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

Você pode usar o CSS de exemplo a seguir 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 de acordo com sua preferência. Esta é a aparência em nosso site de demonstração:

Para obter 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 rótulo de função de usuário ao lado dos comentários no WordPress. Talvez você também queira dar uma olhada em nosso guia sobre como carregar gravatares nos comentários do WordPress e em nossa seleção de especialistas dos melhores plug-ins para aprimorar os comentários do WordPress.

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