Sabemos que o WordPress é um poderoso gerenciador reconhecido mundialmente, e graças a comunidade unida que o mantém atualizado, a plataforma vêm ganhando destaque a cada dia.
Uma das principais vantagens do sistema, ao nosso ver, é que ele é de distribuição livre e com código aberto. Ou seja, podemos criar ou personalizar coisas incríveis reduzindo o tempo de desenvolvimento.
Hoje por exemplo, vamos mostrar que é possível personalizar a tela de login do seu projeto sem utilizar nenhum plugin, apenas digitanto pequenos trechos de código.
Claro que existem muitos plugins que oferecem essa solução de personalizar a tela de login sem que o desenvolvedor digite sequer uma linha de código. Mas vale lembrar, que para um bom desempenho do seu projeto criado em WordPress, depende de uma série de fatores: servidor, memória, qualidade das imagens (formatos e tamanhos), compactação de códigos, cache dentre outros mais.
Para cada plugin que você instala e ativa em seu projeto, mais memória do servidor vai ser utilizado. Se você possui uma boa hospedagem, acredito que não enfrente problemas. Mas, se sua hospedagem não for das melhores, um plugin desabilitado faz toda a diferença!
Personalizar wp-admin com css (sem plugin)
Fazer a customização da tela de login do wordpress é tão simples que você vai se perguntar porque não tinha feito isso antes.
Na boa? Demora menos do que o tempo digitando os códigos do que você ficar pesquisando e testando plugins pra fazer esse mesmo serviço!
Vamos agora por a “mão na massa” e personalizar a tela de login do wordpress com códigos, na unha!
Primeiro faça o login
Acesse seu projeto e faça o login com seu usuário e senha de permissões de administrador.
Por padrão o wordpress oferece o caminho /wp-admin ou /wp-login.php, na qual recomendamos que você altere esses endereços para tornar seu site um pouco mais seguro.
Seu tema é child?
Antes de prosseguir com os códigos, vamos deixar uma recomendação super importante pra você que talvez ainda não saiba.
Os códigos que vamos digitar vão ficar gravados na folha de estilos (style.css) e no arquivo functions.php do seu tema ativo. Até aí tudo bem.
Acontece que, se você não estiver com um tema filho (child) ativo e o seu tema lançar uma atualização e você atualizar, os códigos que vamos inserir serão sobrescritos pela atualização, ou seja, você vai perder o trabalho de personalização da tela de login do seu projeto, vindo a exibir a tela de login padrão.
Absolutamente pra todo tema, existe um child theme (tema filho) e se não existir, você pode criá-lo com apenas algumas linhas de código.
Então vamos lá, se o seu tema não for filho (child), primeiro faça a instalação do tema child e ative-o.
Nota: Se você por exemplo estiver utilizando o tema Hello Elementor, você deve instalar o tema Hello Elementor Child. O mesmo é válido para outros temas. Você não pode instalar um tema child da Hello Elementor por exemplo em um tema ativo Astra.
Acesse o menu Aparência – Editor de arquivos de temas
Outro ponto positivo do wordpress é que ele permite que você faça alterações em códigos de temas ou plugins pelo próprio painel, ou seja, sem a necessidade de instalar outros softwares em seu computador, tablet ou smartphone.
Por padrão, a barra do WordPress fica na lateral esquerda.
Clique (ou aponte o mouse) no menu Aparência e em seguida clique em Editor de arquivos de tema.
Aguarde até que seja carrega a página.
Certifique-se de que você está editando o tema correto na parte superior da página, em “Selecionar um tema para editar” (como mostra na imagem). Neste exemplo, vamos editar o tema Hello Elementor Child.
Quando surgir alguma atualização do tema Hello Elementor, podemos atualizar sem nenhum medo ou problema que o nosso código de personalização da tela de login vai permanecer gravado.
Editando o functions.php
Com a tela de edição do tema aberta, clique em Funções do tema (functions.php).
Ao lado, no final da página em “Conteúdo do arquivo selecionado:”, insira o código que compartilhamos abaixo e em seguida clique em Atualizar arquivo.
/*PERSONALIZANDO A TELA DE LOGIN*/
function my_custom_login_stylesheet() {
wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/style.css' );
}
add_action( 'login_enqueue_scripts', 'my_custom_login_stylesheet' );
/*Função que altera a URL, trocando pelo endereço do seu site*/
function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
/*Função que adiciona o nome do seu site, no momento que o mouse passa por cima da logo*/
function my_login_logo_url_title() {
return 'Agência ISSO - Voltar para Home';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Na linha 16, substitua a escrita ‘Agência ISSO – Voltar para Home’ pelo título do seu site (mantendo o texto dentro de aspas simples).
Pra toda alteração que você realizar neste código, clique em Atualizar arquivo.
Inserindo o seu logotipo na tela de login
Agora vamos deixar a página de login mais autêntica inserindo o seu logotipo. Por padrão, a imagem presente é a logo do wordpress.
A substituição da logo na tela de login será feita por códigos CSS na folha de estilos do seu tema (por questões de segurança, certifique-se de estar com um tema child ativo e selecionado conforma já mencionamos acima).
Ainda na página Editor de Arquivos de tema, no menu Aparência, clique sobre Folha de estilos (styles.css).
Ao lado, no final da página em “Conteúdo do arquivo selecionado:”, insira o código css que compartilhamos abaixo e em seguida clique em Atualizar arquivo.
/*LOGO DA TELA DE LOGIN*/
.login h1 a {
background-image: url('https://www.seusite.com.br/pasta_da_imagem/nome-do-arquivo.png');
background-size: 250px 150px;
width: 250px;
height: 150px;
margin-top: -30px;
margin-bottom: -40px;
}
Cor ou imagem de fundo na tela de login
Ainda na página Editor de Arquivos de tema, no menu Aparência, clique sobre Folha de estilos (styles.css).
Ao lado, no final da página em “Conteúdo do arquivo selecionado:”, insira o código abaixo:
/*BACKGROUND DA TELA DE LOGIN*/
body.login {
background: #530068;
background-image: url('https://www.seusite.com.br/pasta_da_imagem/nome-do-papel-de-parede.png');
}
Na linha 4, não se esqueça de substituir o ‘https://www.seusite.com.br/pasta_da_imagem/nome-do-papel-de-parede.png’ pelo endereço do arquivo referente a sua imagem de fundo. Não se esqueça de inserir o endereço completo e dentro de aspas simples, assim como mostra no código.
Se você não quer uma imagem de fundo em sua tela de login, basta apagar o código da linha 4. O mesmo válido para a linha 3, caso não queira definir uma cor de fundo.
Clique em Atualizar arquivo e veja os resultados.
Títulos do formulário (label)
Ainda na página Editor de Arquivos de tema, no menu Aparência, clique sobre Folha de estilos (styles.css).
Ao lado, no final da página em “Conteúdo do arquivo selecionado:”, insira o código abaixo:
/*TITULOS DO FORMULÁRIO*/
.login label {
font-size: 12px;
color: #FFF;
}
Clique em Atualizar arquivo e veja os resultados (acesse a página de login).
Botão de confirmação dos dados (Acessar)
Ainda na página Editor de Arquivos de tema, no menu Aparência, clique sobre Folha de estilos (styles.css).
Ao lado, no final da página em “Conteúdo do arquivo selecionado:”, insira o código abaixo:
/*BOTÃO DE CONFIRMAÇÃO DOS DADOS*/
.wp-core-ui .button-primary {
background: #2C0038;
border-color: #2C0038;
color: #fff;
text-decoration: none;
text-shadow: none;
border-radius: 10px;
}
Clique em Atualizar arquivo e veja os resultados (acesse a página de login).
Personalização dos links (Perdeu a senha e Ir para o site)
Ainda na página Editor de Arquivos de tema, no menu Aparência, clique sobre Folha de estilos (styles.css).
Ao lado, no final da página em “Conteúdo do arquivo selecionado:”, insira o código abaixo:
/*PERSONALIZAÇÃO DOS LINKS*/
.login #backtoblog a, .login #nav a {
text-decoration: none;
color: #f1f1f1;
}
Clique em Atualizar arquivo e veja os resultados (acesse a página de login).
Campos de entrada do formulário (input)
Ainda na página Editor de Arquivos de tema, no menu Aparência, clique sobre Folha de estilos (styles.css).
Ao lado, no final da página em “Conteúdo do arquivo selecionado:”, insira o código abaixo:
/*PERSONALIZAÇÃO DOS CAMPOS DE ENTRADA DO FORMULÁRIO*/
.login form .input, .login form input[type=checkbox], .login input[type=text] {
background: #4a005d;
}
.login form .input, .login input[type=password], .login input[type=text] {
font-size: 16px;
color: #fff;
line-height: 1.33333333;
width: 100%;
border-width: 0.0625rem;
padding: 0.1875rem 0.3125rem;
margin: 0 6px 16px 0;
min-height: 40px;
max-height: none;
border-color: #2C0038;
}
Clique em Atualizar arquivo e veja os resultados (acesse a página de login).
Resumão: Todas as funções – Código CSS
Até agora os conteúdos foram individuais. Acima mostramos cada uma das etapas para que você entenda cada funcionalidade e faça a customização da tela de login do seu projeto em wordpress.
Abaixo, vamos compartilhar o código completo para que você insira no style.css do seu tema e faça os ajustes necessários, mas antes lembre-se de inserir o código no arquivo functions.php (que já mencionamos acima).
/*BACKGROUND DA TELA DE LOGIN*/
body.login {
background: #530068;
}
/*LOGO DA TELA DE LOGIN*/
.login h1 a {
background-image: url('https://www.seusite.com.br/pasta_da_imagem/nome-do-arquivo.png');
background-size: 250px 150px;
width: 250px;
height: 150px;
margin-top: -30px;
margin-bottom: -40px;
}
/*FUNDO FORMULÁRIO TELA DE LOGIN*/
.login form {
background: #4A005D;
border: 0px;
border-radius: 10px;
}
/*TITULOS DO FORMULÁRIO*/
.login label {
font-size: 12px;
color: #FFF;
}
/*BOTÃO DE CONFIRMAÇÃO DOS DADOS*/
.wp-core-ui .button-primary {
background: #2C0038;
border-color: #2C0038;
color: #fff;
text-decoration: none;
text-shadow: none;
border-radius: 10px;
}
/*PERSONALIZAÇÃO DOS LINKS*/
.login #backtoblog a, .login #nav a {
text-decoration: none;
color: #f1f1f1;
}
/*PERSONALIZAÇÃO DOS CAMPOS DE ENTRADA DO FORMULÁRIO*/
.login form .input, .login form input[type=checkbox], .login input[type=text] {
background: #4a005d;
}
.login form .input, .login input[type=password], .login input[type=text] {
font-size: 16px;
color: #fff;
line-height: 1.33333333;
width: 100%;
border-width: 0.0625rem;
padding: 0.1875rem 0.3125rem;
margin: 0 6px 16px 0;
min-height: 40px;
max-height: none;
border-color: #2C0038;
}
Repare que o código está todo comentado (entre /* */), basta fazer os ajustes necessários para que a tela de login fique totalmente personalizada e de acordo com a identidade visual do seu projeto.
Na linha 8, não se esqueça de substituir o ‘https://www.seusite.com.br/pasta_da_imagem/nome-do-arquivo.png’ pelo endereço do arquivo referente a sua logo. Não se esqueça de inserir o endereço completo e dentro de aspas simples, assim como mostra no código.
Confira o resultado do código que compartilhamos neste post. Legal, né?
O melhor de tudo isso, é que você pode “brincar” à vontade com seu projeto, inserir novos elementos ou remover o que não deseja. Use sua imaginação, criatividade e personalize sua tela de login do wordpress!
Plugins para personalizar a tela de login do wordpress
Não sei se deveríamos compartilhar alguns plugins para personalização da tela de login do wordpress com você. Não que você não mereça, mas é que esse não é o foco desse post. Nosso principal objetivo nesta matéria é que você colabore com a performance do seu projeto, eliminando recursos de memória que podem deixá-lo lento.
Mas já que chegamos até aqui, aí vai alguns dos plugins que testamos e funcionaram legal:
wphave Admin
White Label CMS
Material Admin
Login Designer
Custom Login
WordPress: Tela de login padrão & tela de login personalizada
Com a tela de login personalizada, o projeto fica mais autêntico e exclusivo.
Compare a tela de login padrão do WordPress com a nossa tela personaliza (arraste o centro da imagem para os lados e veja o antes de depois).
Pra quem é esse conteúdo?
Algumas pessoas me perguntam porque compartilhamos informações técnicas sobre criação de sites e que isso pode comprometer nosso trabalho e tal. Aí vai minha conclusão!
Eu, Bruno Oliveira, fundador da Agência ISSO não me preocupo em compartilhar conteúdo que pode ser útil para outras pessoas apenas pelo medo de perder clientes ou alimentar concorrentes. Eu compartilho porque sei que isso pode ajudar alguma pessoa em algum lugar do Brasil, e porque não do mundo.
Então caro amigo(a), esse conteúdo é pra você que chegou até aqui. Se você aceitar um conselho, esse conselho é: estude, leia, releia, pratique e quando estiver preparado, compartilhe! O seu sucesso não depende do próximo, depende única e exclusivamente de você.
Enquanto eu tenho oportunidade de compartilhar o que aprendi, vou continuar compartilhando e tenho certeza de que isso não vai abalar minha carteira de clientes ou meus negócios.
Nem todo mundo quer aprender a criar sites, nem todo mundo sabe o que é um site, nem todo mundo (nem todo cliente) tem tempo pra ler essa matéria.
Se você chegou aqui valorize esse conteúdo, ele pode te ajudar! E no que depender de mim, vamos continuar ajudando cada vez mais e com novos conteúdos, relevantes.
Veja mais informações sobre a importância de criar e compartilhar conteúdos. Seja em sites, blogs ou redes sociais.
Conclusão
Que bom que você chegou até aqui, isso mostra pra você e para o seu cliente (caso esse seja seu trabalho), que você se preocupa com o desempenho e segurança dos seus projetos. E quanto menos plugin, melhor!
Agora que você já viu todas as etapas sobre como personalizar a tela de login do wordpress sem plugin, que tal por em prática e compartilhar conosco sua experiência?
