banner de anúncio publicitário da Vultr com código promocional de 100 dólares para teste.
banner de anúncio publicitário da Vultr com código promocional de 100 dólares para teste.

Como Personalizar a Página de Login do WordPress

O WordPress é conhecido por todos como o melhor Gerenciador de Conteúdo disponível no mercado. Por ser uma ferramenta Open Source, nos possibilita personalizar todo o site. Então vamos Personalizar a Página de Login do WordPress.

Quem trabalha com Marketing Digital, criação de sites com WordPress para clientes, entre outros casos, necessita fornecer sua página de logins para usuários acessarem sua área de membros ou até mesmo por simples gosto de ver todo o site personalizado com sua própria identidade visual.

Customizar Página de Login do WordPress

Uma das únicas funções do WordPress que não tiveram melhorias ou foram personalizadas com o passar do tempo, foi a Página de Login do WordPress. Por isso resolvemos mostrar o passo a passo como personalizar a página de login do WordPress.

Página de Login do WordPress

Tela Padrão de Login do WordPress

A Página de Login do WordPress é bem simples, em geral é composta por logotipo, campos para inserção do usuário e senha, botão para logar e os famosos links para quem esqueceu a senha e voltar a página principal do site.

Então a simples personalização e alteração do imagem que representa o WordPress pela imagem do seu site, já torna a personalização da página de login incrível. Mas iremos além disso e te mostraremos o passo a passo para efetuar essas mudanças.

Alterando o Código do WordPress

Em geral todas as mudanças que iremos efetuar, serão feitas em apenas dois arquivos, um deles é o functions.php do seu tema. que está localizado em wp-content/themes/SEUTEMA/functions.php, mas poderá alterar ele também por Aparências – Editor e localizar o arquivo em questão.

O outro arquivo que usaremos é o style.css, da mesma forma que o anterior, você encontrará na mesma pasta.

Insira o código abaixo, ao fim do arquivo functions.php do seu tema. Com isso, estaremos obrigando o WordPress a inserir o arquivo de CSS do próprio tema a página de login do WordPress.

function custom_login_css() {
echo '<link rel="stylesheet" type="text/css" href="'.get_stylesheet_directory_uri().'/style.css"/>';
}
add_action('login_head', 'custom_login_css');

Isso está sendo executado utilizando uma função em PHP. Caso contrário a dificuldade para personalizar a página de login do WordPress seria maior, por necessitar alterar arquivos do próprio WordPress, o que não é recomendado.

Substituir a logo do WordPress da Página de Login

O maior dos detalhes que mudaremos e fará com que sua página de Login WordPress realmente tenha o visual do seu site e mostra para quem for acessar que está no local correto é alterar a imagem do WordPress pela do seu site na Página de Login.

Substituir a logo do WordPress da Página de Login

Agora até ao style.css do seu tema e adicione o código CSS ao final:

.login h1 a {
background-image: url('linkdoseulogo.png');
background-size: 300px 80px;
width: 300px;
height: 80px;
}

OBS: Lembrando que para alterar a logo do WordPress pela sua, deverá efetuar o upload da imagem pelo WordPress e copiar o link da mesma e substituir no código acima onde está linkdoseulogo.png. Não esqueça de alterar também os padrões de tamanho, aconselhamos deixar algo dentro desse valor, então personalize sua logo para isso.

Alterar o Background da Página de Login

Outra possibilidade para personalizar a Página de Login do WordPress é customizando o background, poderá inserir uma cor de fundo ou até mesmo uma imagem que combine com o logotipo do seu site. Então aproveite para testar e aprimorar seu conhecimento.

Alterando o Background da Página de Login do WordPress

Para obter o efeito da imagem acima, insira o código abaixo no arquivo style.css. O mesmo arquivo que utilizamos para alterar o logotipo do WordPress.

body.login { background: #000000;}

OBS: O código #000000 representa a cor preta, então para outras cores, utilize o padrão HEX da cor que desejar. Veja esse gerador de cores em HEX.

Caso desejar inserir uma imagem, utilize o padrão abaixo:

body.login {background-image: url("linkdaimagem.png");}

Customizando o Formulário da Página de Login

Claro que se chegamos até aqui, podemos ir além, não é? Que tal personalizar um pouco mais nossa página de login e customizar o formulário da página de login para completar?

Página de Login do WordPress - Customizando o Formulário

Da mesma forma que fizemos nas personalizações anteriores, iremos inserir o código abaixo no arquivo style.css:

#loginform {
 -moz-border-radius: 8px;
 -webkit-border-radius: 8px;
 border-radius: 8px;
 background-color: #23405d;
}
#loginform label {
 color: #FFFFFF;
}
.login form input {
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 border-radius: 4px;
} 
.login form input:focus,.login form textarea:focus {
 -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;
}

Nesse código, estamos inserindo bordas aredondadas na caixa maior e também um fundo na mesma tonalidade do nosso logotipo. Mudamos também as cores dos textos para ter destaque, além de inserir borda dentro dos campos para inserir os dados e também um efeito ao clicar nesses campos.

Link de Redirecionamento do Login do WordPress

Por último, mas não menos importante, está a personalização do link de redirecionamento do login do WordPress. Afinal nada pior do que clicar na logo do WordPress ou na sua que acabamos de alterar e ser encaminhado para o site do WordPress ao invés de voltar para o nosso, não é?

/* Função que altera a URL, substituindo-a pelo link do seu site. */
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
/* Função que insere o nome do seu site ao passar o mouse em cima do logo */
function my_login_logo_url_title() { 
return 'WordPress Now - Voltar para Home';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Nesse código a única coisa que deverá fazer, é alterar o nome do seu site na oitava linha. Feito isso teremos uma nova Página de Login do WordPress pronta para ser utilizada.

CONCLUSÃO

Lembre-se, toda a personalização é feita através do CSS, então aproveite para testar, modificar e chegar no ponto em que deseja, afinal cada um poderá personalizar como desejar.

Siga os passos que terá sua página personalizada, mas caso tenha alguma dúvida, será um prazer responder seu comentário aqui abaixo.

Paulo Nascimento
12/03/2018

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

WPNow um Website Mediaz desenvolvido por Vedrak