Como Destacar Comentários do Autor no WordPress

A seção de comentários é onde sua comunidade ganha vida. É um espaço importante para conexão, conversa e engajamento do leitor.

Como autor, suas respostas são uma parte fundamental dessa interação. Você quer garantir que sua voz seja fácil de encontrar pelos leitores para incentivar ainda mais discussão.

Destacar seus comentários dá a eles a atenção que merecem. Este toque simples torna toda a sua área de discussão mais profissional, organizada e envolvente.

Acreditamos que pequenas escolhas de design podem ter um grande impacto na experiência do usuário. E esta é uma das mudanças mais fáceis e eficazes que você pode fazer.

Neste artigo, mostraremos como destacar facilmente os comentários do autor no WordPress.

Por que destacar os comentários do autor no WordPress?

Comentários são uma ótima maneira de construir o engajamento do usuário em seu site. Se você quer obter mais comentários em seus artigos, então você pode incentivar isso participando ativamente das discussões.

Para um novo blog do WordPress, você pode facilmente responder a comentários e participar de discussões com seus leitores. Se você gerencia um blog com vários autores, então você pode incentivar os autores a ajudar também na moderação de comentários.

No entanto, a maioria dos temas do WordPress não distingue entre comentários, e eles são listados usando o mesmo estilo.

Um leitor casual pode percorrer os comentários, sem perceber o conteúdo adicional contribuído pelo autor na discussão.

Destacar os comentários do autor ajuda você a remediar isso e faz com que os comentários do autor se destaquem e sejam mais notáveis.

O objetivo final aqui é incentivar novos usuários a participarem dos comentários e, finalmente, assinarem sua newsletter ou se tornarem clientes.

Dito isso, vamos dar uma olhada em como destacar facilmente os comentários do autor no WordPress.

• Destacando o Autor do Comentário no WordPress
• Destacando Comentários por Função de Usuário no WordPress

Destacando o Autor do Comentário no WordPress

A maneira mais fácil de destacar comentários do autor da postagem é adicionando CSS personalizado ao seu tema WordPress. Isso permite que você adicione facilmente o código necessário e veja uma prévia ao vivo de como ficaria em seu site sem salvá-lo.

Primeiro, você precisa visitar Aparência » Personalizar na área de administração do WordPress. Isso iniciará a interface do personalizador de temas do WordPress. Você notará um monte de opções em uma coluna à sua esquerda e uma prévia ao vivo do seu site.

A partir daqui, você precisa clicar na aba 'CSS Adicional'.

Isso abrirá uma área de texto onde você adicionará o CSS personalizado.

No entanto, você vai querer ver como o CSS personalizado ficará quando aplicado.

Para fazer isso, você precisa navegar até uma postagem de blog que contenha comentários de um autor da postagem.

Role para baixo até a seção de comentários e, em seguida, adicione o seguinte CSS personalizado na caixa CSS Personalizado à esquerda.

.bypostauthor { 
background-color: #e7f8fb;
}

Você notará imediatamente que o comentário do autor muda, correspondendo ao CSS personalizado que você inseriu.

Então, como tudo isso funciona?

Veja bem, o WordPress adiciona algumas classes CSS padrão a diferentes áreas do seu site. Essas classes CSS estão lá, independentemente do tema do WordPress que você está usando.

Neste código de exemplo, usamos a classe CSS .bypostauthor, que é adicionada a todos os comentários feitos por um autor da postagem.

Vamos adicionar mais alguns estilos CSS para torná-lo ainda mais proeminente. Aqui está um código de exemplo que adiciona um pequeno rótulo 'Autor' aos comentários do autor da postagem e uma borda ao redor da imagem do avatar do autor.

.bypostauthor:before { 
content:"Author";
float:right;
background-color:#FF1100;
padding:5px;
font-size:small;
font-weight:bold;
color:#FFFFFF;
}
.bypostauthor .avatar {
border:1px dotted #FF1100;
}

É assim que ficou em nosso site de teste.

Destacando Comentários por Função de Usuário no WordPress

Agora, muitos blogs WordPress têm membros da equipe responsáveis por responder a comentários. Sites populares podem ter o autor da postagem, administrador e moderadores respondendo a comentários para aumentar o engajamento do usuário.

Como você destaca um comentário adicionado por um membro da equipe que não é o autor real da postagem?

Existe um truque fácil para conseguir isso. No entanto, ele exige que você adicione código personalizado ao seu site WordPress. Se você nunca fez isso antes, consulte nosso artigo sobre como colar trechos da web no WordPress.

Primeiro, você precisa adicionar o seguinte código ao arquivo functions.php do seu tema ou a 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;

Em vez de editar o arquivo functions.php do seu tema, recomendamos adicionar este código com o WPCode.

Este plugin de trechos de código torna seguro e fácil adicionar código personalizado no WordPress.

Para começar, você precisa instalar e ativar o plugin gratuito WPCode. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Assim que o plugin for ativado, vá para Code Snippets » Add Snippet no painel do seu WordPress.

Em seguida, passe o mouse sobre a opção ‘Add Your Custom Code (New Snippet)’ e clique no botão ‘Add Custom Snippet’.

Em seguida, selecione ‘PHP Snippet’ como o tipo de código nas opções que aparecem na tela.

Agora, você pode adicionar um título para o seu snippet e colar o código acima na caixa ‘Code Preview’.

Depois disso, basta alternar o interruptor de ‘Inativo’ para ‘Ativo’ e clicar no botão ‘Salvar Trecho’ na parte superior da página.

Este código simplesmente adiciona o rótulo da função do usuário ao lado do nome do autor do comentário. É assim que ficaria sem nenhum estilo personalizado.

Vamos deixá-lo um pouco mais bonito adicionando um CSS personalizado. Vá para a página Appearance » Customize e mude para a aba Additional CSS.

Você pode usar o seguinte CSS para estilizar o rótulo da função do usuário nos comentários.

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

É assim que ficou em nosso site de teste. Sinta-se à vontade para modificar o código para combinar com as cores e o estilo do seu tema.

Para mais detalhes, você pode querer ler nosso artigo sobre como adicionar rótulos de função do usuário aos comentários do WordPress.

Esperamos que este artigo tenha ajudado você a aprender como destacar os comentários do autor no WordPress. Você também pode querer ver nosso tutorial sobre como destacar novas postagens para visitantes recorrentes no WordPress e nossas escolhas de especialistas dos melhores plugins de caixa de biografia de autor para 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.