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.
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:
- Refinamento da identidade visual: Adicionar o logotipo, cores e fontes da sua marca à página de login cria uma experiência de login mais integrada e profissional.
- Melhora da experiência do usuário: Facilita a navegação e torna o login mais intuitivo para os usuários, especialmente em sites corporativos.
- Aumento da segurança: Alterações visuais e o uso de plugins especializados dificultam o reconhecimento da plataforma WordPress, reduzindo o risco de ataques de força bruta.
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
- Personalização do Logotipo: Você pode substituir o logotipo padrão do WordPress pelo logotipo da sua empresa.
- Cores e Estilo: Permite personalizar as cores de fundo e o estilo do formulário de login.
- Remoção de Elementos WordPress: Esconde links e outros elementos que identifiquem o site como WordPress.
- Página de Login Personalizada: Possibilita adicionar uma mensagem ou imagem de fundo na página de login.
Como Configurar o White Label CMS
- 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.
- Configurações de White Label: Após a ativação, acesse as configurações do plugin em “Configurações > White Label CMS”.
- 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
- Customização Completa: Personaliza fundo, logotipo, botões e campos.
- Pré-visualização em Tempo Real: Você pode ver as alterações enquanto ajusta o design.
- Integração com o Personalizador do WordPress: Todas as opções de personalização são acessadas diretamente no painel de personalização.
Como Configurar o Custom Login Page Customizer
- Instale e Ative o Plugin: Vá até “Plugins > Adicionar Novo” e busque por “Custom Login Page Customizer”.
- 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.
Amante por tecnologia Especialista em Cibersegurança e Big Data, Formado em Administração de Infraestrutura de Redes, Pós-Graduado em Ciências de Dados e Big Data Analytics e Machine Learning, Com MBA em Segurança da Informação, Escritor do livro ” Cibersegurança: Protegendo a sua Reputação Digital”.
