Como Criar uma Página de Login Personalizada no WordPress

Você quer criar uma página de login personalizada para o seu site WordPress? Eu configurei páginas de login personalizadas para vários sites WordPress, e é uma daquelas mudanças que parecem pequenas, mas fazem uma grande diferença. A tela de login padrão do WordPress é sem graça, genérica e até mesmo tem links que saem do seu site.

A boa notícia? Você pode substituí-la por uma página de login totalmente estilizada e com sua marca usando apenas um plugin. Neste guia, vou mostrar como criar uma página de login personalizada com o WPForms. Isso inclui a criação do formulário, a personalização do design, a publicação da página e o redirecionamento do URL de login padrão.

Crie Sua Página de Login Personalizada Agora! 🙂

Por Que Criar uma Página de Login Personalizada no WordPress?

Todo site WordPress vem com a mesma tela de login padrão. Ela tem o logo do WordPress, um fundo branco simples e nada que diga aos visitantes em qual site eles estão realmente entrando. Veja por que vale a pena mudar isso:

• Branding. Uma página de login personalizada coloca seu logo, cores e mensagens em destaque. No WPForms, usamos nossa página de login personalizada para destacar novos recursos e atualizações para nossos usuários.
• Segurança. Quando você cria uma página de login personalizada, pode redirecionar o URL padrão wp-login.php. Isso reduz ataques de força bruta e spam de login, pois os bots não conseguem encontrar seu formulário de login real. Combine isso com fortes plugins de segurança para WordPress para uma proteção ainda melhor.
• Aparência profissional. Se o seu site aceita registros de membros, logins de clientes ou contas de alunos, uma página de login com sua marca gera confiança. Os visitantes sabem que estão no lugar certo no momento em que veem seu logo.

E a melhor parte é: você não precisa de um plugin separador de personalização de login, um construtor de páginas E um plugin de formulário para conseguir isso. O WPForms cuida do formulário de login, do estilo visual e da criação da página, tudo em uma única ferramenta.

Como Criar uma Página de Login Personalizada no WordPress

Vou mostrar como criar uma página de login personalizada completa usando o WPForms e seu addon de Registro de Usuário. Isso cobre tudo: criação do formulário, adição da sua marca, personalização da aparência, publicação da página e redirecionamento do URL de login padrão do WordPress para que os bots não o encontrem.

Passo 1: Instalar o WPForms e Configurar o Addon de Registro de Usuário

Primeiro, você precisará do WPForms Pro instalado no seu site. O addon de Registro de Usuário é o que fornece os modelos de formulário de login, registro e redefinição de senha, e está disponível no nível Pro e acima.

Se você ainda não tem o WPForms, adquira-o na página de preços e instale-o no seu site WordPress. Em seguida, vá para WPForms » Addons no seu painel.

Encontre o User Registration Addon e clique no botão para instalá-lo. É só isso para a configuração. Com um plugin e um addon, você agora tem tudo o que precisa para criar uma página de login personalizada, um formulário de registro e um formulário de redefinição de senha.

Adquira o WPForms Pro Agora! :)

Passo 2: Criar um Formulário de Login Personalizado

Clique em WPForms » Adicionar Novo para criar seu formulário de login.

Dê um nome ao seu formulário (algo como “Formulário de Login Personalizado”) e selecione o modelo User Login Form. Este modelo é criado especificamente para a funcionalidade de login e você não o verá sem o addon User Registration ativado.

O modelo carrega com três campos já definidos: Nome de usuário, Senha e Lembrar-me.

A caixa de seleção Lembrar-me permite que os visitantes permaneçam logados entre as visitas. É um pequeno detalhe, mas economiza aos usuários recorrentes a digitação de suas credenciais a cada vez. Para mais detalhes técnicos, confira a documentação do formulário de login.

Você pode usar este modelo exatamente como está ou personalizá-lo ainda mais. Recomendo adicionar sua marca, no mínimo, que é o que faremos a seguir.

Passo 3: Adicionar Branding e Personalizar o Design

Você pode adicionar seu logotipo, alterar cores, ajustar fontes e estilizar botões sem instalar um plugin separador para personalizar a página de login. Tudo acontece dentro do WPForms e do editor de blocos do WordPress.

Adicione Seu Logotipo ou Imagem de Marca

Comece arrastando o campo Conteúdo para o topo do seu formulário, logo abaixo do título.

Clique no campo Conteúdo para abrir o painel Opções do Campo à esquerda.

Você verá um editor de texto onde pode adicionar o que quiser. Para inserir seu logotipo, clique no botão Adicionar Mídia e carregue sua imagem de marca.

Carregue seu logotipo através da Biblioteca de Mídia do WordPress, assim como faria com qualquer outra imagem em seu site.

Quando sua marca estiver com boa aparência, clique em Salvar. Precisa de mais inspiração de design? Confira estes exemplos de páginas de login para ter ideias.

Estilize Seu Formulário de Login no Editor de Blocos

Aqui está algo que a maioria dos outros guias de página de login não mencionam: você não precisa de um plugin de estilização dedicado para o seu formulário de login. O WPForms tem estilização de formulário integrada diretamente no editor de blocos do WordPress.

Quando você incorporar seu formulário em uma página (faremos isso na Etapa 5), verá as opções de estilização na barra lateral do bloco WPForms. A partir daí, você pode personalizar:

• Estilos de campo como cores de fundo, cores de borda e raio da borda
• Estilos de rótulo incluindo fontes, tamanhos e cores
• Estilos de botão como cor de fundo, cor do texto, raio da borda e largura
• Estilização geral do formulário para espaçamento, alinhamento e fundos do contêiner

Isso economiza muito tempo. Em vez de gerenciar um plugin de personalização de login para as cores e um plugin de formulário para a funcionalidade de login real, você faz tudo no WPForms.

Para um guia completo de todas as opções de estilização, veja o guia sobre como estilizar seus formulários no editor de blocos. Enquanto isso, vamos também personalizar o texto do botão de envio.

Vá para Configurações » Geral dentro do construtor de formulários e altere o Texto do Botão de Envio para algo como “Entrar”.

Passo 4: Configurar Suas Definições de Login

Ainda no construtor de formulários, clique em Configurações no painel esquerdo. Agora clique em Confirmações para decidir o que acontece após um login bem-sucedido.

Para a maioria dos sites, você desejará redirecionar os usuários para algum lugar após o login. Você pode enviá-los para sua página inicial, painel de conta ou qualquer outra página. Defina o Tipo de Confirmação como Ir para URL (Redirecionar) e insira sua URL de destino.

Há mais uma configuração que vale a pena verificar. Role para baixo e clique em Registro de Usuário para expandir essas opções.

Ative a opção para ocultar o formulário de usuários logados. Dessa forma, as pessoas que já estão conectadas não verão o formulário de login. Você pode personalizar a mensagem que elas veem em vez disso.

Clique em Salvar quando terminar com as configurações.

Passo 5: Publicar Sua Página de Login Personalizada

Seu formulário de login está construído, com a marca e configurado. Agora vamos colocá-lo em uma página. Clique no botão Incorporar na parte superior do construtor de formulários.

Um pop-up perguntará onde você deseja incorporar o formulário. Clique em Criar Nova Página.

Dê um nome à sua página (algo como “Login”) e clique em Vamos Lá.

O WordPress abre o editor de blocos com seu formulário de login já incorporado. É aqui que você também verá as opções de estilo de bloco da Etapa 3, para que possa ajustar cores e fontes aqui mesmo antes de publicar.

Quando tudo estiver do jeito que você quer, clique em Publicar. Sua página de login personalizada está no ar e pronta para aceitar usuários registrados em poucos minutos!

Passo 6: Adicionar a Página de Login ao Seu Menu de Navegação

Sua página de login existe, mas os visitantes precisam de uma maneira de encontrá-la. O lugar mais natural é o menu de navegação do seu site. Vá para Aparência » Menus no seu painel do WordPress.

Se você já tem um menu configurado, encontre sua página de login no painel Páginas à esquerda e clique em Adicionar ao Menu.

Arraste a página de login para onde você quiser na ordem do menu. A maioria dos sites a coloca no extremo direito da barra de navegação. Escolha a localização de exibição do seu menu (geralmente Menu Principal para o cabeçalho) e clique em Salvar Menu.

Se o seu site ainda não tem um menu, você precisará criar um primeiro. Digite um nome para o seu menu na seção Estrutura do Menu.

Clique em Criar Menu para configurá-lo. Em seguida, adicione sua página de login a ele usando os mesmos passos que descrevi. Visite sua página inicial após salvar para garantir que o link de login apareça onde você espera.

Passo 7: Redirecionar o URL de Login Padrão do WordPress

Esta etapa é opcional, mas eu a recomendo fortemente. Por padrão, qualquer pessoa ainda pode visitar seusite.com/wp-login.php e ver a tela de login genérica do WordPress.

Redirecionar esse URL para sua página de login personalizada mantém a experiência consistente e dificulta o direcionamento do seu site por bots.

Usaremos o WPCode para isso. É um plugin gratuito que permite adicionar trechos de código ao WordPress sem editar os arquivos do tema.

Instale e ative o WPCode, em seguida, vá para Code Snippets » + Add Snippet. Escolha Add Your Custom Code (New Snippet).

Nomeie seu snippet como algo como "Redirecionamento da Página de Login" e cole o código de redirecionamento. Certifique-se de atualizar o URL no código para corresponder ao URL da sua página de login personalizada. Clique em Save Snippet.

Você verá uma confirmação assim que for salvo com sucesso.

Finalmente, ative o snippet para Active na parte superior da página.

Agora, qualquer pessoa que tentar visitar wp-login.php será automaticamente enviada para sua página de login personalizada com sua marca em vez disso.

Bônus: Criar um Formulário de Redefinição de Senha Personalizado

Se o seu site permite registros de usuários, você também vai querer um formulário personalizado de redefinição de senha. Sem um, os usuários que esquecerem suas senhas serão direcionados para a tela de redefinição padrão do WordPress, o que quebra a experiência de marca que você acabou de criar.

O addon User Registration inclui um modelo User Password Reset Form. Vá para WPForms » Add New e selecione-o.

Você pode personalizar este formulário da mesma forma que personalizou o formulário de login: adicione sua marca com o campo Conteúdo, estilize-o no editor de blocos e publique-o em sua própria página. Para um guia detalhado, consulte nosso guia sobre personalização do formulário de redefinição de senha no WordPress.

Perguntas Frequentes Sobre Páginas de Login Personalizadas do WordPress

Se você deseja criar uma página de login personalizada para o WordPress, personalizar a tela de login existente do WordPress ou adicionar um formulário de login a qualquer página do seu site, estas respostas cobrem as perguntas mais comuns.

Posso personalizar a página de login do WordPress sem codificar?

Sim. O WPForms permite que você crie e estilize um formulário de login personalizado inteiramente através de seu construtor de arrastar e soltar e do editor de blocos do WordPress. Você pode alterar cores, fontes, estilos de botões e adicionar sua própria marca sem escrever uma única linha de CSS ou PHP.

Qual é o melhor plugin para uma página de login personalizada do WordPress?

Eu recomendaria o WPForms Pro com o addon User Registration. Embora alguns guias sugiram o uso de plugins separados para o formulário, a estilização e o layout da página, o WPForms cuida dos três.

Você obtém formulários de login, formulários de registro, formulários de redefinição de senha e ferramentas de estilização visual em um único pacote. Para uma visão mais ampla das opções disponíveis, confira nossa compilação dos melhores plugins de página de login do WordPress.

Como adiciono um formulário de login a qualquer página no WordPress?

O WPForms torna isso simples. Você pode incorporar seu formulário de login usando o bloco WPForms no editor de blocos, um shortcode ou um widget.

Isso significa que você pode colocar um formulário de login em qualquer página, na sua barra lateral ou no seu rodapé. Para um guia completo, consulte nosso guia sobre como exibir formulários de login e registro em qualquer página.

É seguro redirecionar a URL de login padrão do WordPress?

Sim, e na verdade é uma prática de segurança inteligente. Redirecionar wp-login.php para sua página de login personalizada significa que bots e scripts automatizados que visam a URL padrão não alcançarão seu formulário de login real.

Apenas certifique-se de que o código de redirecionamento se aplique apenas a requisições GET para que o envio POST do formulário de login ainda funcione corretamente.

Em seguida, Crie uma Experiência de Registro Completa

Agora você tem uma página de login personalizada totalmente com sua marca para o seu site WordPress. Combinado com um formulário de redefinição de senha, seus usuários terão uma experiência profissional e polida do início ao fim.

Para completar, confira como criar um formulário de registro de usuário com o WPForms. E se a segurança for uma prioridade, aprenda como impedir redefinições de senha não autorizadas no WordPress para reforçar a segurança.

Crie Sua Página de Login Personalizada Agora

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.