Como criar uma página de início de sessão personalizada no WordPress

Quer criar uma página de início de sessão personalizada para o seu site WordPress? Já configurei páginas de início de sessão personalizadas para vários sites WordPress, e esta é uma daquelas alterações que, embora pareça pequena, faz toda a diferença. O ecrã de início de sessão padrão do WordPress é insípido, genérico e até redireciona para fora do seu site.

A boa notícia? Pode substituí-la por uma página de início de sessão totalmente personalizada com a sua marca, utilizando apenas um plugin. Neste guia, vou explicar-lhe passo a passo como criar uma página de início de sessão personalizada com o WPForms. Isso inclui criar o formulário, personalizar o design, publicar a página e redirecionar o URL de início de sessão predefinido.

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

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

Todos os sites WordPress vêm com a mesma página de início de sessão predefinida. Esta apresenta o logótipo do WordPress, um fundo branco simples e nada que indique aos visitantes em que site estão, na verdade, a iniciar sessão. Eis porque vale a pena alterá-la:

• Identidade visual. Uma página de início de sessão personalizada coloca o seu logótipo, as suas cores e as suas mensagens em destaque. Na WPForms, utilizamos a nossa página de início de sessão personalizada para destacar novas funcionalidades e atualizações para os nossos utilizadores.
• Segurança. Ao criar uma página de início de sessão personalizada, pode redirecionar a página padrão wp-login.php URL. Isto reduz os ataques de força bruta e o spam de login, uma vez que os bots não conseguem encontrar o seu formulário de login real. Combine isto com uma senha forte Plugins de segurança para o WordPress para uma proteção ainda melhor.
• Aparência profissional. Se o seu site aceita registos de membros, inícios de sessão de clientes ou contas de alunos, uma página de início de sessão com a identidade da marca inspira confiança. Os visitantes sabem que estão no sítio certo assim que vêem o seu logótipo.

E aqui está a melhor parte: não precisa de um plugin 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 única ferramenta.

Como criar uma página de início de sessão personalizada no WordPress

Vou mostrar-lhe como criar uma página de início de sessão personalizada completa utilizando o WPForms e o seu complemento de registo de utilizadores. Isto abrange tudo: criar o formulário, adicionar a sua identidade visual, definir o estilo da página, publicá-la e redirecionar o URL de início de sessão padrão do WordPress para que os bots não o consigam encontrar.

Passo 1: Instalar o WPForms e configurar o complemento de registo de utilizadores

Primeiro, terá de ter o WPForms Pro instalado no seu site. O complemento «Registo de Utilizadores» é que lhe oferece modelos de formulários para início de sessão, registo e redefinição de palavra-passe, e está disponível a partir do plano Pro.

Se ainda não tem o WPForms, adquira-o na página de preços e instale-o no seu site WordPress. Em seguida, aceda a WPForms » Complementos no seu painel de controlo.

Procure o complemento «User Registration» e clique no botão para o instalar. A configuração está concluída. Com um plugin e um complemento, já tem tudo o que precisa para criar uma página de início de sessão personalizada, um formulário de registo e um formulário de redefinição de palavra-passe.

Obtenha o WPForms Pro agora! 🙂

Passo 2: Criar um formulário de início de sessão personalizado

Vá em frente e clique em WPForms » Adicionar novo para criar o seu formulário de início de sessão.

Dê um nome ao seu formulário (por exemplo, «Formulário de Início de Sessão Personalizado») e, em seguida, selecione o modelo «Formulário de Início de Sessão do Utilizador ». Este modelo foi criado especificamente para a funcionalidade de início de sessão e não estará visível sem o complemento «Registo de Utilizador» ativado.

O modelo é carregado com três campos já preenchidos: Nome de utilizador, Palavra-passe e Lembrar-me.

A caixa de seleção «Lembrar-me» permite que os visitantes permaneçam conectados entre visitas. É um pequeno detalhe, mas evita que os utilizadores recorrentes tenham de introduzir as suas credenciais todas as vezes. Para mais detalhes técnicos, consulte a documentação do formulário de login.

Pode utilizar este modelo tal como está ou personalizá-lo ainda mais. Recomendo, no mínimo, que adicione a sua identidade visual, que é o que vamos fazer a seguir.

Passo 3: Adicione a identidade visual e personalize o design

Pode adicionar o seu logótipo, alterar as cores, ajustar os tipos de letra e personalizar os botões sem precisar de instalar um plugin específico para personalizar a página de início de sessão. Tudo é feito diretamente no WPForms e no editor de blocos do WordPress.

Adicione o seu logótipo ou imagem de marca

Comece por arrastar 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.

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

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

Quando a sua identidade visual estiver pronta, clique em «Guardar». Precisa de mais inspiração para o design? Veja estes exemplos de páginas de início de sessão para ter algumas ideias.

Personalize o seu formulário de início de sessão no Editor de Blocos

Eis algo que a maioria dos outros guias sobre páginas de início de sessão não menciona: não precisa de um plugin específico para personalizar o seu formulário de início de sessão. O WPForms inclui funcionalidades de personalização de formulários diretamente no editor de blocos do WordPress.

Quando incorporar o seu formulário numa página (faremos isso no Passo 5), verá opções de estilo 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 etiquetas, incluindo tipos de letra, tamanhos e cores
• Estilos de botões, tais como cor de fundo, cor do texto, raio da borda e largura
• Estilo geral dos formulários para espaçamento, alinhamento e fundos dos contentores

Isto poupa imenso tempo. Em vez de ter de gerir um plugin de personalização do login para as cores e um plugin de formulários para a funcionalidade de login propriamente dita, faz-se tudo no WPForms.

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

Vá a «Definições» » «Geral» no criador de formulários e altere o texto do botão «Enviar» para algo como «Iniciar sessão».

Passo 4: Configure as suas definições de início de sessão

Ainda no criador de formulários, clique em «Definições» no painel da esquerda. Agora, clique em «Confirmações» para definir o que acontece após um início de sessão bem-sucedido.

Na maioria dos sites, é aconselhável redirecionar os utilizadores para algum sítio depois de iniciarem sessão. Pode encaminhá-los para a sua página inicial, para o painel de controlo da conta ou para qualquer outra página. Defina o «Tipo de confirmação» como «Ir para URL (Redirecionar)» e introduza o URL de destino.

Há mais uma configuração que vale a pena verificar. Desça a página e clique em «Registo de utilizador » para expandir essas opções.

Ative a opção para ocultar o formulário aos utilizadores que já estiverem conectados. Desta forma, as pessoas que já estiverem conectadas não verão o formulário de login. Pode personalizar a mensagem que lhes será apresentada em vez disso.

Clique em «Guardar » quando terminar de definir as configurações.

Passo 5: Publicar a sua página de início de sessão personalizada

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

Aparecerá uma janela pop-up a perguntar onde pretende inserir o formulário. Clique em «Criar nova página».

Dê um nome à sua página (por exemplo, «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. É também aqui que verá as opções de estilo do bloco da Etapa 3, para que possa ajustar as cores e os tipos de letra diretamente aqui antes de publicar.

Quando tudo estiver como deseja, clique em «Publicar». A sua página de início de sessão personalizada já está ativa e pronta para receber utilizadores registados em poucos minutos!

Passo 6: Adicione a página de início de sessão 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. Aceda a Aparência » Menus no painel de controlo do WordPress.

Se já tiver um menu configurado, localize 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 o local que desejar na ordem do menu. A maioria dos sites coloca-a na extremidade direita da barra de navegação. Escolha a localização de exibição do seu menu (normalmente «Menu Principal» para o cabeçalho) e clique em «Guardar Menu».

Se o seu site ainda não tiver 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 configurá-lo. Em seguida, adicione a sua página de início de sessão seguindo os mesmos passos que acabei de descrever. Visite a sua página inicial após guardar para se certificar de 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-o vivamente. Por predefinição, qualquer pessoa ainda pode visitar yoursite.com/wp-login.php e ver a página de início de sessão padrão 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.

Para isso, vamos usar o WPCode. Trata-se de um plugin gratuito que permite adicionar trechos de código ao WordPress sem ter de editar os ficheiros do tema.

Instale e ative o WPCode e, em seguida, aceda a Code Snippets » + Adicionar Snippet. Selecione Adicionar o seu código personalizado (Novo Snippet).

Dê ao seu snippet um nome como «Redirecionamento da página de login» e cole o código de redirecionamento. Certifique-se de que atualiza o URL no código para que corresponda ao URL da sua página de login personalizada. Clique em «Guardar snippet».

Verá uma mensagem de confirmação assim que for guardado com sucesso.

Por fim, ative o snippet na parte superior da página.

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

Bónus: Criar um formulário personalizado para redefinição de palavra-passe

Se o seu site permite o registo de utilizadores, também vai precisar de um formulário personalizado para repor a palavra-passe. Sem ele, os utilizadores que se esquecerem da palavra-passe serão redirecionados para a página padrão de reposição do WordPress, o que prejudica a experiência de marca que acabou de criar.

O complemento de registo de utilizadores inclui um modelo de formulário para redefinição da palavra-passe do utilizador. Aceda a WPForms » Adicionar novo e selecione-o.

Pode personalizar este formulário da mesma forma que personalizou o formulário de início de sessão: adicione a sua identidade visual através do campo «Conteúdo», defina o estilo no editor de blocos e publique-o numa página própria. Para obter um passo a passo detalhado, consulte o nosso guia sobre como personalizar o formulário de redefinição de palavra-passe no WordPress.

Perguntas frequentes sobre páginas de login personalizadas do WordPress

Se pretende criar uma página de início de sessão personalizada para o WordPress, personalizar o ecrã de início de sessão existente do WordPress ou adicionar um formulário de início de sessão a qualquer página do seu site, estas respostas abordam as questões mais comuns.

É possível personalizar a página de início de sessão do WordPress sem precisar de programar?

Sim. O WPForms permite-lhe criar e personalizar um formulário de início de sessão totalmente através do seu construtor de arrastar e largar e do editor de blocos do WordPress. Pode alterar cores, tipos de letra, estilos de botões e adicionar a sua própria identidade visual sem escrever uma única linha de CSS ou PHP.

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

Recomendo o WPForms Pro com o complemento de registo de utilizadores. Embora alguns guias sugiram a utilização de plugins separados para o formulário, o estilo e o layout da página, o WPForms trata de todos os três.

Recebe formulários de início de sessão, formulários de registo, formulários de redefinição de palavra-passe e ferramentas de personalização visual num único pacote. Para uma visão mais abrangente das opções disponíveis, consulte a nossa seleção dos melhores plugins para páginas de início de sessão do WordPress.

Como posso adicionar um formulário de início de sessão a qualquer página no WordPress?

O WPForms simplifica tudo isto. Pode incorporar o seu formulário de início de sessão utilizando o bloco do WPForms no editor de blocos, um código de atalho ou um widget.

Isso significa que pode colocar um formulário de início de sessão em qualquer página, na barra lateral ou no rodapé. Para obter instruções completas, consulte o nosso guia sobre como apresentar formulários de início de sessão e de registo em qualquer página.

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

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

Certifique-se de que o código de redirecionamento se aplica apenas a pedidos GET, para que o envio POST do formulário de login continue a funcionar corretamente.

Em seguida, crie uma experiência de registo completa

Agora dispõe de uma página de início de sessão personalizada e totalmente adaptada à identidade da sua marca para o seu site WordPress. Juntamente com um formulário de redefinição de palavra-passe, os seus utilizadores desfrutam de uma experiência profissional e sofisticada do início ao fim.

Para completar, veja como criar um formulário de registo de utilizadores com o WPForms. E se a segurança for uma prioridade, aprenda a impedir a redefinição não autorizada de palavras-passe no WordPress para reforçar ainda mais a segurança.

Crie já a sua página de início de sessão personalizada

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

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