Se você já gerencia um site WordPress com comentários habilitados, provavelmente já se deparou com um problema comum: comentários de SPAM. Bots automatizados rastreiam sites em busca de formulários abertos para enviar mensagens indesejadas, links maliciosos e até tentativas de phishing.
Uma das formas mais eficazes de combater isso é integrar o Google reCAPTCHA ao formulário de comentários. Neste artigo, vamos explicar o funcionamento do código apresentado, seus benefícios e como ele protege seu site.
O que o código faz
O código é um plugin personalizado que adiciona o Google reCAPTCHA v2 ao formulário de comentários do WordPress. Ele garante que o botão de envio (Submit) fique desabilitado até que o visitante resolva o desafio de verificação.
Principais funcionalidades:
- Integração com a API do Google reCAPTCHA
- O script oficial da API é carregado no site.
- O widget do reCAPTCHA é inserido antes do botão de envio de comentários.
- Controle visual do botão de envio
- Antes de resolver o reCAPTCHA: botão sem ação (
cursor: no-drop) e com opacidade reduzida. - Após resolver o reCAPTCHA: botão volta à cor e opacidade normais, com cursor de clique (
pointer). - Caso o token expire, o botão é automaticamente desabilitado novamente.
- Antes de resolver o reCAPTCHA: botão sem ação (
- Verificação no servidor
- Antes de salvar o comentário, o código envia o token do reCAPTCHA para validação na API do Google.
- Comentários enviados sem validação são bloqueados.
Por que usar reCAPTCHA nos comentários?
- Bloqueio de SPAM automático
- A maioria dos bots não consegue resolver o desafio do reCAPTCHA, evitando comentários indesejados.
- Proteção contra sobrecarga do servidor
- Comentários automatizados podem consumir recursos, gerar sobrecarga no banco de dados e até derrubar o site.
- Segurança adicional
- Impede que bots enviem links maliciosos nos comentários, protegendo a reputação do site.
- Melhoria na moderação
- Com menos SPAM, o administrador pode focar apenas nos comentários legítimos dos visitantes.
Como funciona na prática
- Visitante acessa a página → o botão de envio do comentário está desabilitado.
- Visitante resolve o reCAPTCHA → o botão é habilitado e pode ser clicado.
- Token expira → o botão é automaticamente desabilitado novamente.
- Comentário enviado → o WordPress verifica o token no servidor do Google antes de salvar.
Conclusão
O uso de reCAPTCHA em comentários é uma medida simples, mas extremamente eficaz, para proteger seu site contra SPAM e interações automatizadas maliciosas. O código apresentado não apenas integra a solução de forma personalizada, mas também oferece feedback visual ao usuário, garantindo uma melhor experiência e maior segurança.
Com essa implementação, seu site fica protegido, seu banco de dados permanece limpo e você mantém apenas comentários reais e relevantes.
// --------------------------------------------------------------------------
// INÍCIO DO CÓDIGO DEFINITIVO (v3.3) - CSS FORÇADO COM !IMPORTANT
// --------------------------------------------------------------------------
// --- PARTE 1: PÁGINA DE ADMINISTRAÇÃO ---
function parceiro_programacao_recaptcha_menu() {
add_options_page('Configurações do reCAPTCHA', 'reCAPTCHA Comentários', 'manage_options', 'parceiro-recaptcha-options', 'parceiro_programacao_recaptcha_page_html');
}
add_action('admin_menu', 'parceiro_programacao_recaptcha_menu');
function parceiro_programacao_recaptcha_page_html() {
if (!current_user_can('manage_options')) return;
$options = get_option('parceiro_recaptcha_keys');
?>
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<p>Insira aqui as chaves do Google <strong>reCAPTCHA v2 ("Não sou um robô")</strong>.</p>
<form action="options.php" method="post">
<?php
settings_fields('parceiro_recaptcha_settings_group');
do_settings_sections('parceiro-recaptcha-options');
submit_button('Salvar Alterações');
?>
</form>
</div>
<?php
}
function parceiro_programacao_register_settings() {
register_setting('parceiro_recaptcha_settings_group', 'parceiro_recaptcha_keys');
add_settings_section('parceiro_recaptcha_section_keys', 'Chaves da API', null, 'parceiro-recaptcha-options');
add_settings_field('parceiro_recaptcha_site_key', 'Chave do Site (Site Key)', 'parceiro_programacao_field_site_key_html', 'parceiro-recaptcha-options', 'parceiro_recaptcha_section_keys');
add_settings_field('parceiro_recaptcha_secret_key', 'Chave Secreta (Secret Key)', 'parceiro_programacao_field_secret_key_html', 'parceiro-recaptcha-options', 'parceiro_recaptcha_section_keys');
}
add_action('admin_init', 'parceiro_programacao_register_settings');
function parceiro_programacao_field_site_key_html() {
$options = get_option('parceiro_recaptcha_keys');
$site_key = isset($options['site_key']) ? esc_attr($options['site_key']) : '';
echo "<input type='text' name='parceiro_recaptcha_keys[site_key]' value='{$site_key}' class='regular-text'>";
}
function parceiro_programacao_field_secret_key_html() {
$options = get_option('parceiro_recaptcha_keys');
$secret_key = isset($options['secret_key']) ? esc_attr($options['secret_key']) : '';
echo "<input type='text' name='parceiro_recaptcha_keys[secret_key]' value='{$secret_key}' class='regular-text'>";
}
// --- PARTE 2: INTEGRAÇÃO NO SITE ---
/**
* VERSÃO 3.3 - CSS FINAL: Usa '!important' em TODAS as propriedades para garantir a prioridade do estilo.
*/
function parceiro_programacao_adicionar_scripts_recaptcha() {
$options = get_option('parceiro_recaptcha_keys');
if (empty($options['site_key']) || !is_singular() || !comments_open()) {
return;
}
// 1. API do Google
wp_enqueue_script('google-recaptcha', 'https://www.google.com/recaptcha/api.js', array(), null, true);
// 2. CSS handle
wp_register_style('parceiro-recaptcha-style', false);
wp_enqueue_style('parceiro-recaptcha-style');
// 3. CSS com estados separados
$css = "
/* Estado desabilitado */
#submit.disabled {
opacity: 0.5 !important;
cursor: no-drop !important;
}
/* Estado habilitado (normal) */
#submit {
opacity: 1 !important;
cursor: pointer !important;
transition: opacity 0.3s ease;
}
";
wp_add_inline_style('parceiro-recaptcha-style', $css);
// 4. JS para alternar o estado visual
$javascript = "
function recaptchaSuccessCallback() {
const submitButton = document.getElementById('submit');
if (submitButton) {
submitButton.disabled = false;
submitButton.classList.remove('disabled');
submitButton.style.cursor = 'pointer';
submitButton.style.opacity = '1';
}
}
function recaptchaExpiredCallback() {
const submitButton = document.getElementById('submit');
if (submitButton) {
submitButton.disabled = true;
submitButton.classList.add('disabled');
submitButton.style.cursor = 'no-drop';
submitButton.style.opacity = '0.5';
}
}
window.addEventListener('load', function() {
recaptchaExpiredCallback();
});
";
wp_add_inline_script('google-recaptcha', $javascript);
}
add_action('wp_enqueue_scripts', 'parceiro_programacao_adicionar_scripts_recaptcha');
/**
* Adiciona o placeholder do reCAPTCHA com os 'callbacks'.
*/
function parceiro_programacao_adicionar_campo_recaptcha() {
$options = get_option('parceiro_recaptcha_keys');
if (!empty($options['site_key'])) {
echo '<div class="g-recaptcha"
data-sitekey="' . esc_attr($options['site_key']) . '"
data-callback="recaptchaSuccessCallback"
data-expired-callback="recaptchaExpiredCallback"
style="margin-bottom: 15px;"></div>';
}
}
add_action('comment_form', 'parceiro_programacao_adicionar_campo_recaptcha');
// --- PARTE 3: VERIFICAÇÃO DE SEGURANÇA NO SERVIDOR ---
function parceiro_programacao_verificar_comentario($commentdata) {
$options = get_option('parceiro_recaptcha_keys');
if (empty($options['secret_key'])) {
return $commentdata;
}
if (!isset($_POST['g-recaptcha-response']) || empty($_POST['g-recaptcha-response'])) {
wp_die(__('Por favor, resolva o desafio reCAPTCHA.'));
}
$token = $_POST['g-recaptcha-response'];
$response = wp_remote_post('https://www.google.com/recaptcha/api/siteverify', array('body' => array('secret' => $options['secret_key'], 'response' => $token, 'remoteip' => $_SERVER['REMOTE_ADDR'])));
if (!is_wp_error($response) && wp_remote_retrieve_response_code($response) === 200) {
$result = json_decode(wp_remote_retrieve_body($response));
if (!empty($result) && $result->success === true) {
return $commentdata;
} else {
wp_die(__('Falha na verificação do reCAPTCHA. Tente novamente.'));
}
} else {
wp_die(__('Erro: Não foi possível comunicar com o servidor reCAPTCHA.'));
}
return $commentdata;