Como Estilizar o Formulário de Comentários do WordPress (Guia Definitivo)

Você quer mudar o estilo do formulário de comentários do WordPress no seu site? Na WPBeginner, passamos anos experimentando diferentes maneiras de aumentar o engajamento do usuário e descobrimos que um formulário de comentários bonito e fácil de usar pode fazer uma diferença enorme .

Comentários desempenham um papel importante na construção do engajamento do usuário em um site. Quando você torna fácil e visualmente atraente para os usuários deixarem comentários, você incentiva mais discussões e interações no seu site.

Neste artigo, mostraremos como estilizar facilmente o formulário de comentários do WordPress para aumentar o engajamento no seu site.

Antes de Começar

Temas do WordPress controlam a aparência do seu site. Cada tema do WordPress vem com vários arquivos, incluindo arquivos de modelo, arquivo functions, JavaScripts e folhas de estilo.

Folhas de estilo contêm as regras de CSS para todos os elementos usados pelo seu tema do WordPress. Você pode adicionar seu próprio CSS personalizado para substituir as regras de estilo do seu tema.

Se você nunca fez isso antes, consulte nosso artigo sobre como adicionar CSS personalizado no WordPress para iniciantes.

Além do CSS, você também pode precisar adicionar algumas funções para modificar a aparência padrão do seu formulário de comentários do WordPress. Se você nunca fez isso antes, consulte nosso artigo como copiar e colar código no WordPress.

Dito isso, vamos dar uma olhada em como estilizar o formulário de comentários do WordPress.

Como este é um guia bastante abrangente, criamos um índice para facilitar a navegação:

• Estilizando o Formulário de Comentários do WordPress Usando o SeedProd Theme Builder
• Change WordPress Comments with Default CSS Classes
• Adicionando Login Social aos Comentários do WordPress
• Adicionando Texto de Política de Comentários no Formulário de Comentários do WordPress
• Mover o Campo de Texto de Comentários para Baixo
• Remover o Campo Website (URL) do Formulário de Comentários do WordPress
• Adicionar uma Caixa de Seleção para Assinar Comentários no WordPress
• Adicionar Campos Personalizados ao Formulário de Comentários do WordPress

Estilizando o Formulário de Comentários do WordPress Usando o SeedProd Theme Builder

Este método requer o SeedProd, que é o melhor plugin construtor de páginas e temas do WordPress do mercado.

É recomendado para iniciantes sem experiência em codificação. No entanto, a desvantagem deste método é que ele substituirá seu tema WordPress existente por um tema personalizado.

Primeiro, você precisa instalar e ativar o plugin SeedProd. Para mais detalhes, consulte nosso guia passo a passo sobre como instalar um plugin do WordPress.

Observação: Você precisará de pelo menos o plano PRO para acessar o recurso de construtor de temas.

Após a ativação, você precisará criar modelos para o seu tema WordPress personalizado. O SeedProd permite que você gere facilmente esses modelos usando um de seus temas integrados.

Para instruções detalhadas, consulte nosso tutorial sobre como criar um tema WordPress personalizado sem codificação.

Depois de gerar seus modelos de tema, você precisa clicar no link 'Editar Design' sob o modelo de Postagem Única.

Isso carregará a pré-visualização da postagem única na interface do construtor de temas do SeedProd. Você notará o bloco do formulário de comentários na parte inferior da pré-visualização.

Simplesmente clique no formulário de comentários e você verá suas propriedades no painel esquerdo.

A partir daqui, você pode adicionar uma nota de comentário ou política de privacidade, você também pode mudar para a aba 'Avançado' para editar o estilo do formulário de comentários sem escrever nenhum código CSS.

Quando terminar, não se esqueça de clicar no botão 'Salvar' para publicar suas alterações.

O SeedProd torna super fácil alterar o estilo de qualquer elemento em seu site sem escrever código.

No entanto, é um construtor de temas e você pode já estar usando um tema do WordPress que você gosta. Nesse caso, as dicas a seguir ajudarão você a alterar manualmente os estilos do formulário de comentários no WordPress.

Alterando o Estilo do Formulário de Comentários no WordPress

Dentro da maioria dos temas do WordPress, existe um template chamado comments.php. Este arquivo é usado para exibir comentários e formulários de comentários em suas postagens de blog. O formulário de comentários do WordPress é gerado usando a função: <?php comment_form(); ?>.

Por padrão, esta função gera seu formulário de comentários com três campos de texto (Nome, E-mail e Website), um campo de área de texto para o texto do comentário, uma caixa de seleção para conformidade com o GDPR e o botão de envio.

Você pode modificar facilmente cada um desses campos simplesmente ajustando as classes CSS padrão. Abaixo está uma lista das classes CSS padrão que o WordPress adiciona a cada formulário de comentários.

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit

Ao simplesmente ajustar essas classes CSS, você pode mudar completamente a aparência do seu formulário de comentários do WordPress.

Vamos tentar mudar algumas coisas, para que você tenha uma boa ideia de como isso funciona.

Primeiro, começaremos destacando o campo ativo do formulário. Destacar o campo atualmente ativo torna seu formulário mais acessível para pessoas com necessidades especiais e também deixa seu formulário de comentários mais bonito em dispositivos menores.

#respond {
background: #fbfbfb;
padding:0 10px 0 10px;
}

/* Highlight active form field */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}

#respond input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
margin: 5px 1px 3px 0px;
border: 2px solid rgba(81, 203, 238, 1);
}

É assim que nosso formulário ficou no tema Twenty Sixteen do WordPress após as alterações:

Usando essas classes, você pode mudar o comportamento de como o texto aparece dentro das caixas de entrada. Vamos mudar o estilo de texto dos campos de nome do autor e URL.

#author, #email {
font-family: "Open Sans", "Droid Sans", Arial;
font-style:italic;
color:#1d1d1d;
letter-spacing:.1em;
} 

#url  {
color: #1d1d1d;
font-family: "Luicida Console", "Courier New", "Courier", monospace;
} 

Se você observar atentamente na captura de tela abaixo, a fonte dos campos de nome e e-mail é diferente da URL do site.

Você também pode alterar o estilo do botão de envio do formulário de comentários do WordPress. Em vez de usar o botão de envio padrão, vamos dar a ele um gradiente CSS3 e sombra de caixa.

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
} 

#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}

Levando os Formulários de Comentários do WordPress para o Próximo Nível

Você pode estar pensando que isso foi muito básico. Bem, temos que começar por aí para que todos possam acompanhar.

No entanto, você pode levar seu formulário de comentários do WordPress para o próximo nível reorganizando os campos do formulário, adicionando login social, assinaturas de comentários, diretrizes de comentários, tags rápidas e muito mais.

Adicionar Login Social aos Comentários do WordPress

Vamos começar adicionando logins sociais aos comentários do WordPress.

A primeira coisa que você precisa fazer é instalar e ativar o plugin Super Socializer. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, você precisa visitar Super Socializer » Social Login e, em seguida, marcar a caixa que diz 'Enable Social Login'.

Isso abre o painel de opções de login social. Primeiro, clique na aba ‘Advanced Configuration’.

Em seguida, certifique-se de que a caixa ‘Enable at comment form’ esteja marcada.

Em seguida, clique na aba ‘Basic Configuration’. Aqui, você pode escolher as redes sociais que deseja adicionar marcando as caixas na seção ‘Select Social Networks’.

Abaixo disso, o plugin exigirá chaves de API para se conectar com plataformas sociais. Simplesmente clique no ícone de ‘Ponto de Interrogação’ para exibir as instruções sobre como obtê-las para cada plataforma.

Quando terminar, clique no botão ‘Save Changes’ para salvar suas configurações de login social.

Agora você pode visitar seu site para ver os botões de login social acima do seu formulário de comentários. 

Adicionando Texto de Política de Comentários Antes ou Depois do Formulário de Comentários

Amamos todos os nossos usuários e realmente apreciamos que eles dediquem alguns minutos para deixar um comentário em nosso site. No entanto, para criar um ambiente de discussão saudável, é importante moderar comentários.

Para ter total transparência, criamos uma página de política de comentários, mas você não pode simplesmente colocar este link no rodapé.

Queríamos que nossa política de comentários fosse proeminente e visível para todos os usuários que deixam um comentário. É por isso que decidimos adicionar a política de comentários em nosso formulário de comentários do WordPress.

Se você deseja adicionar uma página de política de comentários, a primeira coisa que você precisa fazer é criar uma página no WordPress e definir sua política de comentários (você pode roubar a nossa e modificá-la para atender às suas necessidades).

Depois disso, você pode adicionar o seguinte código ao arquivo functions.php do seu tema ou a um plugin de trecho de código.

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

O código acima substituirá as notas antes do formulário de comentários padrão por este texto. Também adicionamos uma classe CSS ao código, para que possamos destacar o aviso usando CSS. Aqui está o CSS de exemplo que usamos:

p.comment-policy {
    border: 1px solid #ffd499;
    background-color: #fff4e5;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px 10px 0px;
    font-size: small;
    font-style: italic;
}

É assim que ficou em nosso site de teste:

Se você deseja exibir o link após a área de texto do comentário, use o seguinte código.

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

Não se esqueça de alterar a URL de acordo, para que ela aponte para sua página de política de comentários em vez de example.com.

Mover o Campo de Texto de Comentários para Baixo

Por padrão, o formulário de comentários do WordPress exibe primeiro a área de texto do comentário e, em seguida, os campos de nome, e-mail e site. Essa alteração foi introduzida no WordPress 4.4.

Antes disso, os sites WordPress exibiam primeiro os campos de nome, e-mail e site, e depois a caixa de texto do comentário. Sentimos que nossos usuários estavam acostumados a ver o formulário de comentários nessa ordem, então ainda usamos a ordem antiga dos campos no WPBeginner.

Se você quiser fazer isso, tudo o que você precisa fazer é adicionar o seguinte código ao arquivo functions.php do seu tema ou a um plugin de trechos de código.

function wpb_move_comment_field_to_bottom( $fields ) {
$comment_field = $fields['comment'];
unset( $fields['comment'] );
$fields['comment'] = $comment_field;
return $fields;
}

add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom');

Sempre recomendamos adicionar código no WordPress usando um plugin de trechos de código como o WPCode. Isso facilita a adição de código personalizado sem editar seu arquivo functions.php, para que você não precise se preocupar em quebrar seu site.

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

Após a ativação, vá para Trechos de Código » + Adicionar Trecho no painel do WordPress.

A partir daí, encontre a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘+ Adicionar Snippet Personalizado’ abaixo dela.

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

Em seguida, adicione um título para o seu trecho na parte superior da página, pode ser qualquer coisa para ajudá-lo a lembrar para que serve o código.

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

Por último, basta alternar o interruptor de ‘Inativo’ para ‘Ativo’ e clicar no botão ‘Salvar Trecho’.

Este código simplesmente move o campo de área de texto de comentários para o final.

Remover o Campo Website (URL) do Formulário de Comentários do WordPress

O campo do site no formulário de comentários atrai muitos spammers. Embora removê-lo não impeça spammers ou mesmo reduza comentários de spam, certamente o poupará de aprovar acidentalmente um comentário com um link ruim para o site do autor.

Isso também reduzirá um campo do formulário de comentários, tornando-o mais fácil e amigável. Para mais informações sobre este tópico, consulte nosso artigo sobre como remover o campo de URL do site do formulário de comentários do WordPress.

Para remover o campo de URL do formulário de comentários, basta adicionar o seguinte código ao seu arquivo functions.php ou a um plugin de trecho de código.

function wpbeginner_remove_comment_url($arg) {
    $arg['url'] = '';
    return $arg;
}
add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');

Você pode seguir os mesmos passos da seção anterior para adicionar com segurança este código no WordPress usando o plugin WPCode.

Adicionar uma Caixa de Seleção para Assinar Comentários no WordPress

Quando os usuários deixam um comentário em seu site, eles podem querer acompanhar essa discussão para ver se alguém respondeu ao comentário deles. Ao adicionar uma caixa de seleção para assinar comentários, você permite que os usuários recebam notificações instantâneas sempre que um novo comentário aparecer na postagem.

Para adicionar esta caixa de seleção, a primeira coisa que você precisa fazer é instalar e ativar o plugin Subscribe to Comments Reloaded. Após a ativação, você precisa visitar a página StCR » Formulário de Comentários para configurar as definições do plugin.

Para instruções detalhadas passo a passo, consulte nosso artigo sobre como permitir que os usuários assinem comentários no WordPress.

Adicionar Campos Extras ao Formulário de Comentários do WordPress

Quer adicionar campos extras ao seu formulário de comentários do WordPress? Por exemplo, um campo opcional onde os usuários podem adicionar seu identificador do Twitter?

Simplesmente instale e ative o plugin WordPress Comments Fields . Após a ativação, vá para a página ‘Campos de Comentários’ e mude para a aba ‘Campos de Comentários’.

Simplesmente arraste e solte um campo personalizado e dê a ele um título, descrição e nome de dados.

Assim que terminar de adicionar os campos, não se esqueça de clicar no botão ‘Salvar todas as alterações’.

Agora você pode visualizar seu formulário de comentários para ver os campos personalizados em ação.

Os campos personalizados são então exibidos na moderação de comentários e abaixo do conteúdo do comentário.

Para mais detalhes, veja nosso tutorial sobre como adicionar campos personalizados ao formulário de comentários no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como estilizar o formulário de comentários do WordPress para torná-lo mais divertido para seus usuários. Você também pode querer ver nossas dicas para obter mais comentários em suas postagens de blog do WordPress e nossas escolhas de especialistas dos melhores plugins de mídia social 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.