Dolutech

Como Personalizar a Página de Login do WordPress: Guia Completo

Lucas Catão de Moraes

A página de login do WordPress é muitas vezes negligenciada quando se trata de personalização. Porém, personalizar a tela de login do WordPress pode trazer diversos benefícios, como fortalecer a identidade visual da sua marca, melhorar a experiência dos usuários e até aumentar a segurança. Neste artigo, você vai aprender a personalizar a página de login do WordPress, usando plugins e métodos manuais, incluindo o uso do White Label CMS.

image 2
Login do WordPress

Por Que Personalizar a Página de Login do WordPress?

Personalizar a página de login oferece várias vantagens. Algumas das principais razões incluem:

Com essas vantagens em mente, vamos explorar métodos fáceis para realizar essa personalização, tanto com plugins quanto manualmente.

Personalizando a Página de Login do WordPress com Plugins

Usar plugins é a maneira mais fácil e rápida de personalizar a página de login do WordPress, especialmente para quem não tem experiência com código. Vamos ver alguns plugins que podem ajudar nessa tarefa.

1. White Label CMS

O White Label CMS é uma excelente escolha para quem deseja personalizar a página de login do WordPress. Ele oferece uma interface intuitiva, permitindo que até usuários iniciantes façam modificações sem complicações.

Recursos do White Label CMS

Como Configurar o White Label CMS

  1. Instale e Ative o Plugin: No painel do WordPress, vá até “Plugins > Adicionar Novo” e busque por “White Label CMS”. Instale e ative o plugin.
  2. Configurações de White Label: Após a ativação, acesse as configurações do plugin em “Configurações > White Label CMS”.
  3. Configuração da Página de Login: No menu do plugin, selecione “Login” para personalizar a página. Aqui, você pode:
    • Alterar o logotipo e o URL de redirecionamento.
    • Personalizar as cores do formulário de login, do fundo e do botão.
    • Remover o link “Esqueceu sua senha?” e o link para a página de login do WordPress, se desejar.

Com o White Label CMS, a personalização da página de login se torna rápida e prática, sem exigir conhecimentos técnicos.

White Label CMS – WordPress plugin | WordPress.org

2. Custom Login Page Customizer

Outro plugin popular para personalizar a página de login é o Custom Login Page Customizer. Esse plugin permite que você visualize as mudanças em tempo real, usando o personalizador do WordPress.

Recursos do Custom Login Page Customizer

Como Configurar o Custom Login Page Customizer

  1. Instale e Ative o Plugin: Vá até “Plugins > Adicionar Novo” e busque por “Custom Login Page Customizer”.
  2. Personalizar a Página de Login: Após a ativação, vá até “Aparência > Personalizar > Custom Login Page Customizer”. Aqui, você poderá:
    • Alterar o fundo com uma cor ou imagem personalizada.
    • Adicionar um logotipo personalizado.
    • Personalizar a tipografia e os botões.
    • Ajustar a opacidade, o espaçamento e outras configurações de estilo.

Esse plugin é ideal para quem quer personalizar sem alterar o código e ver as mudanças em tempo real.

Custom Login Page Customizer – WordPress plugin | WordPress.org

Personalizando a Página de Login Manualmente

Para aqueles que têm conhecimento de HTML, CSS e PHP, é possível personalizar a página de login manualmente. Esse método oferece maior controle sobre o design e permite customizações mais avançadas.

1. Alterando o Logotipo

Para substituir o logotipo padrão do WordPress, adicione o seguinte código ao seu arquivo functions.php:

function custom_login_logo() {
    echo '
    <style type="text/css">
        #login h1 a { 
            background-image: url(' . get_stylesheet_directory_uri() . '/images/custom-logo.png); 
            background-size: contain;
            width: 100%;
            height: 80px;
        }
    </style>
    ';
}
add_action('login_head', 'custom_login_logo');

Esse código substitui o logotipo do WordPress pelo seu próprio logotipo. Certifique-se de alterar o caminho da imagem para o local onde seu logotipo está armazenado.

2. Personalizando o Link do Logotipo

Para personalizar o link do logotipo e redirecionar para a página inicial do seu site, use o seguinte código:

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

Esse código altera o link do logotipo, fazendo com que ele leve o usuário à página inicial ao invés da página do WordPress.

3. Alterando as Cores e o Estilo do Formulário

Se deseja personalizar o formulário de login, como cores e bordas, você pode adicionar CSS personalizado:

function custom_login_css() {
    echo '
    <style type="text/css">
        body.login {
            background-color: #f4f4f9;
        }
        #login form {
            background: #ffffff;
            border: 1px solid #ddd;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        #loginform input[type="text"], #loginform input[type="password"] {
            border: 1px solid #ddd;
            box-shadow: none;
        }
        #wp-submit {
            background-color: #0073aa;
            border-color: #0073aa;
            color: #fff;
            text-transform: uppercase;
        }
    </style>
    ';
}
add_action('login_head', 'custom_login_css');

Esse código adiciona um estilo customizado ao formulário de login, incluindo mudanças no fundo, nas bordas e no botão de envio.

4. Customizando Mensagens de Erro

Para personalizar ou ocultar mensagens de erro na página de login, adicione o código abaixo:

function custom_login_error_message() {
    return 'Ops! Algo deu errado. Tente novamente.';
}
add_filter('login_errors', 'custom_login_error_message');

Esse código substitui a mensagem de erro padrão do WordPress, dificultando a identificação de erros específicos para tentativas de login maliciosas.

Conclusão

Personalizar a página de login do WordPress é uma prática que pode trazer inúmeros benefícios para o seu site. Seja utilizando plugins como o White Label CMS ou fazendo alterações manuais com HTML e CSS, é possível criar uma experiência de login única e alinhada à identidade da sua marca. Além de melhorar a aparência do seu site, a personalização da página de login também contribui para a segurança, pois dificulta a identificação da plataforma WordPress.

Sair da versão mobile