Criando um formulário de login WordPress personalizado com interface plana

Última atualização - 8 de julho de 2021

O WordPress existe há um tempo considerável. O que começou como um portal para blogueiros, agora se tornou um sistema de gerenciamento de conteúdo responsável por operar quase metade do total de sites do mundo. Sua interface simples, porém intuitiva, e designs personalizáveis ​​o tornaram a escolha número um para desenvolvedores e designers da Web em todo o mundo que desejam criar seus sites do zero.

Qualquer pessoa que utilize o WordPress está atenta aos detalhes e à originalidade para aprimorar a experiência do usuário e aumentar sua taxa de cliques. A maioria dos desenvolvedores se concentra principalmente em temas, mas para sites de associação e outras plataformas, o ponto de partida é uma página de login. Imagine isso, se você for um membro recém-registrado em um site e fizer login em uma tela semelhante a membros não registrados, o impacto será um pouco atenuado e deixará você se sentindo bastante insatisfeito. No entanto, ter uma página de login do WordPress personalizada para atender aos requisitos e à estética do seu negócio deixa uma impressão melhor nos visitantes e desperta o interesse deles.

Para ajudar com isso, resumimos algumas diretrizes simples para incluir seus estilos para uma página de login personalizada do WordPress que se integra visualmente ao esquema de design do seu site.

Criando uma página de login personalizada do WordPress sem plug-in

Pode-se fazer várias alterações na página de login do WordPress atualizando o código-fonte no arquivo function.php do tema escolhido. Embora, uma vez que você atualize o WordPress, essas alterações serão perdidas. Isso ocorre porque a folha de estilo do seu tema para a página de login não faz parte da configuração do tema WordPress, que exige que você crie outra folha de estilo para a página de login personalizada.

Comece criando uma pasta chamada “Login” na pasta do seu tema e adicione um arquivo .txt com o nome custom-login-style.css . A partir daí, você pode fazer algumas modificações básicas para personalizar e adicionar exclusividade à página de login.

Alterar o plano de fundo

Para atualizar a cor de fundo da página ou de um botão específico, selecione a cor de fundo: #222222 e altere o código hexa para a cor de sua escolha. Use uma paleta de cores para selecionar uma cor que complemente a estética do seu negócio e seja visualmente atraente.

Além disso, se você quiser variar a imagem de fundo da sua página de login, selecione a linha de código background-image: url(logo_login.png') e substitua logo_login.png , que é o nome do arquivo pelo URL do arquivo de imagem atualizado .

As empresas que desejam que seus clientes se lembrem de sua marca podem alterar o logotipo do WordPress para seu logotipo personalizado. Depois de salvar o arquivo de imagem do logotipo personalizado em sua pasta Login, substitua o nome do arquivo pelo seu logotipo personalizado no código background-image: url('logo_login') .

Personalizando o formulário de login ajustando o preenchimento e a margem

Os desenvolvedores podem ajustar o formulário de login para tornar sua página atraente e adequada à aparência do site. Do preenchimento dos botões à cor e tamanho da fonte dos rótulos, etc. Você pode adicionar mais espaço dentro do botão para que o texto não pareça espremido aumentando o preenchimento; apenas aumente os números no preenchimento do código: 12px 12px 12px 12px. Se você deseja criar mais espaço fora do botão de forma que os elementos ao redor não fiquem compactados, você pode fazê-lo aumentando o espaço da margem na margem do código : 12px 12px 12px 12px. Mesmo algo tão simples como adicionar alguns espaços em branco pode ter um impacto coletivo na aparência final da sua página de login e torná-la mais organizada.

Alterando o tamanho e a cor da fonte

Você pode alterar o tamanho da fonte do texto do parágrafo, links ou campos de formulário usando o código font-size: 15px ajustando o número ao tamanho de sua preferência. O mesmo pode ser feito para a cor da fonte atualizando a cor na cor do código : #222222 e substituindo a cor.

Modificando a mensagem de erro de login

Com o aumento de crimes cibernéticos e fraudes na Internet, desenvolvedores da Web e proprietários de empresas não podem se arriscar em seus sites e perder dados confidenciais. Quando um usuário insere rapidamente as credenciais de login erradas, uma mensagem de erro padrão é gerada automaticamente. Embora isso seja para sinalizar aos usuários esse erro, pode ser uma lacuna para os hackers tentarem quebrar os dados de login. Portanto, a melhor maneira de manter os hackers afastados é alterando a mensagem de erro no arquivo function.php .

Para encerrar, aqueles com amplo conhecimento de CSS podem ter controle total sobre o estilo e a personalização de seu formulário de login do WordPress. Mas, se sua falta de habilidades de codificação e isso limita sua capacidade de criar uma página de login personalizada, não se preocupe! Há uma variedade de opções de plugins disponíveis no repositório do WordPress para otimizar o processo de desenvolvimento web do WordPress e listamos os mais populares para você.

Plugin do Personalizador de Login

O Login Customizer é um dos plugins mais fáceis de usar e permite que você faça alterações diretamente do seu WordPress Customizer. Após um processo de instalação simples, você pode acessá-lo facilmente no painel do WordPress na guia Aparência . Clique em Start Customizing e você será redirecionado para a tela do customizador onde você redesenha todas as áreas de acordo com o seu gosto.

Personalizador de login Colorlib

Colorlib Login Customizer é uma ferramenta engenhosa e flexível que carrega todas as funcionalidades encontradas em um plugin premium, mas as oferece gratuitamente. Sua ampla gama de recursos exclusivos o torna a melhor escolha para desenvolvedores da Web que desejam criar uma solução personalizada para seus usuários. Isso também permite a personalização via WordPress Customizer para que você possa navegar facilmente e remodelar sua página de login.

Em suma

No final, há mais de uma abordagem para personalizar uma página de login e desenvolvedores de todos os níveis de experiência são bem-vindos para experimentá-los. O que importa é que a página de login personalizada do WordPress corresponda e complemente a estética do site real para aprimorar a experiência do usuário. Personalizar a página de login do seu site é uma maneira simples e eficaz de encantar os clientes e construir uma identidade de marca. Começar de forma simples e desenvolver o básico pode transformar uma tela simples em algo espetacular e oferecer aos clientes uma experiência online personalizada que eles nunca viram antes.