Deixe sua tela de login do wordpress com a aparência do seu projeto
Na atualidade é comum encontrar plugins que fazem esse tipo de função. Geralmente é muito fácil o uso de plugin mas muitas vezes desnecessário. Contudo, para fazer uma tela de login do wordpress personalizada, não há necessidade de plugin.
Com esse pequeno código abaixo, você pode personalizar a tela de login do seu wordpress.
Para que tudo aconteça…
Vamos incluir código a seguir no arquivo functions.php do seu tema. Existem duas formas de alterar o arquivo:
- Via painel do wordpress em Aparência > Editor
- Acessando o arquivo via FTP acesse o caminho wp-content > themes > SEU TEMA > functions.php e utilizando um editor de código (VS Code, Sublime Text, etc…).
Insira o código abaixo no final do do arquivo functions.php
<?php
//Logo customizada na pagina de login (admin)
function cutom_login_logo() {
echo "<style type=\"text/css\">
body.login {background:#ffffff!important; height:auto; margin: 0; background-size:100%;}
#login {padding: 3% 0 0!important;}
body.login div#login h1 a {
background-image: url(".get_bloginfo('template_directory')."images/logo.png);
-webkit-background-size: 95%;
background-size: 95%;
margin: 0 auto;
width: 164px;
height:60px;
background-color:#fff;
}
#backtoblog {margin: 0 0!important; padding-bottom:30px!important;}
</style>";
}
add_action( 'login_enqueue_scripts', 'cutom_login_logo' );
add_filter('login_headerurl', create_function('', 'return "http://www.seusite.com.br";'));
add_filter('login_headertitle', create_function('', 'return "Nome do Site";'));
?> Com este código é possível substituir a logo do wordpress e alterar alguns estilos como background da logo e background da tela em si.
Na linha 9, o caminho que a logo precisa se encontrar é a pasta images do seu tema.
As linhas 13 e 14, são largura e altura exatas da sua logo.
Insira a URL do seu site na linha 21 e o nome do seu site na linha 22.
Estas são apenas algumas classes CSS da tela de login, você tem várias possibilidades de personalização como alterar cores de inputs e textos.
Se você sabe e/ou já usou alguma outra forma de personalizar a tela de login, compartilhe conosco nos comentários.
Bora compartilhar conhecimento! Até o próximo post.
