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 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:
1
2
3
4
5
| 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.
1
2
3
4
5
6
7
| function custom_login_css ( ) {echo '<link rel = tipo "folha de estilo" = "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:
1
2
3
4
5
6
7
8
9
10
11
| .login h1 a {background-image: url('../login/logo.png');background-size: 300px 260px;width: 300px;height: 260px;}<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;font-size: 13px;line-height: 19px"> </span> |
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:
1
2
3
4
5
| #login {padding: 30px 0 0;} |
Comentários
Postar um comentário