Como criar uma página de login personalizada no WordPress (a maneira mais fácil)

Pretende criar uma página de início de sessão personalizada para o seu sítio Web WordPress? Ter uma página de início de sessão personalizada é uma óptima maneira de substituir o início de sessão genérico do WordPress e adicionar a sua própria marca.

Neste artigo, mostraremos a maneira mais fácil de criar uma página de login totalmente personalizada para o site da sua empresa.

Crie o seu formulário WordPress agora

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

Todos os sítios Web WordPress têm a mesma página de início de sessão. Trata-se de um formulário de início de sessão simples com o logótipo do WordPress por cima.

Esta página é genérica, pelo que é difícil dizer em que sítio Web está realmente a iniciar sessão. O logótipo do WordPress também faz uma ligação ao WordPress.org, o que pode afastar os utilizadores do seu site se clicarem nele.

No entanto, se criar uma página de início de sessão personalizada do WordPress para o seu sítio, pode utilizá-la para:

• Promoções
• Notificações
• E mais.

Na WPForms, utilizamos o espaço extra na nossa página de início de sessão personalizada para informar os utilizadores sobre novas funcionalidades interessantes.

É muito fácil criar uma página de login personalizada e também é eficaz para melhorar a segurança do site. Ao criar uma página de início de sessão personalizada, pode ocultar a página predefinida para reduzir o spam de início de sessão e manter o seu site WordPress seguro.

Agora que sabemos porque é que precisa de uma página de início de sessão personalizada, vamos criar uma para o seu site.

Como criar uma página de login personalizada do WordPress

Vamos usar o WPForms para criar um formulário de login completamente personalizado para o seu site. Em seguida, mostraremos como criar sua página de login personalizada.

OK, vamos começar por instalar o plugin de página de login personalizado para WPForms.

Passo 1: Instalar o plugin WPForms

A primeira coisa que você precisa fazer é instalar e ativar o plugin WPForms. Para obter mais detalhes, consulte este guia passo a passo sobre como instalar um plugin no WordPress.

Para aceder às funcionalidades de registo e início de sessão do utilizador, é necessário o WPForms Pro ou superior. A versão Pro inclui o addon User Registration, que facilita a criação de páginas de início de sessão personalizadas.

Depois de instalar o WPForms, vá para WPForms " Addons.

Desloque-se para baixo até encontrar o User Registration Addon. Clique no botão para o instalar.

Se quiser, pode restringir o acesso ao WordPress enquanto estiver a criar o seu novo formulário de início de sessão. Para saber como o fazer, consulte o nosso guia sobre como ocultar o seu site WordPress até estar pronto.

Já está tudo pronto! Vamos criar o nosso novo formulário de início de sessão personalizado.

Etapa 2: Criar um formulário de login personalizado do WordPress

Agora que temos o WPForms instalado, vamos criar um novo formulário de login para o WordPress.

Clique em WPForms " Add New para começar.

Será agora levado para o ecrã de seleção de modelos WPForms. O User Registration Addon dá-lhe alguns modelos especiais com capacidades únicas, como se mostra abaixo.

Introduza um nome para o seu formulário e, em seguida, selecione o modelo Formulário de início de sessão do utilizador.

Verá o formulário abrir-se no criador de formulários. O formulário de início de sessão personalizado é fornecido com um campo Nome de utilizador, um campo Palavra-passe e um campo Lembrar-me.

O campo Lembrar-me é especial e exclusivo deste modelo. Permite que os utilizadores façam o login automático sempre que visitarem o seu sítio Web depois de submeterem este formulário.

Pode utilizar este modelo tal como está ou personalizá-lo se pretender acrescentar-lhe elementos adicionais. Mostrar-lhe-emos como o fazer no passo seguinte.

Passo 3: Adicionar uma imagem de marca ao seu formulário de início de sessão

O WPForms facilita muito a edição de qualquer modelo existente ou a criação de um formulário a partir do zero. Por exemplo, podemos inserir facilmente elementos de marca no nosso formulário de login para o fazer sobressair.

Uma forma de o fazer é adicionar uma imagem de cabeçalho que represente uma marca hipotética. Basta arrastar e soltar o campo Conteúdo na parte superior do formulário, logo abaixo do título.

Depois de colocar o campo Conteúdo no seu formulário, clique nele para abrir as Opções de campo.

Agora, pode utilizar o editor WYSIWYG no painel do lado esquerdo para inserir imagens ou adicionar qualquer texto personalizado ao seu formulário.

Queremos adicionar uma imagem de marca ao nosso formulário de login do WordPress. Por isso, vamos utilizar o botão Add Media para carregar uma imagem personalizada.

Quando premir o botão Adicionar multimédia, verá abrir-se a janela modal da Galeria de multimédia do WordPress. Pode carregar uma imagem aqui, como faz normalmente no WordPress.

Quando terminar as personalizações, não se esqueça de premir Guardar.

Com uma imagem de cabeçalho adicionada, o nosso formulário de início de sessão WordPress personalizado tem um aspeto muito mais profissional e adaptado a uma marca específica.

Se precisar de mais ideias para personalizar os seus formulários de início de sessão, consulte a nossa publicação sobre exemplos de páginas de início de sessão.

Antes de prosseguirmos com o formulário de início de sessão, seria uma boa ideia criar também um formulário de redefinição da palavra-passe.

Passo 4: Personalizar as definições do seu formulário de início de sessão personalizado

Neste passo, vamos analisar as definições do formulário de início de sessão. Isto permitir-nos-á controlar o botão no formulário e a página para a qual os nossos visitantes serão redireccionados.

Comece por clicar em Definições no lado esquerdo do criador de formulários.

O separador Geral será pré-selecionado quando entrar nas definições, o que é exatamente o que pretendemos.

Nas definições gerais, desloque-se para baixo até Texto do botão Enviar e altere-o para Log In.

Também alterámos o Texto de processamento do botão Enviar para que o utilizador possa ver que o início de sessão está em curso. Se quiser, pode escrever outra coisa aqui.

Em seguida, clique em Confirmações.

Neste ecrã, podemos escolher o que acontece quando o formulário de início de sessão é submetido. Pode fazer com que os seus utilizadores abram o administrador do WordPress, se quiser. Para a maioria dos sites, faz sentido redireccioná-los de volta para o frontend.

Assim, neste exemplo, vamos redirecionar o utilizador para a página inicial.

Há mais uma definição a verificar antes de prosseguirmos.

Se percorrer o separador Definições no criador de formulários, verá o menu Registo do utilizador. Clique em Registo do utilizador para expandir as opções.

Pode optar por ocultar este formulário dos utilizadores com sessão iniciada, definindo o botão de alternância como ligado. Utilize a caixa de texto para editar a mensagem a apresentar em vez do formulário quando um utilizador já tiver iniciado sessão.

Ótimo! Reserve algum tempo para rever as outras definições e efetuar quaisquer alterações que pretenda fazer. Em seguida, clique em Guardar na parte superior do criador de formulários.

Passo 5: Publicar o seu formulário de início de sessão personalizado

Agora estamos prontos para publicar o seu novo formulário de início de sessão.

Pode incorporar o seu formulário de início de sessão personalizado em qualquer parte do seu sítio, incluindo:

• Páginas
• Postos
• Na barra lateral
• No rodapé

Neste exemplo, vamos criar uma página de login personalizada do WordPress. Para começar, clique no botão Incorporar na parte superior do construtor de formulários.

Nesta altura, verá um modal a perguntar onde pretende incorporar o seu formulário. Para este exemplo, vamos criar uma nova página. Por isso, vá em frente e clique em Criar nova página.

E agora dê um nome à sua página. Depois disso, clique em Vamos lá.

Isto levá-lo-á para o editor de blocos do WordPress com o formulário de início de sessão já incorporado.

Este é um ótimo local para usar as opções de estilo de formulário no bloco WPForms para personalizar facilmente a aparência de seus campos, rótulos e botões.

Quando estiver satisfeito com o aspeto do seu formulário de início de sessão personalizado, basta clicar no botão Publicar para publicar a sua página de início de sessão personalizada.

E pronto! A sua página de início de sessão personalizada do WordPress está ativa e pronta a ser utilizada.

Lembre-se: terá de terminar a sessão no WordPress para ver o formulário concluído se tiver utilizado a opção Ocultar se tiver iniciado sessão. Se tiver iniciado sessão, não verá o ecrã de início de sessão.

Se quiser, pode utilizar um plugin de página de destino para criar uma página de início de sessão personalizada e incorporar o seu formulário de início de sessão. Isto permitir-lhe-ia configurar facilmente uma imagem de fundo e cores personalizadas.

Passo 6: Adicionar o formulário de início de sessão ao menu de navegação

Acabou de criar o seu formulário de início de sessão personalizado com a sua marca. Isso é perfeito!

Mas também é importante que seja fácil para os visitantes localizarem e acederem à sua página de início de sessão personalizada.

A melhor maneira de o fazer é adicionar o seu formulário de início de sessão ao menu de navegação do seu sítio Web.

Para o fazer, abra o seu painel de controlo do WordPress e clique em Aparência " Menus.

Se o seu tema já tiver um menu de navegação criado, pode simplesmente adicionar a sua nova página de formulário ao menu existente. Basta marcar a sua página de início de sessão na coluna da esquerda e, em seguida, selecionar Adicionar ao menu.

A página de início de sessão aparecerá agora à sua direita, juntamente com outras páginas do seu menu. Se pretender, pode reorganizar a ordem dos itens do menu arrastando e largando.

Depois disso, terá de selecionar uma localização onde pretende que o menu apareça. A maioria dos temas suporta até 5 localizações de apresentação para o menu, incluindo o cabeçalho e o rodapé, que são os mais comuns.

Neste exemplo, vamos adicionar o menu ao cabeçalho. Este é normalmente designado por menu "Primário" no WordPress. Clique em Menu principal para selecionar a sua localização de apresentação e, em seguida, prima o botão Guardar menu na parte inferior para atualizar o seu menu.

O menu de navegação incluirá agora a sua nova página de início de sessão. É uma boa ideia visitar a sua página inicial depois de atualizar ou criar o seu menu e garantir que tudo está bem.

No caso de o seu sítio Web ainda não ter um menu, o processo de criação de um novo menu é muito semelhante aos passos acima. A única diferença é que primeiro terá de dar um nome ao seu novo menu na secção Estrutura do menu.

Uma vez feito isso, basta clicar no botão Criar menu na parte inferior.

Agora basta seguir os mesmos passos para atualizar um menu existente para adicionar a página de início de sessão à sua navegação.

Se também criou um formulário personalizado de redefinição de palavra-passe, poderá querer adicioná-lo também ao menu.

Passo 7: Redirecionar a página de início de sessão do WordPress para a sua página de início de sessão personalizada

Um último passo que poderá querer dar é redirecionar a página de início de sessão padrão do WordPress para a sua página de início de sessão personalizada. Isto faz com que qualquer pessoa que tente aceder à página de início de sessão predefinida do WordPress seja enviada para a sua nova página.

Para o fazer, vamos adicionar um pouco de código utilizando o plugin WPCode.

Este é um plugin gratuito que lhe permite adicionar facilmente código personalizado ao seu sítio WordPress. Depois de o instalar e ativar, vá a Code Snippets " + Add Snippet. Em seguida, selecione Add Your Custom Code (New Snippet).

No ecrã seguinte, dê ao seu snippet um nome que o possa encontrar facilmente. Chamámos ao nosso "Redireccionamento da página de início de sessão". Em seguida, cole o seguinte código:

Certifique-se de que altera https://sulliesflowers.com/login/ para o URL da sua página de início de sessão personalizada. Agora clique em Salvar snippet.

Deverá ver uma mensagem de sucesso quando o seu redireccionamento tiver sido guardado e aplicado.

Por fim, active a definição na parte superior do ecrã para tornar o seu snippet ativo.

Ótimo! Agora os utilizadores serão enviados para a sua página personalizada quando tentarem iniciar sessão.

Opcional: Criar um formulário de redefinição de senha

Se aceitar registos de utilizadores e permitir que as pessoas iniciem sessão no seu site, recomendamos vivamente que adicione também um formulário de redefinição de palavra-passe ao seu site. Um formulário de redefinição permite que os utilizadores recuperem a sua conta se se esquecerem da palavra-passe ou se suspeitarem que foram pirateados.

A boa notícia é que o addon WPFroms User Registration também lhe dá um formulário especial de redefinição de senha.

Volte ao seu painel do WordPress e clique em WPForms " Adicionar novo. Desta vez, selecione o modelo User Password Reset Form (Formulário de reposição da palavra-passe do utilizador).

Para obter um tutorial completo sobre formulários de redefinição de senha, consulte nosso guia sobre como personalizar o formulário de redefinição de senha no WordPress.

E já está! Agora já sabe como criar um formulário de início de sessão personalizado no WordPress. Pode usar isto como ponto de partida para desenvolver a marca na sua página de início de sessão.

Em seguida, personalize o formulário de registo

Em seguida, veja como criar um formulário de registo de utilizador para o seu site. Criar um formulário de registo personalizado é uma excelente forma de dar ao seu sítio um aspeto mais profissional.

Também pode querer saber como evitar redefinições de palavra-passe não autorizadas no WordPress.

Crie o seu formulário WordPress agora

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 o addon User Registration 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.