O formulário de comentários padrão do WordPress consiste em quatro campos cinzentos e um aborrecido botão «Submeter». Os utilizadores veem-no dezenas de vezes em sites diferentes e simplesmente passam por ele. Entretanto, comentários animados são um dos sinais mais fortes para os motores de busca: a página recebe atualizações regulares, conteúdo UGC novo e mantém os visitantes envolvidos durante mais tempo.

O problema é que o design do formulário padrão mata a vontade de escrever. Os campos «Nome», «Email» e «Website» parecem burocracia em vez de um convite à conversa. A boa notícia: o WordPress dá-lhe acesso total à marcação do formulário. Através de filtros, hooks e CSS, pode transformá-lo em qualquer coisa sem mexer no núcleo do motor.

Neste guia, vamos cobrir TODOS os métodos de personalização de comentários, desde alterar o tipo de letra do campo de introdução de texto até adicionar reCAPTCHA e plugins que transformam o formulário em algo quase como uma rede social. Todo o código funciona nas versões atuais do WordPress através de filtros padrão do núcleo, sem hacks ou modificações diretas ao motor.

💡 Visão geral rápida:

• Alterar estilos dos campos de introdução de texto via CSS (tipo de letra, cor, preenchimento), sem plugins, apenas o ficheiro style.css
• Redesenhar o botão de submeter: cor, raio do contorno, texto, através do filtro comment_form_defaults
• Remover o campo Website, não deixando espaço para os spammers colocarem links e tornando a tarefa mais fácil para os utilizadores
• Adicionar campos personalizados (idade, avaliação, telefone) através de comment_form_default_fields
• Configurar o Google reCAPTCHA, bloqueando bots enquanto pessoas reais passam sem serem notadas
• Alterar o título do bloco e a ordem dos campos, colocando a área de texto em primeiro ou em último lugar
• Adicionar subscrições de respostas, Quicktags e estilização CSS para todo o bloco
• Expandir o formulário com plugins (Disqus, Jetpack, Simple Comment Editing) quando o código não é suficiente

Alterar estilos dos campos de introdução de texto via CSS

A forma mais simples e segura de renovar o formulário são algumas linhas no style.css do seu tema. As classes CSS para os campos de comentários estão documentadas e não mudam há anos. São elas #author para o nome, #email para o email, #url para o website e #comment para o texto.

Eis um exemplo que altera o tipo de letra dentro dos campos: o autor e o email recebem um estilo com serifa e itálico, enquanto o campo URL recebe um tipo de letra monoespaçado para se destacar visualmente:

1
#author, #email {
2
    font-family: "Open Sans", "Droid Sans", Arial;
3
    font-style: italic;
4
    color: #1d1d1d;
5
    letter-spacing: .1em;
6
}
7
 
8
#url {
9
    color: #1d1d1d;
10
    font-family: "Lucida Console", "Courier New", "Courier", monospace;
11
}

Adicione este código ao final do style.css do seu tema filho (ou através de «Aparência → Personalizar → CSS adicional»), guarde e os campos mudarão imediatamente. Sem plugins, sem sobrecarga.

Alterar a aparência e o texto do botão de submeter

O botão «Submeter» padrão é um retângulo cinzento sem personalidade. O CSS transforma-o num apelo à ação vibrante. Aqui está um excerto pronto com gradiente, cantos arredondados e efeito hover:

1
#submit {
2
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
3
    background-color: #44c767;
4
    border-radius: 28px;
5
    border: 1px solid #18ab29;
6
    display: inline-block;
7
    cursor: pointer;
8
    color: #ffffff;
9
    font-family: Arial;
10
    font-size: 17px;
11
    padding: 16px 31px;
12
    text-decoration: none;
13
    text-shadow: 0px 1px 0px #2f6627;
14
}
15
 
16
#submit:hover {
17
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
18
    background-color: #5cbf2a;
19
}
20
 
21
#submit:active {
22
    position: relative;
23
    top: 1px;
24
}

O CSS altera a aparência, mas não o texto em si. Quando precisar de substituir «Submeter» por «Deixar um Comentário», «Partilhe a Sua Opinião» ou algo temático, entra em ação o filtro PHP comment_form_defaults. O código abaixo vai no functions.php ou num plugin de snippets (Code Snippets):

1
$commenter = wp_get_current_commenter();
2
$req = get_option('require_name_email');
3
$aria_req = ($req ? " aria-required='true'" : '');
4
 
5
$fields = array(
6
    'author' => '<p class="comment-form-author">' .
7
        '<label for="author">' . __('Name') . '</label> ' .
8
        ($req ? '<span class="required">*</span>' : '') .
9
        '<input id="author" name="author" type="text" value="' .
10
        esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
11
 
12
    'email'  => '<p class="comment-form-email">' .
13
        '<label for="email">' . __('Email') . '</label> ' .
14
        ($req ? '<span class="required">*</span>' : '') .
15
        '<input id="email" name="email" type="text" value="' .
16
        esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',
17
);
18
 
19
$comments_args = array(
20
    'fields'       => $fields,
21
    'label_submit' => 'Send My Comment',
22
);
23
 
24
comment_form($comments_args);

A linha chave é 'label_submit' => 'Send My Comment', que é exatamente o que substitui o texto do botão. Substitua a string pela sua própria versão e o formulário falará com a voz do seu blogue.

Remover o campo Website do formulário

O campo «Website» é um íman para spammers. Eles preenchem-no com links para os seus recursos, mesmo quando o comentário em si parece inocente. Para os leitores comuns, este campo não serve para nada, pois as pessoas vêm partilhar os seus pensamentos, não fazer publicidade.

Pode remover o campo Website sem plugins usando o filtro comment_form_default_fields. O código abaixo mantém apenas os campos de nome e email, removendo o URL:

1
$commenter = wp_get_current_commenter();
2
$req = get_option('require_name_email');
3
$aria_req = ($req ? " aria-required='true'" : '');
4
 
5
$fields = array(
6
    'author' => '<p class="comment-form-author">' .
7
        '<label for="author">' . __('Name') . '</label> ' .
8
        ($req ? '<span class="required">*</span>' : '') .
9
        '<input id="author" name="author" type="text" value="' .
10
        esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
11
 
12
    'email'  => '<p class="comment-form-email">' .
13
        '<label for="email">' . __('Email') . '</label> ' .
14
        ($req ? '<span class="required">*</span>' : '') .
15
        '<input id="email" name="email" type="text" value="' .
16
        esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',
17
);
18
 
19
$comments_args = array('fields' => $fields);
20
 
21
comment_form($comments_args);

Passámos apenas author e email para o array $fields. A chave url está simplesmente ausente, por isso o WordPress não a renderiza. Os utilizadores preenchem agora dois campos em vez de três, a barreira de entrada diminui e os spammers não têm onde deixar links. Adicione o código ao functions.php e verifique o formulário em qualquer artigo.

Adicionar campos personalizados através do filtro

Por vezes, os campos padrão não são suficientes. Precisa de uma classificação por estrelas, um campo «Idade», uma caixa de verificação para concordar com as regras, um número de telefone ou qualquer outra coisa. O WordPress fornece o filtro comment_form_default_fields, que lhe permite ligar-se ao array de campos e adicionar os seus próprios.

O exemplo abaixo adiciona um campo de texto «Idade» entre os campos padrão e a área de texto:

1
function add_comment_fields($fields) {
2
    $fields['age'] = '<p class="comment-form-age">' .
3
        '<label for="age">' . __('Age') . '</label>' .
4
        '<input id="age" name="age" type="text" size="30" /></p>';
5
    return $fields;
6
}
7
add_filter('comment_form_default_fields', 'add_comment_fields');

O filtro passa o array $fields pela sua função, adiciona a chave 'age' com markup HTML e o WordPress renderiza-a no formulário. Pode adicionar um campo «Telefone» (type="tel"), uma caixa de verificação de subscrição da newsletter (type="checkbox") ou uma lista pendente para selecionar um tópico (<select>) da mesma forma.

A principal vantagem do filtro em relação à edição direta do template: o seu código reside no functions.php ou no Code Snippets e não depende do tema específico. Mude de tema e os seus campos personalizados permanecem.

Adicionar o Google reCAPTCHA para proteção contra spam

Mesmo com o campo Website removido, os spammers encontram brechas. Os bots aprenderam a gerar comentários coerentes e a contornar captchas simples. O Google reCAPTCHA resolve o problema de forma fundamental: a verificação acontece em segundo plano, sem clicar em semáforos.

O plugin Invisible reCAPTCHA for WordPress integra a verificação em todos os formulários padrão do site: início de sessão, registo, recuperação de palavra-passe e (importante para nós) comentários. Monitoriza o comportamento do ponteiro do rato e os padrões de interação, detetando bots sem fazer uma única pergunta aos utilizadores reais. Leia mais sobre a configuração no nosso artigo sobre como adicionar reCAPTCHA aos comentários do WordPress.

Algoritmo rápido de configuração:

• Aceda a google.com/recaptcha/admin/create e registe o seu site (escolha v3 ou v2 Invisible)

• Preencha o rótulo e o domínio, aceite os termos e clique em «Submit»

• Copie a Site Key e a Secret Key, pois vai precisar delas para ativar o plugin
• No painel de administração do WordPress, vá a «Settings → Invisible reCAPTCHA»

• Cole as chaves nos campos correspondentes e marque «Enable Comments Protection»
• Guarde as alterações

A partir deste momento, todos os comentários passam por verificação em segundo plano. Os utilizadores reais não notam nada, enquanto os bots são rejeitados. Os comentários de spam caem para zero numa noite.

Alterar o título acima do formulário

«Leave a Reply» é o título padrão que o WordPress exibe acima do formulário. Na maioria dos casos, é neutro e adequado, mas por vezes quer algo mais envolvente: «Share Your Thoughts», «Got Something to Add?», «Join the Discussion».

O título é alterado através do mesmo array $comments_args que usámos para o botão. O parâmetro title_reply substitui o texto:

1
$comments_args = array(
2
    'fields'       => $fields,
3
    'title_reply'  => 'Please give us your valuable comment',
4
);
5
comment_form($comments_args);

O código vai no functions.php, juntamente com as outras definições do formulário. Se já personalizou o botão ou removeu o campo Website, basta adicionar 'title_reply' ao array $comments_args existente, sem criar uma chamada duplicada a comment_form().

Alterar a ordem dos campos

A partir do WordPress 4.4, a área de texto aparece por defeito em primeiro lugar, antes do nome, email e website. Os utilizadores veem de imediato onde escrever. Mas se preferir o formato antigo (nome → email → website → texto), o filtro comment_form_fields dá-lhe controlo total.

A função abaixo move o campo de texto para o final do formulário, que é o padrão clássico familiar aos utilizadores de versões mais antigas do WP:

1
function wpb_move_comment_field_to_bottom($fields) {
2
    $comment_field = $fields['comment'];
3
    unset($fields['comment']);
4
    $fields['comment'] = $comment_field;
5
    return $fields;
6
}
7
add_filter('comment_form_fields', 'wpb_move_comment_field_to_bottom');

A lógica é simples: extrair o elemento comment do array, removê-lo da sua posição atual e colocá-lo em último. Quer uma ordem diferente? Altere a sequência de unset e da atribuição. O array $fields é um array associativo PHP normal. As suas chaves padrão são author (nome), email (email), url (website) e comment (texto), além de quaisquer campos personalizados que tenha adicionado anteriormente.

Subscrever respostas a comentários

Um utilizador deixa um comentário e vai embora. Alguém responde três dias depois e ele nunca descobre nem volta. Uma caixa de verificação «Notificar-me de respostas» resolve este problema: os leitores recebem um email quando alguém responde ao seu comentário e regressam à discussão.

O plugin Subscribe to Comments Reloaded trata desta função. Instale-o da forma habitual (Plugins → Adicionar Novo → pesquisar pelo nome), ative-o e vá a «Settings → Subscribe to Comments».

Nas definições, pode configurar:

• o texto junto à caixa de verificação;
• o design da notificação (texto simples ou HTML);
• a possibilidade de subscrever SEM deixar um comentário (os visitantes também podem seguir discussões);
• o intervalo entre emails para evitar spam.

O plugin adiciona uma única caixa de verificação ao formulário e os utilizadores marcam-na se quiserem. Sem obrigação, sem degradação da experiência de utilização. E as taxas de regresso dos leitores ao site aumentam de forma notória.

Quicktags: barra de formatação acima do texto

Quicktags são os botões de formatação que o WordPress mostra acima do campo de texto do comentário: Negrito, Itálico, Link, Citação. Estão desativados por defeito na maioria dos temas, o que é uma pena: os utilizadores que veem uma barra de ferramentas familiar, como no Word, sentem-se mais confiantes e escrevem comentários mais estruturados.

O plugin Comment Form Quicktags ativa esta barra de ferramentas com um clique. Após a instalação e ativação, vá a «Settings → Discussion», encontre a secção Quicktags e ative a opção. Guarde e a barra de ferramentas aparecerá acima do campo de texto em todos os artigos.

Estilização CSS completa para o bloco de comentários

Quando quer mais do que apenas campos coloridos e precisa de reformular todo o bloco com fundo, sombras, cantos arredondados e espaçamento, precisa de CSS abrangente. Abaixo encontra um conjunto pronto de estilos que transforma o layout cinzento num cartão elegante com borda, sombra e um destaque colorido à esquerda:

1
.comment-respond,
2
.entry-pings,
3
.entry-comments {
4
    color: #444;
5
    padding: 20px 45px 40px 45px;
6
    border: 1px solid #ccc;
7
    overflow: hidden;
8
    background: #fff;
9
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
10
    border-left: 4px solid #444;
11
}
12
 
13
.entry-comments h3 {
14
    font-size: 30px;
15
    margin-bottom: 30px;
16
}
17
 
18
.comment-respond h3,
19
.entry-pings h3 {
20
    font-size: 20px;
21
    margin-bottom: 30px;
22
}
23
 
24
.comment-respond {
25
    padding-bottom: 5%;
26
    margin: 20px 1px;
27
    border-left: none !important;
28
}
29
 
30
.comment-header {
31
    color: #adaeb3;
32
    font-size: 14px;
33
    margin-bottom: 20px;
34
}
35
 
36
.comment-header cite a {
37
    border: none;
38
    font-style: normal;
39
    font-size: 16px;
40
    font-weight: bold;
41
}
42
 
43
.comment-header .comment-meta a {
44
    border: none;
45
    color: #adaeb3;
46
}
47
 
48
li.comment {
49
    background-color: #fff;
50
    border-right: none;
51
}
52
 
53
.comment-content {
54
    clear: both;
55
    overflow: hidden;
56
}
57
 
58
.comment-list li {
59
    font-size: 14px;
60
    padding: 20px 30px 20px 50px;
61
}
62
 
63
.comment-list .children {
64
    margin-top: 40px;
65
    border: 1px solid #ccc;
66
}
67
 
68
.comment-list li li {
69
    background-color: #f5f5f6;
70
}
71
 
72
.comment-list li li li {
73
    background-color: #fff;
74
}
75
 
76
.comment-respond input[type="email"],
77
.comment-respond input[type="text"],
78
.comment-respond input[type="url"] {
79
    width: 50%;
80
}
81
 
82
.comment-respond label {
83
    display: block;
84
    margin-right: 12px;
85
}
86
 
87
.entry-comments .comment-author {
88
    margin-bottom: 0;
89
    position: relative;
90
}
91
 
92
.entry-comments .comment-author img {
93
    border-radius: 50%;
94
    border: 5px solid #fff;
95
    left: -80px;
96
    top: -5px;
97
    position: absolute;
98
    width: 60px;
99
}
100
 
101
.entry-pings .reply {
102
    display: none;
103
}
104
 
105
.form-allowed-tags {
106
    background-color: #f5f5f5;
107
    font-size: 16px;
108
    padding: 24px;
109
}
110
 
111
.comment-reply-link {
112
    cursor: pointer;
113
    background-color: #444;
114
    border: none;
115
    border-radius: 3px;
116
    color: #fff;
117
    font-size: 12px;
118
    font-weight: 300;
119
    letter-spacing: 1px;
120
    padding: 4px 10px;
121
    text-transform: uppercase;
122
    width: auto;
123
}
124
 
125
.comment-reply-link:hover {
126
    color: #fff;
127
}
128
 
129
.comment-notes {
130
    display: none;
131
}

Este CSS estiliza não só o formulário, mas também a lista de comentários já publicados: os avatares tornam-se circulares e deslocam-se para a esquerda, as respostas são destacadas com fundo e borda, o link «Responder» torna-se um botão compacto e o aviso «O seu email não será publicado» fica oculto.

Adicione-o ao style.css do seu tema filho ou através do personalizador e funciona em qualquer stack.

Formulário de comentário para um tipo de conteúdo específico

Por vezes, são necessários campos personalizados apenas para conteúdos específicos. Por exemplo, num site de base de dados de filmes, pode querer mostrar um campo «Idade» apenas no tipo de conteúdo «Filmes», mantendo o formulário padrão no blogue.

O WordPress permite vincular um filtro a um tipo de conteúdo específico usando a etiqueta condicional is_singular():

1
function add_comment_fields($fields) {
2
    if (is_singular('Movies')) {
3
        $fields['age'] = '<p class="comment-form-age">' .
4
            '<label for="age">' . __('Age') . '</label>' .
5
            '<input id="age" name="age" type="text" size="30" /></p>';
6
    }
7
    return $fields;
8
}
9
add_filter('comment_form_default_fields', 'add_comment_fields');

A função é a mesma da secção sobre adicionar campos, mas envolvida em if (is_singular('Movies')). O campo «Idade» é renderizado APENAS quando a página atual é um artigo único do tipo Movies. No blogue, nas páginas e noutros tipos de conteúdo personalizados, o formulário mantém-se padrão.

Plugins para personalização avançada

Quando o código deste guia não é suficiente e quer reconstruir completamente os comentários, entram em cena plugins especializados. Substituem o formulário padrão pelo seu próprio, completo com os seus próprios estilos, moderação e funcionalidades.

Jetpack Comments

O Jetpack da Automattic não é apenas um plugin de comentários, mas todo um conjunto de módulos (mais de 20). A funcionalidade chave especificamente para comentários é que os utilizadores podem iniciar sessão através de redes sociais (Google, Twitter, Facebook) e publicar comentários sem preencher campos manualmente. O formulário torna-se mais curto e a barreira de entrada diminui. Ao mesmo tempo, a opção clássica permanece disponível, com os campos para introdução manual ainda acessíveis.

Disqus Comment System

O Disqus é a alternativa mais conhecida aos comentários padrão. Principais vantagens: ordenação por mais recentes/antigos/populares, possibilidade de votar positivamente nos comentários de outros, recomendações de artigos semelhantes do seu próprio site e sincronização dos comentários de volta para a base de dados do WordPress (pode reverter para o formulário padrão a qualquer momento sem perder dados). Para utilizadores com uma conta Disqus, comentar torna-se contínuo em qualquer site com este plugin. Veem uma notificação de resposta, clicam e respondem.

As desvantagens incluem o registo obrigatório no Disqus (ao contrário do formulário padrão, onde o nome e o email são suficientes), links de publicidade que precisam de ser desativados nas definições e preocupações com a privacidade, uma vez que o plugin recolhe dados dos visitantes para mostrar recomendações. Combine o Disqus com o Disqus Conditional Load: este atrasa o carregamento do script até que o utilizador faça scroll até aos comentários, acelerando visivelmente a página.

Simple Comment Editing

O Simple Comment Editing resolve uma tarefa específica: dá aos utilizadores uma janela de 5 minutos para editar um comentário acabado de enviar. Uma gralha no nome, um link partido, um erro gramatical: veja, corrija, guarde. A investigação mostra que a maioria dos utilizadores deteta erros logo após o envio, e a possibilidade de corrigir rapidamente o texto reduz a ansiedade e aumenta o envolvimento.

Lazy Load for Comments

O Lazy Load for Comments não acrescenta novas funcionalidades, mas faz algo importante: adia o carregamento de todo o bloco de comentários até que o utilizador faça scroll até ele. Como os comentários estão sempre no final da página, o seu HTML e scripts não devem carregar com o conteúdo principal. O plugin reduz os pedidos desnecessários no arranque, acelera o Largest Contentful Paint e, de um modo geral, torna o site mais rápido de acordo com as métricas do Core Web Vitals.

Vídeo: personalizar o formulário de comentários na prática

Este tutorial de 10 minutos mostra o processo completo de configuração do formulário de comentários do WordPress, desde a adição de campos personalizados até ao estilo CSS:

⁉️🤔 Perguntas frequentes

Posso personalizar o formulário de comentários sem editar os ficheiros do tema?

Sim, e é até recomendado. O CSS personalizado é inserido através de «Aparência → Personalizar → CSS adicional», e o código PHP através do plugin Code Snippets (gratuito, no repositório do WordPress). Ambos os métodos sobrevivem a mudanças e atualizações do tema sem perdas. A única exceção é se souber com certeza que está a trabalhar com um tema filho e controla o seu functions.php e style.css.

Qual o método de proteção contra spam melhor: reCAPTCHA ou remover o campo Website?

Ambos em conjunto. Remova sempre o campo Website, pois não é necessário para leitores reais e serve quase exclusivamente os spammers. Adicione o reCAPTCHA v3 por cima, que bloqueia bots ao nível do comportamento, de forma invisível para os visitantes. Cada método isoladamente deixa passar algum spam, mas juntos conseguem perto de zero comentários indesejados.

O que devo fazer se o formulário de comentários se partir depois de adicionar código?

Primeiro: verifique se o código PHP está inserido no functions.php ANTES da tag de fecho ?> (se presente) e se o snippet não contém erros de sintaxe. Segundo: se editou o functions.php diretamente, faça sempre uma cópia de segurança antes de editar, pois o ecrã branco da morte resolve-se restaurando o ficheiro via FTP. Terceiro: se o formulário simplesmente desapareceu visualmente, verifique no CSS se existe display: none nos seletores .comment-respond ou .comment-notes.

Este código funciona com temas de blocos (FSE)?

Os estilos CSS funcionam em qualquer tema, incluindo temas de blocos (Twenty Twenty-Three, Twenty Twenty-Four e derivados). Os filtros PHP comment_form_defaults e comment_form_default_fields também são universais, pois fazem parte do núcleo do WordPress e não dependem do tema. A única nuance: nos temas de blocos, o modelo de comentários pode ser substituído através do Editor do Site e as classes CSS podem ser diferentes. Verifique os seletores reais através do inspetor do navegador.

Posso desativar completamente os comentários em todo o site?

Sim: «Configurações → Discussão» → desmarque «Permitir que as pessoas enviem comentários em novos artigos». Para artigos existentes, selecione todos em «Artigos → Todos os artigos», escolha «Editar» no menu de ações em massa, aplique e, no menu «Comentários», selecione «Não permitir». Plugins como o Disable Comments fazem o mesmo com um clique, mas para uma operação única, um plugin é exagerado.

O que implementar e por que ordem: lista de verificação final

A sequência de ações que dará o máximo de resultados com o mínimo de complicações:

• Remover o campo Website, não deixando aos spammers onde colocar links e tornando a experiência mais simples para os utilizadores.
• Configurar o reCAPTCHA v3, bloqueando bots ao nível do comportamento, sem captcha.
• Renovar o CSS: tipo de letra, espaçamento, cor do botão, sombra no bloco. Cinco minutos e o formulário parece parte do design, em vez de um elemento estranho.
• Adicionar subscrições de respostas, pois um em cada dois comentadores recorrentes vem especificamente de uma notificação.
• Ativar os Quicktags, porque a barra de ferramentas de formatação aumenta a confiança do utilizador e a qualidade do texto.

Se após estes passos o formulário ainda não corresponder às suas expectativas, avance para as técnicas avançadas deste guia: campos personalizados para tipos de conteúdo específicos, Disqus para funcionalidades de comunidade, Lazy Load para velocidade.

Escreva nos comentários abaixo deste artigo qual o método que funcionou para si. Lemos tudo e atualizamos o guia com base nas experiências reais dos leitores.