Altere o visual do login do WordPress sem plugins

Altere o visual do login do WordPress sem plugins

É dia de tecnologia na Plimm login

Altere o visual do login do WordPress


Cansado do design da tela de login do WordPress?

Que tal dar uma nova cara no login do WP. Seja para seu blog, site empresarial, e-commerce, ou quem sabe aquele site maravilhoso que você desenvolveu para seu cliente. Bora melhorar isso dev.

Existem diversos plugins responsáveis por customizar a página de login do WordPress, porém muitos trazem funcionalidades que provavelmente você não vai utilizar ou, alguns não fazem tudo aquilo que você gostaria de ver, na sua telinha de login.

PLUGIN OR < CODE /> ?

Dependendo da necessidade nem sempre a melhor saída é instalar plugin, como mencionado acima, em alguns casos os plugins tem mais funcionalidades do que precisamos. então desenvolvendo nossas próprias funcionalidades podemos reduzir a quantidade de códigos embutidos nos plugins, focando somente no que necessitamos.

Existe uma frase que define bem isso,
“Para que usar uma granada para matar uma formiga” .

vale ressaltar que temos diversos plugins que fazem maravilhas em sites wordpress, graças aos devs fissurados por WP

No primeiro exemplo vamos utilizar algumas técnicas ainda que básicas de PHP focada para WordPress, e CSS para dar estilo ao nosso login. No segundo exemplo vamos um pouco mais a fundo utilizando algumas técnicas de javascript.

Em ambos os exemplo utilizaremos o mesmo layout, com a diferença que no segundo exemplo, removeremos alguns atributos referente ao bloco que apresenta o logo, e adicionaremos algumas classes novas no arquivo de estilo, para que possamos manipular com javascript os eventos, conforme o usuário interage com os campos do formulário.

lembrando, todo o código está no github.

Exemplo 1, adicionando a logo do site

Altere o visual do login do WordPress sem plugins

Exemplo 2, removemos a logo e temos interação ao preencher os campos

No nosso exemplo estamos utilizando um tema filho do twentyseventeen isso facilita, pois na hora que temos que atualizar nosso tema, não temos a necessidade de refazer o código. Visto que a atualização irá sobrescrever tudo que fizemos. Se quiser saber como criar tema filho, deixe nos comentários, quem sabe faremos uma postagem sobre esse assunto.

Vamos explicar de forma rápida o funcionamento do código.

functions.php – Temos uma função chamada WpdevLogin() ela é responsável por verificar se estamos na página wp-login.php e “carrega” nossos scripts do tipo css e js para essa página. A função UrlLogoLogin() retorna o domínio do site, e através do filtro substitui a url do wordpress pela do site. Pois quando clicamos na logo somos direcionados para home-page e não para o site do wp.

login.css – Modificamos o seletor body, adicionando a propriedade background-image, a qual chamamos de forma absoluta a url da imagem de fundo. No resto do arquivo temos a modificação do seletor form a qual algumas propriedades recebem !important, para forçar o valor da nossa propriedade em vez do valor padrão do wordpress. As classes login-header – user-icon – lock-icon – user-show – lock-show – login_error, serão criadas pelo javascript para manipular eventos através do formulário de login.

login-user.js – Temos as constantes que irão criar os elementos no html. Na função createUserIcons() Tem como responsabilidade adicionar as classes na div e no span, criando os dash-icons do wordpress, e carregando como primeiro elemento do formulário. A função shiftUserIconByFocus() captura no formulário o id dos campos do tipo texto e password. Logo verifica se temos esse campo focado através da função “focus”, adicionando ou removendo as classes user-show e lock-show. É ela que modifica o estado dos ícones quando estão ativos ou inativos. A função errorLogin() verifica se existe o id login_error, padrão no wordpress quando disparado erro no login. Caso verdadeiro nossa função adiciona uma classe chamada login_error ao span que criamos, logo temos o alerta no ícone de usuário.

Caso utilize o modelo 1, basta remover os comentários no seletor #login h1 a, .login h1 a {…} e apagar a propriedade display:none do arquivo login.css . Não esqueça de atribuir a url absoluta de seu site na propriedade background-image. Posteriormente você pode apagar todo o código que está dentro de /* custom login header – dashicons */, pois são para uso do javascript. Feito isso devemos ir ao arquivo functions.php e remover o trecho de código wp_enqueue_script( ….. ), pois não vamos mais utilizar JS. Não esqueça de deletar o arquivo login-user.js

Nosso foco foi em implementar as novas funcionalidades ou estilos na área de login, de forma que não há uma opção de modificar cores, fontes e outros componentes através de caixas de seleção. Pois acreditamos que a tela de login não vai ficar sofrendo alterações constantemente. Cada vez que for realizar a alteração será necessário modificar o arquivo de estilo do login. Caso contrário seria melhor criar um plugin ou instalar um de terceiro.

Então devs, vimos que no primeiro exemplo substituímos a logo original do WP por uma de nosso gosto.

Já no segundo exemplo, alteramos o comportamento dos dash-icons através de eventos capturados no formulário de login. 

Então meu amigo, ficou de cara nova nossa tela de login. Agora é hora de você meter a mão na massa, e realizar as alterações necessárias para que fique do seu estilo ou de acordo com seu projeto.

Vale ressaltar que não trabalhamos com foco em responsividade, mas com alguns ajustes irá funcionar perfeitamente no seu dispositivo móvel ou em monitores menores.

Existem outras metodologias para fazer a mesma coisa, deixa no comentário como você fez e o que achou.

Caso você queira disponibilizamos o código no Github,

Conteúdo criado em parceria com Charles Martins, exclusivamente para Plimm.


Aproveite e fique por dentro do que está bombando na Plimm

Aprenda de forma simples e eficaz a trilhar uma carreira de sucesso transformando a sua Internet em um negócio extremamente lucrativo. Clique aqui

Design Canva o curso do básico ao avançado que irá te ensinar a trabalhar profissionalmente. Clique aqui.

Destrave sua criatividade com o curso de Processo Criativo para Designers. Clique aqui.

Aprenda a Automatizar seu Whatsapp para responder seus clientes de forma rápida e eficaz. Clique aqui.

Marcações:

E ai Gostou? Então deixe uma resposta