Como criar uma página de login personalizada no WordPress

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

A boa notícia? Você pode substituí-la por uma página de login totalmente personalizada com a identidade visual da sua marca usando apenas um plugin. Neste guia, vou orientá-lo passo a passo na criação de uma página de login personalizada com o WPForms. Isso inclui criar o formulário, personalizar o design, publicar a página e redirecionar a URL padrão de login.

Crie agora a sua página de login personalizada! 🙂

Por que criar uma página de login personalizada no WordPress?

Todos os sites do WordPress vêm com a mesma tela de login padrão. Ela exibe o logotipo do WordPress, um fundo branco liso e nada que indique aos visitantes em qual site eles estão realmente fazendo login. Veja por que vale a pena mudar isso:

• Identidade visual. Uma página de login personalizada coloca seu logotipo, suas cores e suas mensagens em destaque. Na WPForms, usamos nossa página de login personalizada para destacar novos recursos e atualizações para nossos usuários.
• Segurança. Ao criar uma página de login personalizada, você pode redirecionar a página padrão wp-login.php URL. Isso reduz os ataques de força bruta e o spam de login, pois os bots não conseguem localizar o seu formulário de login real. Combine isso com uma senha forte Plug-ins de segurança para WordPress para uma proteção ainda melhor.
• Aparência profissional. Se o seu site aceita cadastros de membros, logins de clientes ou contas de alunos, uma página de login com a identidade visual da sua marca inspira confiança. Os visitantes sabem que estão no lugar certo assim que veem o seu logotipo.

E aqui está a melhor parte: você não precisa de um plugin separado para personalizar o login, um construtor de páginas E um plugin de formulários para fazer 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 a você como criar uma página de login personalizada completa usando o WPForms e seu complemento de Registro de Usuários. Este tutorial abrange tudo: criar o formulário, adicionar sua identidade visual, definir o estilo da página, publicá-la e redirecionar a URL padrão de login do WordPress para que os bots não consigam encontrá-la.

Passo 1: Instale o WPForms e configure o complemento de registro de usuários

Primeiro, você precisará ter o WPForms Pro instalado no seu site. O complemento “User Registration” é o que oferece modelos de formulários para login, cadastro e redefinição de senha, e está disponível no plano Pro e nos planos superiores.

Se você ainda não tem o WPForms, baixe-o na página de preços e instale-o no seu site WordPress. Em seguida, acesse WPForms » Complementos no seu painel de controle.

Encontre o complemento de registro de usuários e clique no botão para instalá-lo. A configuração está concluída. Com um plugin e um complemento, 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.

Baixe o WPForms Pro agora! 🙂

Passo 2: Criar um formulário de login personalizado

Vá em frente e 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, em seguida, selecione o modelo “Formulário de login do usuário ”. Esse modelo foi criado especificamente para a funcionalidade de login e não estará visível se o complemento “Registro de usuário” não estiver ativado.

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

A caixa de seleção “Lembrar-me” permite que os visitantes permaneçam conectados entre uma visita e outra. É um pequeno detalhe, mas evita que os usuários recorrentes tenham que digitar suas credenciais todas as vezes. Para mais detalhes técnicos, consulte a documentação do formulário de login.

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

Passo 3: Adicione a identidade visual e personalize o design

Você pode adicionar seu logotipo, alterar cores, ajustar fontes e definir o estilo dos botões sem precisar instalar um plugin separado para personalizar a página de login. Tudo é feito diretamente no WPForms e no editor de blocos do WordPress.

Adicione seu logotipo ou imagem de marca

Comece arrastando o campo Conteúdo para a parte superior do 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 poderá adicionar o que quiser. Para inserir seu logotipo, clique no botão “Adicionar mídia” e faça o upload da imagem da sua marca.

Carregue seu logotipo pela Galeria de Mídia do WordPress, da mesma forma que faria com qualquer outra imagem do seu site.

Quando a identidade visual estiver pronta, clique em “Salvar”. Precisa de mais inspiração para o design? Confira estes exemplos de páginas de login para ter algumas ideias.

Personalize seu formulário de login no Editor de Blocos

Aqui está algo que a maioria dos outros guias sobre páginas de login não menciona: você não precisa de um plugin específico para personalizar o seu formulário de login. O WPForms já possui recursos integrados de personalização de formulários diretamente no editor de blocos do WordPress.

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

• Estilos de campo, como cores de fundo, cores de borda e raio da borda
• Estilos de etiquetas, incluindo fontes, tamanhos e cores
• Estilos de botões, como cor de fundo, cor do texto, raio da borda e largura
• Estilo geral dos formulários para espaçamento, alinhamento e planos de fundo dos contêineres

Isso economiza muito tempo. Em vez de ter que lidar com um plugin de personalização de login para as cores e um plugin de formulário para a funcionalidade de login propriamente dita, você faz tudo no WPForms.

Para um passo a passo completo de todas as opções de estilo, consulte o guia sobre como estilizar seus formulários no editor de blocos. Já que estamos nisso, vamos personalizar também o texto do botão de envio.

Vá para Configurações » Geral no criador de formulários e altere o texto do botão Enviar para algo como “Entrar”.

Passo 4: Configure suas configurações de login

Ainda no criador de formulários, clique em “Configurações” no painel à esquerda. Agora, clique em “Confirmações” para definir o que acontece após um login bem-sucedido.

Na maioria dos sites, é recomendável redirecionar os usuários para algum lugar após o login. Você pode direcioná-los para a página inicial, para o painel de controle da conta ou para qualquer outra página. Defina o Tipo de confirmação como Ir para URL (Redirecionamento) e insira a URL de destino.

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

Ative a opção para ocultar o formulário dos usuários conectados. Dessa forma, as pessoas que já estiverem conectadas não verão o formulário de login. Você pode personalizar a mensagem que elas verão em seu lugar.

Clique em “Salvar” quando terminar de definir as configurações.

Passo 5: Publique sua página de login personalizada

Seu formulário de login já está criado, personalizado com a sua marca e configurado. Agora, vamos inseri-lo em uma página. Clique no botão “Incorporar” na parte superior do criador de formulários.

Uma janela 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 o formulário de login já incorporado. É aqui também que você verá as opções de estilo do bloco definidas na Etapa 3, para que possa ajustar as cores e as fontes diretamente neste local antes de publicar.

Quando tudo estiver do jeito que você quer, clique em “Publicar”. Sua página de login personalizada já está no ar e pronta para receber usuários registrados em questão de minutos!

Passo 6: Adicione a página de login ao seu menu de navegação

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

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

Arraste a página de login para onde desejar na ordem do menu. A maioria dos sites a coloca na extremidade direita da barra de navegação. Escolha o local 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 tiver 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 seguindo os mesmos passos que acabei de descrever. Acesse sua página inicial após salvar para verificar se o link de login aparece onde você esperava.

Passo 7: Redirecionar a URL padrão de login do WordPress

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

Redirecionar essa URL para sua página de login personalizada mantém a experiência consistente e torna seu site mais difícil de ser alvo de bots.

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

Instale e ative o WPCode e, em seguida, acesse Trechos de código » + Adicionar trecho. Selecione Adicionar seu código personalizado (Novo trecho).

Dê ao seu snippet um nome como “Redirecionamento da página de login” e cole o código de redirecionamento. Certifique-se de atualizar a URL no código para que corresponda à URL da sua página de login personalizada. Clique em “Salvar snippet”.

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

Por fim, marque a opção “Ativo” no trecho de código na parte superior da página.

Agora, qualquer pessoa que tente visitar wp-login.php é redirecionado automaticamente para a sua página de login personalizada com a marca da sua empresa.

Bônus: Crie um formulário personalizado para redefinição de senha

Se o seu site permite o cadastro de usuários, você também vai precisar de um formulário personalizado para redefinição de senha. Sem ele, os usuários que esquecerem a senha serão redirecionados para a tela padrão de redefinição do WordPress, o que prejudica a experiência de marca que você acabou de criar.

O complemento de Registro de Usuário inclui um modelo de formulário para redefinição de senha do usuário. Acesse WPForms » Adicionar novo e selecione-o.

Você pode personalizar este formulário da mesma forma que personalizou o formulário de login: adicione sua identidade visual no campo Conteúdo, defina o estilo no editor de blocos e publique-o em uma página própria. Para um passo a passo detalhado, consulte nosso guia sobre como personalizar o 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 abordam as dúvidas mais comuns.

É possível personalizar a página de login do WordPress sem precisar programar?

Sim. O WPForms permite criar e personalizar um formulário de login totalmente por meio de seu construtor de arrastar e soltar e do editor de blocos do WordPress. Você pode alterar cores, fontes e estilos de botões, além de adicionar sua própria identidade visual, sem precisar escrever uma única linha de CSS ou PHP.

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

Eu recomendaria o WPForms Pro com o complemento de Registro de Usuários. Embora alguns guias sugiram o uso de plugins separados para o formulário, o estilo e o layout da página, o WPForms cuida de todos os três.

Você tem formulários de login, formulários de cadastro, formulários de redefinição de senha e ferramentas de personalização visual em um único pacote. Para ter uma visão mais ampla das opções disponíveis, confira nossa seleção dos melhores plugins de página de login para WordPress.

Como faço para adicionar um formulário de login a qualquer página no WordPress?

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

Isso significa que você pode inserir um formulário de login em qualquer página, na barra lateral ou no rodapé. Para obter instruções completas, consulte nosso guia sobre como exibir formulários de login e cadastro em qualquer página.

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

Sim, e, na verdade, é uma prática de segurança inteligente. Redirecionar wp-login.php Ao redirecionar para sua página de login personalizada, os bots e scripts automatizados que têm como alvo a URL padrão não chegarão ao seu formulário de login real.

Certifique-se de que o código de redirecionamento se aplique apenas a solicitações GET, para que o envio POST do formulário de login continue funcionando corretamente.

Em seguida, crie uma experiência de cadastro completa

Agora você tem uma página de login personalizada e totalmente adaptada à identidade visual do seu site WordPress. Combinada com um formulário de redefinição de senha, ela oferece aos usuários uma experiência profissional e sofisticada do início ao fim.

Para completar, veja como criar um formulário de cadastro de usuários com o WPForms. E se a segurança é uma prioridade, aprenda a impedir redefinições não autorizadas de senha no WordPress para reforçar ainda mais a proteção.

Crie agora sua página de login personalizada

Pronto para criar seu formulário? Comece hoje mesmo com o plug-in de criação de formulários mais fácil do WordPress. O WPForms Pro inclui vários modelos gratuitos e oferece uma garantia de reembolso de 14 dias.

Se este artigo o ajudou, siga-nos no Facebook e no Twitter para obter mais tutoriais e guias gratuitos sobre o WordPress.