Como criar login, registro e perfil de usuário personalizados do WordPress

Se você possui um site WordPress, pode estar pensando em criar páginas personalizadas de login e registro de usuário para coletar mais informações. Por exemplo, você pode pedir aos usuários que especifiquem sua localização ou enviem uma breve biografia . No entanto, você provavelmente está se perguntando como fazer isso sem tocar em uma linha de código.

Felizmente, você pode usar um plug-in de registro de usuário do WordPress como o Profile Builder Pro. Isso permite que você personalize facilmente seus formulários de login e registro. Também lhe dá mais controle sobre o perfil do usuário.

Nesta postagem, veremos mais de perto por que você pode querer personalizar seu login de usuário, registro e formulários de perfil do WordPress. Em seguida, mostraremos como fazer isso passo a passo usando o Profile Builder Pro. Vamos começar!

Por que você pode querer criar um login, registro e perfil de usuário personalizados

Por padrão, os formulários de registro, login e perfil do usuário do WordPress são muito básicos. O mesmo vale para os formulários WooCommerce:

Esses formulários podem oferecer um bom ponto de partida, mas como proprietário de uma empresa, você pode estar interessado em saber mais sobre seu público. Por exemplo, coletar informações como localização e idioma pode ajudá-lo a otimizar seus esforços de marketing para atingir esse grupo demográfico específico.

Além disso, você pode querer proteger seus formulários com autenticação de dois fatores (2FA). Isso ajudará a impedir que agentes mal-intencionados se infiltrem em seu site.

Existem outras maneiras de personalizar a página de login ou registro. Por exemplo, você pode redirecionar os usuários para páginas específicas em seu site depois que eles fizerem login ou se registrarem.

Você pode levá-los para suas postagens mais recentes ou para sua página de vendas. Dessa forma, você pode usar sua página de login para chamar a atenção para produtos, artigos ou ofertas específicas e gerar mais conversões.

O Profile Builder Pro é o plug-in ideal para criar perfis de usuário personalizados do WordPress, login e formulários de registro. Ele ainda permite que você personalize seus formulários com lógica condicional. Isso significa que os campos que os usuários veem serão baseados em suas preferências e seleções.

Exploraremos esses recursos com mais detalhes na próxima seção.

Como criar um login, registro e perfil de usuário personalizado do WordPress

Agora, vamos ver como personalizar seu login de usuário, registro e formulários de perfil do WordPress.

Passo 1: Instale o Profile Builder Pro

Primeiro, você precisará comprar o plug-in Profile Builder Pro. Em seguida, faça login em sua conta e vá para Downloads . Aqui, você encontrará os arquivos do plug-in que acabou de adquirir:

Baixe os plugins Main e Pro para salvar o arquivo em seu computador. Em seguida, selecione Gerenciar sites e insira a URL do site no qual deseja ativar o plug-in:

Agora, faça login no seu site WordPress e navegue até Plugins → Adicionar novo . Em seguida, clique no botão Upload Plugin e escolha os arquivos que você acabou de baixar um a um:

Selecione Instalar agora , seguido de Ativar . Agora você deve ver o Profile Builder no menu do painel. Clique nele e vá em Registrar Versão . Aqui, você precisará inserir a chave de licença do seu plug-in:

Você encontrará a chave de licença em sua conta do Profile Builder. Depois de ativá-lo, você pode começar a trabalhar em suas páginas de login e registro.

O Profile Builder Pro pode criar automaticamente as páginas de formulário para você:

Tudo o que você precisa fazer é clicar em Criar página de formulário e ele adicionará os formulários de login, registro e perfil do usuário do WordPress às ​​respectivas páginas. A seguir, mostraremos como configurar e personalizar esses formulários.

Etapa 2: configurar seus formulários do WordPress

Vamos começar definindo algumas configurações para seus formulários do WordPress. Navegue até Profile Builder → Settings e selecione um design de formulário:

Por exemplo, você pode escolher Estilo 2 como seu estilo de formulário e seus formulários de usuário front-end ficarão mais ou menos assim:

Em seguida, você pode definir algumas configurações para suas páginas de login e registro. Por exemplo, você pode fazer login automaticamente para novos usuários após o registro, ativar a aprovação do administrador para novos registros e permitir que os usuários façam login apenas com seu nome de usuário ou e-mail:

Você pode até impor senhas fortes especificando um comprimento mínimo e um nível de força. Quando estiver pronto, clique em Salvar alterações .

Se você deseja tornar seu site mais seguro, pode navegar até a guia Autenticação de dois fatores e ativar esse recurso em seu site. Você pode até querer ativá-lo apenas para usuários específicos, como clientes e assinantes:

Se você navegar para Configurações avançadas , poderá habilitar ainda mais recursos para seus formulários. Por exemplo, se você selecionar a guia Campos , verá uma opção para Gerar senha automaticamente para os usuários :

Você também pode proibir que certas palavras sejam usadas em campos, impedir que os usuários usem nomes de exibição que já existem e muito mais. Não se apresse em explorar as configurações e opções disponíveis, mas lembre-se de salvar suas alterações antes de passar para outra guia.

Se você quiser direcionar os usuários para uma página específica depois que eles se registrarem ou fizerem login, você precisará ativar o módulo relevante. Vá para Profile Builder → Add-Ons e procure por Custom Redirects *.* Selecione a caixa ao lado e clique em Ativar :

Agora, vá para Profile Builder → Custom Redirects . Como você pode perceber, você pode configurar redirecionamentos para usuários individuais ou de acordo com a função do usuário:

No nosso caso, configuraremos redirecionamentos globais . Comece escolhendo um tipo de redirecionamento (como After Login ou After Registration ):

Em seguida, insira a URL para a qual deseja redirecionar os usuários e clique em Adicionar entrada . Você pode criar vários redirecionamentos.

Etapa 3: Personalize os campos do formulário

Para personalizar os campos do seu formulário de registro de usuário do WordPress, navegue até Profile Builder → Form Fields . Aqui, você verá uma lista dos campos que seu formulário exibe atualmente:

Você pode clicar em Editar para personalizar um campo individual ou em Excluir para removê-lo do formulário. Para adicionar um novo campo, use o menu suspenso para selecionar uma opção.

Por exemplo, você pode querer pedir aos usuários que selecionem seu país. O Profile Builder solicitará que você insira alguns detalhes sobre este campo, como um título e metanome:

Você pode até tornar isso um campo obrigatório. Quando estiver pronto, clique em Adicionar campo . Isso agora será adicionado ao seu formulário de registro de usuário do WordPress.

Anteriormente, mencionamos a lógica condicional. É quando um campo é exibido aos usuários com base nas informações inseridas nos campos anteriores.

Por exemplo, talvez você só queira perguntar aos usuários sobre o site deles se eles selecionaram Estados Unidos como país. Para fazer isso, clique no botão Editar no campo Site . Em seguida, marque a caixa para Ativar lógica condicional :

Usando o menu suspenso, selecione o campo do qual esta entrada dependerá (no nosso caso, Select Country ) e especifique a entrada (por exemplo, Estados Unidos ).

Veja como ficará o resultado:

Observe que você também pode reorganizar a ordem em que seus campos aparecem. Para isso, basta passar o mouse sobre o número do seu campo e arrastá-lo para a posição desejada:

Se você deseja criar vários formulários de registro para diferentes tipos de usuários, acesse Profile Builder → Add-Ons e clique para ativar o módulo Multiple Registration Forms :

Esse recurso é particularmente útil se você atender a diferentes tipos de usuários ou clientes. Por exemplo, você pode vender para empresas e também para indivíduos.

Depois de ativar o módulo, vá para Profile Builder → Formulários de registro e clique em Adicionar novo :

Em seguida, você precisará inserir um nome para o seu formulário, definir algumas configurações e personalizar os campos (como mostrado anteriormente):

Quando estiver pronto, clique em Publicar . A seguir, veremos como adicionar esses formulários ao seu site.

Etapa 4: adicione os formulários às suas páginas

Como mencionamos anteriormente, o Profile Builder Pro pode adicionar automaticamente os códigos de acesso do formulário às suas páginas de login, registro e perfil. Isso significa que, sempre que você modificar esses formulários, as alterações serão refletidas no front-end.

No entanto, você também pode decidir adicionar esses formulários a outras áreas do seu site. Por exemplo, você pode querer personalizar a página de login do WooCommerce e o formulário de registro do WooCommerce.

Existem duas maneiras de fazer isso: usando um shortcode ou um bloco dedicado.

Primeiro, abra a página onde você gostaria de exibir seus formulários. Se você quiser usá-los para sua loja online, precisará editar a página Minha conta que foi criada quando você instalou o WooCommerce. Alternativamente, você pode decidir criar uma nova página.

Se você estiver usando a página existente do WooCommerce, precisará excluir o login padrão e os formulários de registro. Basta selecionar o shortcode e excluí-lo:

Agora, para adicionar seus formulários personalizados, clique para adicionar um novo bloco e procure por Register ou Login :

Neste tutorial, adicionaremos ambos os formulários a esta página. Também adicionamos um título para cada formulário:

Você também obterá algumas definições de configuração para cada bloco. Por exemplo, se você selecionar o formulário de registro, poderá ativar o login automático após o registro, configurar um redirecionamento e muito mais:

Se você criou vários formulários de registro, navegue até Configurações do formulário e use o menu suspenso para escolher o formulário que deseja exibir:

Em ** Função atribuída , você pode escolher a função que será atribuída aos usuários que se registrarem por meio deste formulário. Por exemplo, se for um formulário de registro de atacado, você pode atribuir a função de cliente de atacado a esses usuários.

Quando estiver pronto, clique em Atualizar (ou Publicar se você criou uma nova página). Em seguida, você pode visitar a página no front-end para ver como seus formulários aparecem para seus clientes:

Observe que, para este exemplo, usamos o estilo de formulário padrão, mas você pode escolher qualquer um dos modelos predefinidos para seus formulários para destacá-los e torná-los mais profissionais.

Você também pode adicionar seus formulários com um shortcode. Isso pode ser particularmente útil se você criou suas páginas com um construtor de páginas diferente do Block Editor.

Você pode localizar esses códigos de acesso em Profile Builder → Basic Information . Basta copiá-los e colá-los na página desejada!

Etapa 5: Personalize os formulários de perfil

Por fim, você pode personalizar os formulários de perfil de usuário do WordPress para que os usuários tenham mais controle sobre seus detalhes. Para fazer isso, você precisará ativar o módulo Multiple Edit Profile Forms :

Em seguida, vá para Profile Builder → Editar formulários de perfil → Adicionar novo :

Então, você pode apenas personalizar o formulário conforme mostrado anteriormente. Por exemplo, você pode adicionar um redirecionamento e criar novos campos ou editar os existentes. Quando terminar, clique em Publicar .

Conclusão

Os formulários padrão do WordPress são bem básicos. Se você deseja coletar mais detalhes sobre seu público ou fornecer uma experiência de usuário personalizada, precisará personalizar esses formulários. Você também pode impor senhas fortes e autenticação de dois fatores nesses formulários para tornar seu site mais seguro.

Para recapitular, veja como você pode criar formulários WordPress personalizados para login e registro:

1. Instale o Profile Builder Pro.
2. Configure seus formulários do WordPress.
3. Personalize os campos do formulário.
4. Adicione os formulários às suas páginas.
5. Personalize o perfil do usuário.

Você tem alguma dúvida sobre como criar um login, registro ou perfil de usuário personalizado do WordPress? Deixe-nos saber na seção de comentários abaixo!