A página de Login é umas das poucas coisas que não mudaram no WordPress após tantas atualizações. Por sorte a personalização da página de Login é algo bem simples de ser feito, seja com a ajuda de plugin ou não. Alguns templates já trazem em suas configurações alguma forma de personalização dessa página, mas normalmente não passa da troca das cores de fundo da página ou da inserção do logo da sua marca.
Neste tutorial, que encontrei pelas pequisas na web, vou trazer algumas dicas para a criação de uma página de login do WordPress com um fundo, fontes e estilos personalizados, e ainda criar um efeito fade-in com um código jQuery bem simples. Nosso objetivo será ter uma página com a representada na imagem abaixo.
As possibilidades de personalização da página de login do WordPress são infinitas. Basta criatividade e um pouco de conhecimento de CSS e Javascript e você pode terá uma página que não se parece em nada com o modelo da página de login padrão.
1º Passo – Criar um diretório para os arquivos da personalização
Para manter o controle de todas estas modificações que serão adicionadas em seu Template, vamos criar um novo diretório na pasta do seu template. Sugiro usar o nome “login”, caso esse nome seja usado troque no código que será exibido no decorrer deste tutorial.
2º Passo – Adicionar um fundo personalizado à página de login
Já vi algumas dúvidas de pessoas que não conseguiram resultados na personalização da página de login. Isso se deve ao fato de que o WordPress não carregas o estilo do template na página de login. Por esse motivo oque vamos fazer é criar a nossa própria página de login, fazendo com que esta seja carregada no ao invés da página padrão.
Crie um arquivo com o nome de login-styles.css e insira os a classe login, conforme o código abaixo:
body.login {
background: #fbfbfb url('seufundo-bg.jpg') no-repeat fixed center;
}
Onde seufundo-bg.jpg é o arquivo de imagem de fundo (background) escolhido. A coisa mais importante é selecionar uma imagem grande o suficiente para ser visualizada corretamente em monitores maiores. Tendo escolhido seu arquivo de imagem de fundo envie sua imagem para a pasta “login”.
Agora vamos dizer ao WordPress para carregar o estilo na página de login do aquivo CSS criado acima, substituindo os estilos localizados em “/wp-admin/css/login.css”.
Adicione o código abaixo ao aquivo “functions.php” do seus tempalte.
function custom_login_css ( ) {
echo '<link rel="stylesheet" type="text/css" href = "' . get_stylesheet_directory_uri ( ) . '/ login / login-styles.css "/>' ;
}
add_action ( 'login_head' , 'custom_login_css' ) ;
3º Passo – Substituir o logo do WordPress para o seu próprio personalizado:
Envie o seu logo para o diretório “login” e insira o código abaixo no arquivo CSS do primeiro passo:
.login h1 a {
background-image: url('../login/logo.png');
background-size: 300px 260px;
width: 300px;
height: 260px;
}
Substitua o nome da imagem que você copiou para o diretório “login “ e as dimensões de largura e altura corretas da sua imagem.
Faça os ajustes necessários para alinhar a imagem como você preferir. Por exemplo:
#login {
padding: 30px 0 0;
}
4º Passo – Personalizar a aparência do formulário de login
Agora vamos tratar do design do formulário da página de login. Vamos transformar o formulário padrão conforme a imagem abaixo.
O código CSS abaixo mostra como fazer o formulário exatamente como da imagem acima.
.login form {
margin-left: auto;
margin-right: auto;
padding: 30px;
border: 1px solid rgba(0,0,0,.2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background: rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
overflow: hidden;
}
Em seguida, vamos personalizar o elemento de entrada e adicionar um de desfocar suave no campo do formulário:
.login form input {
width: 240px;
height: 48px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: block;
}
.login form input:focus,
.login form textarea:focus {
background-color: rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
overflow: hidden;
}
Dependendo das cores que você escolher para o seu formulário, você pode precisar de personalizar os rótulos e ajustar a opção “Lembrar“.
.login label {
color: #fff;
line-height: 26px;
}
.login form .input,
.login input[type="text"] { color: #8c8a8a; }
input#rememberme {
height: 18px;
width: 18px;
display: inline;
vertical-align: middle;
margin: 10px 0;
}
Por fim, vamos abordar o estilo de botão e dar-lhe um gradiente para combinar com o tema:
input.button-primary {
width: 138px;
height: 44px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
float:right;
border: 1px solid #3d5a5a;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#6da5a3), to(#416b68));
background: -webkit-linear-gradient(top, #6da5a3, #416b68);
background: -moz-linear-gradient(top, #6da5a3, #416b68);
background: -ms-linear-gradient(top, #6da5a3, #416b68);
background: -o-linear-gradient(top, #6da5a3, #416b68);
background-image: -ms-linear-gradient(top, #6da5a3 0%, #416b68 100%);
padding: 10.5px 21px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0.1) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
text-shadow: #333333 0 1px 0;
color: #e1e1e1;
}
input.button-primary:hover {
border: 1px solid #3d5a5a;
text-shadow: #333333 0 1px 0;
background: #416b68;
background: -webkit-gradient(linear, left top, left bottom, from(#77b2b0), to(#416b68));
background: -webkit-linear-gradient(top, #77b2b0, #416b68);
background: -moz-linear-gradient(top, #77b2b0, #416b68);
background: -ms-linear-gradient(top, #77b2b0, #416b68);
background: -o-linear-gradient(top, #77b2b0, #416b68);
background-image: -ms-linear-gradient(top, #77b2b0 0%, #416b68 100%);
color: #fff;
}
input.button-primary:active {
margin-top:1px;
text-shadow: #333333 0 -1px 0;
border: 1px solid #3d5a5a;
background: #6da5a3;
background: -webkit-gradient(linear, left top, left bottom, from(#416b68), to(#416b68));
background: -webkit-linear-gradient(top, #416b68, #609391);
background: -moz-linear-gradient(top, #416b68, #6da5a3);
background: -ms-linear-gradient(top, #416b68, #6da5a3);
background: -o-linear-gradient(top, #416b68, #6da5a3);
background-image: -ms-linear-gradient(top, #416b68 0%, #6da5a3 100%);
color: #fff;
-webkit-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
-moz-box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
box-shadow: rgba(255,255,255,0) 0 1px 0, inset rgba(255,255,255,0.7) 0 1px 0;
}
5º Passo – Personalizar a Tipografia com o Google Fonts
Como falei no artigo anterior sobre a tipografia do WordPress, podemos usar as Fontes do Google para personalizar ainda mais a página do login, mas você pode utilizar apenas a fonte padrão do seu template. Como já sabemos para o uso das fontes do Google vamos adicionar os código da fonte ao arquivo “functions.php “ do seu template:
function custom_fonts() {
echo '<link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet" type="text/css">';
}
add_action('login_head', 'custom_fonts');
Agora você pode inserir o código CSS abaixo para usar a fonte personalizada na sua página de login:
.login #nav a,
.login #backtoblog a {
font-family: 'Open Sans Condensed', sans-serif;
color: #00667!important;
font-size: 17px;
}
div.updated,
.login .message {
background-color: lightYellow;
border-color: #E6DB55;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 16px;
font-weight: 700;
}
6º Passo – Adicionando Efeito Fade-in ao formulário
Para entender o efeito que estou falando acesse a demonstração ao vivo dessa personalização. Com o pequeno código JQuery abaixo, inserido no arquivo “functions.php” do seu template, no momento do carregamento da sua nova página de login você terá um interessante efeito que vai agradar aos seus visitantes.
add_action( 'login_head', 'untame_fadein',30);
function untame_fadein() {
echo '<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function() { jQuery("#loginform,#nav,#backtoblog").css("display", "none"); jQuery("#loginform,#nav,#backtoblog").fadeIn(3500);
});
// ]]></script>';
}
7º Passo – Alterar o Link do seu logo
A última etapa é para ter certeza de que seu logo está com o link apontando para seu site, ao invés de wordpress.org como no padrão. Isto pode ser feito por adição de um simples filtro no arquivo “functions.php” do seu template.
add_filter( 'login_headerurl', 'custom_login_header_url' );
function custom_login_header_url($url) {
return 'http://seusite.com/';
}
Substitua a ‘http://seusite.com/’ pela URL do seu site
Customizando sua página de Login com um Plugin
Se você não sabe como ou ainda tem receio de alterar o código do seu WordPress, vou listar alguns dos plugins que podem resolver essa questão da personalização da sua página de login de forma bem simples.
A5 Custom Login Page
Este plugin é perfeito para aqueles que não estão nenhum pouco familiarizados com alterações em arquivos CSS, pois utiliza um estilos “modelos” para personalização da sua página de logi. Com ele, você pode adicionar um logo personalizado, mudar a cor ou adicionar uma imagem de fundo e adicionar um pouco de cor para o formulário de login.
Social Login
O Social Login é um plugin que adiciona a funcionalidade de Login Social ao seu site. Com a ativação deste plugin, os usuários podem se conectar ao seu site via Facebook, Twitter, Google, LinkedIn e Yahoo, além de 17 outros sites sociais.
Você não pode mudar o estilo da sua página de login somente com este plugin, mas adicionar uma boa linha de botões sociais que faz com que seja mais fácil para seus visitantes fazer login em seu site. Sendo assim uma boa opção e existem muitos outros plugins de login social no WordPress.
Custom Login
Este é o plugin mais usado para personalizar a sua página de login, com ele é possível adicionar uma cor de fundo ou imagem, adicionar um logotipo personalizado e alterar o formulário de login (cores, raio, espessura, sombra, fontes). Além de tudo isso você também pode adicionar seu próprio CSS personalizado e HTML, se quiser.
Este plugin também inclui um modelo de Photoshop que você pode usar ou personalizar, se você estiver familiarizado com a edição de templates.
Conclusão
Como vimos com apenas algumas linhas simples de CSS e jQuery, ou um simples plugin podemos transformar o login WordPress em uma página totalmente personalizada. É importante que tenhamos em mente que página de login é mais uma oportunidade para que você pode usar para fortalecer a sua marca na mente do seu cliente/visitante. Muitas vezes esquecemos que os usuários também são redirecionados para esta página depois de desconectar de nosso site e muitas vezes é a última impressão que recebem do seu site. Portanto, vale a pena tomar alguns minutos e projetar uma boa experiência de login que irá fazer a impressão correta da sua marca.
Deixe seu comentário. Quero muito saber sua opinião sobre o uso código e plugins deste tutorial. Compartilhe sua experiência conosco.
Abraços!
