Como Criar uma Página de Login Personalizada no WordPress

Pretende criar uma página de início de sessão personalizada para o seu site WordPress? Configurei páginas de início de sessão personalizadas para vários sites WordPress, e é uma dessas alterações que parece pequena, mas faz uma diferença real. O ecrã de início de sessão predefinido do WordPress é sem graça, genérico e até liga para fora do seu site.

A boa notícia? Pode substituí-lo por uma página de início de sessão totalmente personalizada e com estilo usando apenas um plugin. Neste guia, irei guiá-lo na criação de uma página de início de sessão 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 início de sessão predefinido.

Crie a Sua Página de Login Personalizada Agora! 🙂

Porquê Criar uma Página de Login Personalizada no WordPress?

Todos os sites WordPress vêm com o mesmo ecrã de login padrão. Tem o logótipo do WordPress, um fundo branco simples e nada que diga aos visitantes em que site estão realmente a entrar. Eis porque vale a pena mudar isto:

• Branding. Uma página de login personalizada coloca o seu logótipo, cores e mensagens em destaque. Na WPForms, usamos a nossa página de login personalizada para realçar novas funcionalidades e atualizações para os nossos utilizadores.
• Segurança. Quando cria uma página de login personalizada, pode redirecionar o URL padrão wp-login.php. Isto reduz ataques de força bruta e spam de login porque os bots não conseguem encontrar o seu formulário de login real. Combine isto com plugins de segurança WordPress fortes para uma proteção ainda melhor.
• Aparência profissional. Se o seu site aceita registos de membros, logins de clientes ou contas de estudantes, uma página de login com marca cria confiança. Os visitantes sabem que estão no lugar certo no momento em que veem o seu logótipo.

E a melhor parte é: não precisa de um plugin separador de personalização de login, um construtor de páginas E um plugin de formulários para conseguir isto. O WPForms trata do formulário de login, do estilo visual e da criação da página tudo numa só ferramenta.

Como Criar uma Página de Login Personalizada no WordPress

Vou mostrar-lhe como construir uma página de login personalizada completa usando o WPForms e o seu addon de Registo de Utilizadores. Isto cobre tudo: construir o formulário, adicionar o seu branding, estilizar a aparência, publicar a página e redirecionar o URL de login padrão do WordPress para que os bots não o consigam encontrar.

Passo 1: Instalar o WPForms e Configurar o Addon de Registo de Utilizadores

Primeiro, precisará do WPForms Pro instalado no seu site. O addon de Registo de Utilizadores é o que lhe dá os modelos de formulário de login, registo e recuperação de palavra-passe, e está disponível no nível Pro e acima.

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

Encontre o Addon de Registo de Utilizadores e clique no botão para o instalar. É tudo para a configuração. Com um plugin e um addon, agora tem tudo o que precisa para criar uma página de login personalizada, formulário de registo e formulário de recuperação de palavra-passe.

Obtenha o WPForms Pro Agora! 🙂

Passo 2: Criar um Formulário de Login Personalizado

Clique em WPForms » Add New para criar o seu formulário de login.

Dê um nome ao seu formulário (algo como "Formulário de Login Personalizado"), depois selecione o modelo Formulário de Login de Utilizador. Este modelo é construído especificamente para a funcionalidade de login, e não o verá sem o addon de Registo de Utilizadores ativado.

O modelo carrega com três campos já definidos: Nome de utilizador, Palavra-passe e Memorizar.

A caixa de verificação Memorizar permite que os visitantes permaneçam ligados entre visitas. É um pequeno detalhe, mas poupa aos utilizadores recorrentes a digitação das suas credenciais a cada vez. Para mais detalhes técnicos, consulte a documentação do formulário de início de sessão.

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

Passo 3: Adicionar Branding e Personalizar o Design

Pode adicionar o seu logótipo, alterar cores, ajustar tipos de letra e estilizar botões sem instalar um plugin separador de personalização de páginas de início de sessão. Tudo acontece dentro do WPForms e do editor de blocos do WordPress.

Adicionar o seu logótipo ou imagem de marca

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

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

Verá um editor de texto onde pode adicionar o que quiser. Para inserir o seu logótipo, clique no botão Adicionar Média e carregue a sua imagem de marca.

Carregue o seu logótipo através da Galeria de Média do WordPress, tal como faria com qualquer outra imagem no seu site.

Assim que a sua marca tiver um bom aspeto, clique em Guardar. Precisa de mais inspiração de design? Veja estes exemplos de páginas de início de sessão para ter ideias.

Estilizar o seu formulário de início de sessão no editor de blocos

Aqui está algo que a maioria dos outros guias de páginas de início de sessão não mencionam: não precisa de um plugin de estilização dedicado para o seu formulário de início de sessão. O WPForms tem estilização de formulários integrada diretamente no editor de blocos do WordPress.

Quando incorporar o seu formulário numa página (fá-lo-emos no Passo 5), verá opções de estilização na barra lateral do bloco WPForms. A partir daí, pode personalizar:

• Estilos de campo como cores de fundo, cores de borda e raio da borda
• Estilos de rótulo incluindo tipos de letra, 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 contentor

Isto poupa muito tempo. Em vez de gerir um plugin de personalização de início de sessão para as cores e um plugin de formulário para a funcionalidade real de início de sessão, faz tudo no WPForms.

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

Vá a Definições » Geral dentro do construtor de formulários e altere o Texto do Botão de Envio para algo como "Iniciar Sessão".

Passo 4: Configurar as Suas Definições de Login

Ainda no construtor de formulários, clique em Definições no painel esquerdo. Agora clique em Confirmações para decidir o que acontece após um início de sessão bem-sucedido.

Para a maioria dos sites, irá querer redirecionar os utilizadores para outro local após o início de sessão. Pode enviá-los para a sua página inicial, para o painel da sua conta ou para qualquer outra página. Defina o Tipo de Confirmação para Ir para URL (Redirecionar) e introduza o seu URL de destino.

Há mais uma configuração que vale a pena verificar. Percorra para baixo e clique em Registo de Utilizador para expandir essas opções.

Ative a opção para ocultar o formulário dos utilizadores com sessão iniciada. Desta forma, as pessoas que já iniciaram sessão não verão o formulário de início de sessão. Pode personalizar a mensagem que veem em vez disso.

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

Passo 5: Publicar a Sua Página de Login Personalizada

O seu formulário de início de sessão está criado, com a sua marca e configurado. Agora vamos colocá-lo numa página. Clique no botão Incorporar na parte superior do construtor de formulários.

Uma janela pop-up irá perguntar onde pretende incorporar o formulário. Clique em Criar Nova Página.

Dê um nome à sua página (algo como "Iniciar Sessão") e clique em Vamos Lá.

O WordPress abre o editor de blocos com o seu formulário de início de sessão já incorporado. É aqui que também verá as opções de estilo de bloco da Etapa 3, para que possa ajustar cores e tipos de letra aqui mesmo antes de publicar.

Quando tudo parecer como pretende, clique em Publicar. A sua página de início de sessão personalizada está ativa e pronta para aceitar utilizadores registados em poucos minutos!

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

A sua página de início de sessão existe, mas os visitantes precisam de uma forma de a encontrar. O local mais natural é o menu de navegação do seu site. Vá para Aparência » Menus no seu painel do WordPress.

Se já tem um menu configurado, encontre a sua página de início de sessão no painel Páginas à esquerda e clique em Adicionar ao Menu.

Arraste a página de início de sessão para onde quiser na ordem do menu. A maioria dos sites coloca-a 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 Guardar Menu.

Se o seu site ainda não tem um menu, terá de criar um primeiro. Introduza um nome para o seu menu na secção Estrutura do Menu.

Clique em Criar Menu para o configurar. Em seguida, adicione a sua página de início de sessão a ele usando os mesmos passos que acabei de descrever. Visite a sua página inicial após guardar para garantir que o link de início de sessão aparece onde espera.

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

Este passo é opcional, mas recomendo vivamente. Por defeito, qualquer pessoa ainda pode visitar yoursite.com/wp-login.php e ver o ecrã de início de sessão genérico do WordPress.

Redirecionar esse URL para a sua página de início de sessão personalizada mantém a experiência consistente e torna o seu site mais difícil de ser alvo de bots.

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

Instale e ative o WPCode, depois vá para Trechos de Código » + Adicionar Trecho. Escolha Adicionar o Seu Código Personalizado (Novo Trecho).

Dê um nome ao seu snippet, 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 Salvar Snippet.

Verá uma confirmação quando for guardado com sucesso.

Por fim, ative o snippet para Ativo no topo da página.

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

Bónus: Criar um Formulário de Recuperação de Palavra-passe Personalizado

Se o seu site permitir registos de utilizadores, também vai querer um formulário de redefinição de palavra-passe personalizado. Sem um, os utilizadores que esquecem a sua palavra-passe são direcionados para o ecrã de redefinição padrão do WordPress, o que quebra a experiência com a sua marca que acabou de construir.

O suplemento User Registration inclui um modelo Formulário de Redefinição de Palavra-passe do Utilizador. Vá a WPForms » Adicionar Novo e selecione-o.

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

FAQs Sobre Páginas de Login Personalizadas do WordPress

Se quiser criar uma página de login personalizada para o WordPress, personalizar o ecrã 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 codificação?

Sim. O WPForms permite-lhe construir e estilizar um formulário de login personalizado inteiramente através do seu construtor de arrastar e soltar e do editor de blocos do WordPress. Pode alterar cores, tipos de letra, estilos de botões e adicionar a 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 suplemento 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 trata de todos os três.

Obtém formulários de login, formulários de registo, formulários de redefinição de palavra-passe e ferramentas de estilização visual num único pacote. Para uma visão mais ampla das opções disponíveis, consulte a 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 isto simples. Pode incorporar o seu formulário de login usando o bloco WPForms no editor de blocos, um shortcode ou um widget.

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

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

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

Apenas certifique-se de que o código de redirecionamento se aplica apenas a pedidos GET para que a submissão POST do formulário de login ainda funcione corretamente.

Em seguida, Crie uma Experiência de Registo Completa

Terá agora uma página de início de sessão personalizada e totalmente com a sua marca para o seu site WordPress. Combinada com um formulário de reposição de palavra-passe, os seus utilizadores terão uma experiência profissional e polida do início ao fim.

Para completar, veja como criar um formulário de registo de utilizador com o WPForms. E se a segurança for uma prioridade, aprenda como impedir reposições de palavra-passe não autorizadas no WordPress para reforçar a segurança.

Crie Agora a Sua Página de Início de Sessão Personalizada

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

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