Como personalizar a página de login do WordPress em 2026 (completo)

O ecrã de login padrão do WordPress (wp-login.php) é icónico, mas grita “Blog Genérico”. Se é uma agência a construir um site para um cliente (ex: Coca-Cola), ver o logótipo do WordPress é uma falha de branding.

Em 2026, White-Labeling é prática padrão. Este guia mostra como personalizar completamente a experiência de login usando functions.php, fazendo-a parecer uma aplicação feita à medida, enquanto implementa segurança robusta.

1. Personalização completa do logótipo

1.1 Mudar o logótipo (o básico)

Primeiro, vamos livrar-nos do “W” do WordPress e substituí-lo pelo logótipo do seu cliente.

function wppoland_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-cliente.svg);
            height: 65px;
            width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_login_logo' );

Dica Profissional: O link padrão vai para WordPress.org. Mude-o para a homepage do seu site:

function wppoland_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wppoland_login_logo_url' );

function wppoland_login_logo_url_title() {
    return get_bloginfo( 'name' );
}
add_filter( 'login_headertext', 'wppoland_login_logo_url_title' );

1.2 Logótipo responsivo

function wppoland_responsive_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/logo-cliente.svg);
            height: 65px;
            width: 100%;
            max-width: 320px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding-bottom: 30px;
        }

        @media (max-width: 768px) {
            #login h1 a, .login h1 a {
                height: 50px;
                max-width: 280px;
            }
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_responsive_login_logo' );

2. Formulários de login personalizados

2.1 Renovação total de CSS (o visual moderno)

O fundo cinzento padrão (#f1f1f1) é aborrecido. Vamos torná-lo numa experiência de marca em ecrã inteiro. Crie um ficheiro login-style.css no seu tema e carregue-o apenas na página de login.

function wppoland_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'wppoland_login_stylesheet' );

Exemplo style-login.css:

body.login {
    background-color: #0d1117; /* Dark Mode */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.login form {
    background: #161b22;
    border: 1px solid #30363d;
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    border-radius: 12px;
    padding: 40px;
}

.login label {
    color: #c9d1d9;
    font-size: 14px;
    font-weight: 500;
}

.login input[type="text"],
.login input[type="password"] {
    background: #0d1117;
    border: 1px solid #30363d;
    border-radius: 6px;
    color: #c9d1d9;
    padding: 12px 16px;
    font-size: 14px;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: #58a6ff;
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
    outline: none;
}

.wp-core-ui .button-primary {
    background: #238636; /* GitHub Green */
    border-color: rgba(27,31,35,0.15);
    border-radius: 6px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    text-shadow: none;
    box-shadow: none;
    transition: all 0.2s ease;
}

.wp-core-ui .button-primary:hover {
    background: #2ea043;
    border-color: rgba(27,31,35,0.15);
    transform: translateY(-1px);
}

.login #nav,
.login #backtoblog {
    text-align: center;
}

.login #nav a,
.login #backtoblog a {
    color: #8b949e;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: #58a6ff;
}

2.2 Layout de colunas múltiplas

function wppoland_login_two_column() { ?>
    <style type="text/css">
        body.login {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 100vh;
            margin: 0;
        }

        .login-left {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
        }

        .login-left-content {
            color: white;
            text-align: center;
        }

        #login {
            justify-self: center;
            align-self: center;
        }
    </style>
    <div class="login-left">
        <div class="login-left-content">
            <h2>Bem-vindo de volta!</h2>
            <p>Faça login para aceder à sua conta.</p>
        </div>
    </div>
<?php }
add_action( 'login_header', 'wppoland_login_two_column' );

2.3 Adicionar conteúdo personalizado abaixo do formulário

function wppoland_login_footer_content() { ?>
    <div class="login-footer-content">
        <p>Precisa de ajuda? Contacte o suporte em <a href="mailto:suporte@exemplo.com">suporte@exemplo.com</a></p>
        <p>&copy; <?php echo date('Y'); ?> <?php echo get_bloginfo('name'); ?>. Todos os direitos reservados.</p>
    </div>
    <style>
        .login-footer-content {
            text-align: center;
            margin-top: 30px;
            color: #8b949e;
            font-size: 12px;
        }
        .login-footer-content a {
            color: #58a6ff;
            text-decoration: none;
        }
    </style>
<?php }
add_action( 'login_footer', 'wppoland_login_footer_content' );

3. Integração de autenticação de dois fatores (2FA)

3.1 Preparação para 2FA

Em 2026, as palavras-passe estão indiscutivelmente obsoletas. Embora não possa construir facilmente 2FA do zero no functions.php, deve estilizar os campos 2FA se usar um plugin.

Nota: Não recomendamos plugins de segurança. 2FA pode ser feita através de funcionalidades do alojamento ou soluções mínimas. Se precisar de estilizar campos 2FA, pode usar Two Factor (WordPress.org) ou plugins compatíveis com Google Authenticator – sem suites de segurança pesadas.

3.2 Estilização de campos 2FA

function wppoland_2fa_styling() { ?>
    <style type="text/css">
        /* Estilização para Two Factor plugin */
        .login .two-factor-prompt {
            background: #161b22;
            border: 1px solid #30363d;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
        }

        .login .two-factor-prompt h3 {
            color: #c9d1d9;
            margin-top: 0;
        }

        .login .two-factor-prompt input[type="text"] {
            background: #0d1117;
            border: 1px solid #30363d;
            border-radius: 6px;
            color: #c9d1d9;
            padding: 12px 16px;
            font-size: 16px;
            letter-spacing: 4px;
            text-align: center;
            width: 100%;
        }

        .login .two-factor-methods {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .login .two-factor-methods button {
            flex: 1;
            background: #21262d;
            border: 1px solid #30363d;
            color: #c9d1d9;
            padding: 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .login .two-factor-methods button:hover {
            background: #30363d;
        }

        /* Estilização para Passkeys/WebAuthn */
        .login .passkey-button {
            color: white;
            border: none;
            padding: 14px 24px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .login .passkey-button:before {
            content: "🔐";
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_2fa_styling' );

3.3 Redirecionamento pós-login baseado em 2FA

function wppoland_2fa_redirect( $redirect_to, $request, $user ) {
    if ( isset( $user->ID ) && function_exists( 'two_factor_user_enabled' ) ) {
        if ( two_factor_user_enabled( $user->ID ) ) {
            // O utilizador tem 2FA ativado, o plugin irá gerir o redirecionamento
            return $redirect_to;
        }
    }

    // Redirecionar para página de configuração de 2FA se ainda não estiver configurado
    if ( current_user_can( 'manage_options' ) && ! get_user_meta( $user->ID, '_two_factor_enabled', true ) ) {
        return admin_url( 'profile.php#two-factor-options' );
    }

    return $redirect_to;
}
add_filter( 'login_redirect', 'wppoland_2fa_redirect', 10, 3 );

4. Reforço de segurança da página de login

4.1 Reforço de mensagens de erro (obscuridade)

Por defeito, se digitar uma palavra-passe errada, o WordPress diz: “A palavra-passe que introduziu para o utilizador admin está incorreta.” Isto diz a um hacker: “O utilizador admin existe! Agora é só fazer brute-force à palavra-passe.”

Vamos forçar o WordPress a ser vago.

function wppoland_login_errors() {
    return 'Algo está errado! Verifique as suas credenciais.';
}
add_filter( 'login_errors', 'wppoland_login_errors' );

Agora a mensagem de erro é genérica e não revela nada.

4.2 Limitação de tentativas de login

function wppoland_limit_login_attempts() {
    $ip = $_SERVER['REMOTE_ADDR'];
    $transient_key = 'login_attempts_' . $ip;
    $attempts = get_transient( $transient_key );

    if ( $attempts === false ) {
        $attempts = 0;
    }

    if ( $attempts >= 5 ) {
        wp_die( 'Demasiadas tentativas de login. Por favor, tente novamente em 15 minutos.' );
    }

    // Incrementar tentativas em caso de falha
    add_action( 'wp_login_failed', function() use ( $transient_key, $attempts ) {
        set_transient( $transient_key, $attempts + 1, 15 * MINUTE_IN_SECONDS );
    } );
}
add_action( 'login_init', 'wppoland_limit_login_attempts' );

4.3 Alterar URL de login (obscuridade)

// Requer configuração no servidor web ou plugin especializado
// Exemplo com .htaccess ou configuração nginx

function wppoland_custom_login_url() {
    return site_url( 'acesso' ); // Alterar wp-login.php para /acesso
}
// add_filter( 'login_url', 'wppoland_custom_login_url' );

4.4 Proteção contra CSRF

function wppoland_add_login_nonce() {
    wp_nonce_field( 'wppoland_login_action', 'wppoland_login_nonce' );
}
add_action( 'login_form', 'wppoland_add_login_nonce' );

function wppoland_verify_login_nonce( $user, $password ) {
    if ( ! isset( $_POST['wppoland_login_nonce'] ) || ! wp_verify_nonce( $_POST['wppoland_login_nonce'], 'wppoland_login_action' ) ) {
        return new WP_Error( 'invalid_nonce', 'Pedido de login inválido.' );
    }
    return $user;
}
add_filter( 'authenticate', 'wppoland_verify_login_nonce', 30, 2 );

4.5 Cabeçalhos de segurança

function wppoland_security_headers() {
    header( 'X-Frame-Options: DENY' );
    header( 'X-Content-Type-Options: nosniff' );
    header( 'X-XSS-Protection: 1; mode=block' );
    header( 'Referrer-Policy: strict-origin-when-cross-origin' );
}
add_action( 'login_init', 'wppoland_security_headers' );

5. Remover o efeito “shake”

Quando falha um login, o formulário treme. Alguns clientes acham isto irritante ou pouco profissional. Pode remover o JS que aciona isto.

function wppoland_remove_login_shake() {
    remove_action( 'login_head', 'wp_shake_js', 12 );
}
add_action( 'login_head', 'wppoland_remove_login_shake' );

6. Comparação de plugins de login personalizado

6.1 Integração com LoginPress

// Personalizações adicionais quando LoginPress está ativo
function wppoland_loginpress_customizations() {
    if ( function_exists( 'loginpress' ) ) {
        // Adicionar CSS adicional
        wp_add_inline_style( 'loginpress-login', '
            .loginpress-container {
                backdrop-filter: blur(10px);
            }
        ' );
    }
}
add_action( 'login_enqueue_scripts', 'wppoland_loginpress_customizations', 20 );

7. Diretrizes de branding para agências

7.1 Consistência de marca

function wppoland_agency_branding() {
    $primary_color = '#0073aa'; // Cor primária do cliente
    $secondary_color = '#005177'; // Cor secundária
    ?>
    <style type="text/css">
        :root {
            --brand-primary: <?php echo $primary_color; ?>;
            --brand-secondary: <?php echo $secondary_color; ?>;
        }

        body.login {
            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
        }

        .wp-core-ui .button-primary {
            border-color: var(--brand-primary);
        }

        .wp-core-ui .button-primary:hover {
            background: var(--brand-secondary);
            border-color: var(--brand-secondary);
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wppoland_agency_branding' );

7.2 Mensagens de boas-vindas personalizadas

function wppoland_welcome_message( $message ) {
    if ( empty( $message ) ) {
        return '<p class="message">Bem-vindo! Faça login para aceder à área de administração.</p>';
    }
    return $message;
}
add_filter( 'login_message', 'wppoland_welcome_message' );

7.3 Favicon e metadados

function wppoland_login_favicon() {
    echo '<link rel="icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico">';
    echo '<meta name="robots" content="noindex, nofollow">';
}
add_action( 'login_head', 'wppoland_login_favicon' );

8. Resolução de problemas

8.1 CSS não está a ser aplicado

• Verificar caminho do ficheiro CSS
• Limpar cache do navegador
• Verificar prioridade dos hooks

8.2 Logótipo não aparece

• Verificar permissões do ficheiro
• Confirmar formato de imagem (SVG requer suporte do servidor)
• Verificar caminho com get_stylesheet_directory_uri()

8.3 Redirecionamentos em loop

• Desativar todos os plugins de login
• Verificar configurações de 2FA
• Revisar hooks login_redirect

8.4 Conflitos com plugins de segurança

• Testar um plugin de cada vez
• Verificar ordem de carregamento dos hooks
• Consultar documentação do plugin

9. FAQ

P: Posso usar um construtor de páginas para criar a página de login? R: Sim, plugins como Theme My Login permitem criar páginas de login no frontend usando construtores.

P: É seguro alterar a URL de login?

P: Como adiciono CAPTCHA ao login?

P: Posso ter múltiplas páginas de login personalizadas?

P: O 2FA é obrigatório para todos os utilizadores?

P: Como testo as personalizações sem afetar utilizadores?

P: As personalizações persistem após atualizações do WordPress?

Resumo

Uma página de login personalizada é a “cereja no topo do bolo” de um projeto WordPress profissional.

Pontos-chave:

• Marca: Logótipo + Link consistente
• Estilo: Controlo total de CSS
• Segurança: Mensagens de erro genéricas, 2FA, limitação de tentativas
• Experiência: Remover animações irritantes, adicionar conteúdo útil

Não deixe o seu cliente ver a interface padrão do WordPress. Isso quebra a imersão de uma solução feita à medida.

Invista tempo na personalização do login para criar uma primeira impressão profissional e segura.