A página de login padrão do WordPress não oferece a melhor experiência e pode até confundir seus usuários. É por isso que recomendamos adicionar uma página de login front-end para permitir que os usuários façam login diretamente da parte principal do seu site.
Isso melhora a acessibilidade e a satisfação geral do usuário. Além disso, é conveniente, permitindo que os usuários acessem formulários de login de várias partes do seu site, como barras laterais ou rodapés.
Criamos várias lojas online e sites onde oferecemos essa funcionalidade para melhor usabilidade. Isso nos ensinou o que funciona e o que não funciona para páginas de login front-end.
Neste artigo, mostraremos como adicionar facilmente uma página de login front-end e widgets no WordPress.
Por que e quando você precisa de login front-end no WordPress?
Por padrão, a página de login do WordPress exibirá a marca do WordPress e geralmente não corresponderá ao design do seu site WordPress atual.
Isso funciona para blogs WordPress e sites menores.
No entanto, se você tem um site de associação, loja online ou outro site onde os usuários podem se registrar e fazer login, adicionar uma página e widget de login front-end oferece uma experiência melhor para seus usuários.
Você pode até personalizar esta página com sua marca ou adicionar um formulário de login simples à barra lateral do seu WordPress.
Dito isso, vamos ver como adicionar facilmente uma página de login front-end e um widget de login no WordPress. Para este tutorial, mostraremos as 3 maneiras mais fáceis de fazer isso, e você pode usar os links abaixo para pular para o método de sua escolha:
- Método 1: Adicionar uma Página de Login Front-End e Widgets no WordPress com WPForms
- Método 2: Adicionar uma Página de Login Front-End no WordPress com SeedProd
- Método 3: Adicionar uma Página de Login Front-End e Widgets no WordPress com Theme My Login
- Dica de Especialista: Adicionar um Botão de Login no Menu do Seu Site WordPress
- Bônus: Adicionar CAPTCHA no Formulário de Login do WordPress
- Tutorial em Vídeo
- Perguntas Frequentes (FAQs)
Método 1: Adicionar uma Página de Login Front-End e Widgets no WordPress com WPForms
WPForms é o melhor plugin de formulário de contato do WordPress do mercado, usado por mais de 6 milhões de sites. Ele permite que você crie facilmente uma página de login front-end personalizada e um widget de login em seu site.
Na WPBeginner, nós o usamos para criar formulários de contato e pesquisas anuais e tivemos uma excelente experiência. Para saber mais, veja nossa análise detalhada do WPForms.
Primeiro, você precisará instalar e ativar o plugin WPForms. Para instruções detalhadas, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Observação: O WPForms também tem uma versão gratuita. No entanto, você precisará da versão premium do plugin para desbloquear o addon de Registro de Usuário.
Após a ativação, visite a página WPForms » Configurações na barra lateral de administração do WordPress para inserir sua chave de licença.
Você pode obter esta chave em sua conta no site do WPForms.
Depois de fazer isso, acesse a página WPForms » Addons no painel do WordPress para localizar o Addon de Registro de Usuário.
Em seguida, clique no botão ‘Instalar Addon’ para baixá-lo e ativá-lo em seu site.
Após a ativação do addon de Registro de Usuário, acesse a tela WPForms » Adicionar Novo na barra lateral de administração para iniciar o construtor de formulários.
A partir daqui, comece digitando um nome para o formulário que você está prestes a criar. Depois disso, simplesmente escolha o modelo ‘Formulário de Login de Usuário’ para começar a criar seu formulário de login de usuário.
Isso iniciará o modelo no construtor de formulários, onde você notará uma prévia do formulário à direita e uma coluna de campos disponíveis à esquerda.
O modelo já inclui os campos de nome de usuário e senha necessários. No entanto, se você quiser personalizar o formulário, pode arrastar e soltar campos adicionais da barra lateral.
Para mais detalhes, consulte nosso guia sobre como criar uma página de login personalizada para o WordPress.
Assim que estiver satisfeito com suas configurações, basta clicar no botão 'Salvar' para armazenar suas alterações.
Adicionar Formulário de Login a uma Página/Post
Agora, para adicionar seu formulário de login a uma página ou post, abra a página/post de sua escolha no editor de blocos do WordPress na área administrativa.
Assim que estiver lá, clique no botão '+' para abrir o menu de blocos e adicionar o bloco WPForms.
Depois disso, escolha o formulário de login que você criou no menu suspenso no próprio bloco.
Por fim, clique no botão ‘Publicar’ ou ‘Atualizar’ para salvar suas configurações.
Adicionar Formulário de Login à Barra Lateral do Site
Se você quiser adicionar o formulário de login à barra lateral do seu site, visite a página Aparência » Widgets no painel do WordPress.
Aqui, clique no botão '+' no canto superior esquerdo da tela para abrir o menu de blocos.
A partir daqui, você precisa encontrar e adicionar o bloco WPForms à barra lateral.
Depois de fazer isso, escolha o formulário de login no menu suspenso no próprio bloco.
Finalmente, clique no botão 'Atualizar' para armazenar suas configurações. Para mais detalhes, consulte nosso guia sobre como adicionar um formulário de login na barra lateral do seu WordPress.
Agora, você pode visitar seu site WordPress para ver o formulário de login na barra lateral.
Adicionar Formulário de Login no Editor de Site Completo
Se você estiver usando um tema baseado em blocos, você não poderá adicionar seu login à barra lateral do site usando o método acima.
Para adicionar um formulário de login no FSE, visite a página Aparência » Editor no painel do WordPress.
Isso abrirá o FSE, onde você terá que clicar no botão ‘+’ para abrir o menu de blocos.
A partir daqui, localize e adicione o bloco WPForms em qualquer lugar que desejar em seu site.
Depois disso, escolha o formulário de login que você criou no menu suspenso no próprio bloco.
Finalmente, clique no botão ‘Salvar’ para armazenar suas configurações.
Dica Bônus: Para personalizar ainda mais seu formulário de login, você pode conferir nosso tutorial sobre como estilizar seus formulários do WordPress.
Método 2: Adicionar uma Página de Login Front-End no WordPress com SeedProd
SeedProd é o melhor construtor de páginas WordPress com arrastar e soltar do mercado, usado por mais de 1 milhão de sites.
Ele permite que você crie uma página de login totalmente personalizada que pode combinar com o design do seu site atual ou ser algo único.
É muito amigável para iniciantes e vem com uma tonelada de modelos de página de login projetados profissionalmente que você pode usar para construir sua página de login.
Várias de nossas marcas parceiras projetaram seus sites inteiros, incluindo páginas de login, com esta ferramenta. Para mais detalhes, veja nossa análise completa do SeedProd.
Primeiro, você precisará instalar e ativar o plugin SeedProd. Para detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, visite a tela SeedProd » Landing Pages na barra lateral de administração do WordPress e selecione a opção ‘Página de Login’ clicando no botão ‘Configurar uma Página de Login’.
Isso o direcionará para a tela ‘Templates’, onde você pode escolher um modelo e usar o construtor de arrastar e soltar para personalizar a página.
Usando um modelo em branco, você pode até mesmo projetar uma página de login personalizada do zero.
Ao selecionar um modelo de sua escolha, você será solicitado a inserir um Nome da Página. O SeedProd usará o nome da página como URL para sua página de destino do formulário de login.
Depois de fazer isso, clique no botão ‘Salvar e Começar a Editar a Página’ para continuar.
Isso iniciará o construtor de arrastar e soltar do SeedProd, onde você verá uma prévia da página de login à direita com os campos disponíveis à esquerda.
A partir daqui, você pode adicionar qualquer bloco à página simplesmente arrastando-o do menu esquerdo e colocando-o onde quiser.
Para mais detalhes, consulte nosso guia sobre como criar uma página de login personalizada do WordPress.
Quando terminar de projetar sua página, não se esqueça de clicar no botão ‘Publicar’ no menu suspenso na parte superior para salvar suas configurações.
Depois disso, volte ao seu painel do WordPress e navegue até SeedProd » Landing Pages.
A partir daqui, encontre a seção ‘Página de Login’ e clique no alternador para mudar de ‘Inativo’ para ‘Ativo’. Sua página de login agora estará ativa em seu site.
Método 3: Adicionar uma Página de Login Front-End e Widgets no WordPress com Theme My Login
Se você quiser adicionar uma página de login front-end muito simples ao seu site, pode usar o plugin gratuito Theme My Login.
Primeiro, você precisa instalar e ativar o plugin. Para mais detalhes, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Após a ativação, o plugin criará automaticamente páginas para login, logout, esqueci minha senha e registro.
Você pode navegar até a página Theme My Login » Geral no menu de administração e visualizar as configurações do plugin.
Primeiro, você pode definir o tipo de login. A configuração ‘Padrão’ é a mais segura, pois solicita e-mail e senha para fazer login.
Em seguida, você pode escolher suas configurações de registro. Mantivemos as configurações padrão aqui, pois elas exigem e-mail e senha para fazer login.
Você também pode marcar a caixa ‘Senhas’ para permitir que os usuários criem suas próprias senhas e a caixa ‘Login Automático’, que faz login automático dos usuários após o registro.
Depois disso, você pode alterar seus URLs de login e registro nas configurações de ‘Slugs’.
Estes criam automaticamente redirecionamentos. Assim, o URL de login padrão “seusite.com/wp-admin” redirecionará para “seusite.com/login”.
Você pode manter esses URLs iguais ou alterá-los.
Assim que terminar de fazer as alterações, certifique-se de clicar no botão ‘Salvar Alterações’.
Você não pode adicionar muita funcionalidade avançada a menos que faça um upgrade para usar suas extensões premium.
Ainda assim, é uma boa solução para usuários com orçamento limitado que desejam criar uma página de login front-end simples.
Adicionar o Formulário de Login a uma Página/Post
Agora, para adicionar o formulário de login criado pelo Theme My Login, abra uma página/post no editor de blocos do WordPress.
A partir daqui, clique no botão ‘+’ para abrir o menu de blocos e adicione o bloco Shortcode à página.
Depois disso, adicione o seguinte shortcode ao bloco:
[theme-my-login]
Finalmente, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações.
Agora, visite seu site para ver o formulário de login.
Adicionar Formulário de Login a uma Área de Widget
Você também pode adicionar um formulário de login às suas áreas de widget do WordPress usando o bloco Theme My Login.
Simplesmente navegue até a página Aparência » Widgets e abra o menu de blocos clicando no botão ‘+’.
A partir daqui, você deve encontrar e adicionar o bloco Theme My Login à área de widget de sua escolha.
Depois disso, escolha o formulário que deseja adicionar no menu suspenso no próprio bloco.
Finalmente, clique no botão ‘Atualizar’ para armazenar suas configurações. Agora, visite seu site WordPress para ver o formulário de login na área de widget.
Dica de Especialista: Adicionar um Botão de Login no Menu do Seu Site WordPress
Agora que você criou uma página de login front-end, recomendamos torná-la facilmente acessível adicionando um botão de login ao seu menu de navegação.
Isso garante que os usuários possam encontrar e acessar suas contas sem procurar a página de login.
Para adicionar um botão de login ao menu do seu site, basta visitar a página Aparência » Menus no painel do WordPress.
Aqui, expanda a aba ‘Links Personalizados’ na coluna da esquerda e adicione a URL da sua página de login no frontend. Você também pode adicionar o texto do link para o botão de login.
Clique no botão ‘Adicionar ao Menu’.
Depois disso, clique no botão ‘Salvar Menu’.
Agora visite seu site WordPress para ver o botão de Login em ação. Quando os usuários clicarem nele, serão automaticamente direcionados para a página do seu formulário de login no frontend.
No entanto, o método acima não funcionará se você estiver usando um tema de bloco.
Nesse caso, vá para a página Aparência » Editor na barra lateral de administração do WordPress.
Isso iniciará o Editor Completo do Site. No painel de design principal à esquerda, selecione ‘Navegação’ para começar a editar o menu principal do seu site.
Fazer isso abrirá seu menu de navegação no editor completo do site. Aqui, clique no botão ‘+’ ao lado dele. Isso abrirá um prompt onde você terá que digitar o nome da sua página de login no frontend.
Assim que aparecer nos resultados, clique nele para adicionar o link ao menu de navegação.
Em seguida, mude para a aba ‘Bloco’ no painel à esquerda.
Agora você pode alterar o texto âncora para o botão de login de acordo com sua preferência.
Quando terminar, basta clicar no botão ‘Salvar’ para armazenar suas configurações.
Agora visite seu site para ver o botão de login em ação.
Bônus: Adicionar CAPTCHA no Formulário de Login do WordPress
Depois de adicionar um formulário de login personalizado, é uma boa ideia adicionar CAPTCHA a ele, pois esta página é frequentemente um alvo para hackers e spammers.
Adicionar CAPTCHA pode bloquear spambots e proteger seu site. Você pode fazer isso facilmente com WPForms.
Após a ativação do plugin, basta visitar a página WPForms » Configurações no painel do WordPress e mudar para a aba ‘CAPTCHA’.
Depois disso, selecione a opção ‘reCAPTCHA’ como seu tipo de CAPTCHA.
Assim que fizer isso, você deve visitar o site do Google reCAPTCHA para criar uma chave de site e uma chave secreta. Essas chaves ajudarão a integrar o reCAPTCHA em seu site WordPress.
Após adicionar essas chaves, simplesmente edite o formulário WordPress que você criou anteriormente e mude para a aba ‘Configurações’.
Em seguida, selecione a opção ‘Proteção contra Spam e Segurança’ e ative o interruptor ‘Ativar Google v3 reCAPTCHA’. Em seguida, clique no botão ‘Salvar’ para armazenar suas configurações.
Agora você adicionou com sucesso o CAPTCHA ao seu formulário de login do WordPress, tornando-o muito mais seguro contra bots de spam e ataques automatizados.
Para instruções mais detalhadas, você pode ver nosso tutorial sobre como adicionar CAPTCHA aos formulários de login e registro do WordPress.
Tutorial em Vídeo
Se você não prefere instruções escritas, então apenas assista ao nosso tutorial em vídeo:
Perguntas Frequentes (FAQs)
Aqui estão algumas perguntas frequentemente feitas por nossos leitores sobre como adicionar páginas de login e widgets no front-end do WordPress:
Uma página de login no front-end é necessária para todos os sites WordPress?
Não, de forma alguma. Um blog simples ou um site de negócios onde apenas o administrador ou editores fazem login podem usar a página de login padrão do WordPress sem problemas.
Páginas de login no front-end são mais valiosas para sites onde os usuários fazem login regularmente, como sites de associação, lojas online ou fóruns.
Como posso redirecionar os usuários para uma página específica após o login?
A maioria dos plugins de página de login, incluindo WPForms e SeedProd, possuem configurações integradas para lidar com redirecionamentos pós-login.
Geralmente, você pode encontrar uma opção nas configurações do formulário ou da página para inserir o URL específico para onde deseja enviar os usuários, como o painel da conta deles ou uma página exclusiva para membros.
Para começar, você pode conferir nosso tutorial sobre como redirecionar usuários após login bem-sucedido no WordPress
Posso adicionar botões de login de redes sociais ao meu formulário de front-end?
Sim, você pode. Muitos plugins de registro e login de usuários oferecem extensões ou integrações para logins sociais.
Por exemplo, o WPForms se integra a serviços que permitem adicionar botões de 'Entrar com Google' ou 'Entrar com Facebook', tornando o processo ainda mais fácil para seus usuários.
Se você estiver interessado, temos um tutorial sobre como adicionar login social ao WordPress que pode te ajudar.
Uma página de login personalizada afetará a velocidade do meu site?
Quando construída com um plugin de qualidade como SeedProd ou WPForms, uma página de login personalizada deve ter um impacto mínimo na velocidade do seu site.
Essas ferramentas são otimizadas para desempenho. A chave é usar um plugin bem codificado e evitar adicionar imagens excessivamente grandes ou scripts pesados ao design da sua página de login.
Esperamos que este artigo tenha ajudado você a adicionar uma página de login e widgets de front-end no WordPress. Você também pode querer ver nossas seleções de especialistas dos melhores plugins de página de login do WordPress e nosso guia sobre como adicionar um URL de login personalizado no WordPress.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Obrigado pelo tutorial. Estou usando uma combinação de MemberPress e SeedProd e, junto com seus guias, eles me ajudaram a criar um site de associação fantástico. Graças a este tutorial, consegui aperfeiçoar o detalhe final — a página de login. Eu a criei usando SeedProd e seus modelos. Não foi apenas simples, mas também rápido. Então, agora finalmente tenho uma página de login personalizada. Para alguns, isso pode ser apenas um pequeno detalhe, mas estou absolutamente encantado com isso.
Cara
Este plugin não é mais gratuito.
Ele agora permite apenas as funções mais básicas.
Todo o resto está configurado como extensões
WPBeginner Support
Obrigado por nos informar, vamos dar uma olhada e atualizar nosso artigo quando pudermos.
Admin
Ethan
Excellent video voice over perfect very professionnal THANK YOU! The only problem is the video is outdated. The plugin developer made is plugin from free to paid! So we have no access to what you explained
Bobby
Olá, tenho um problema, não tenho as páginas. Adiciono suas 'Ações', mas nada aparece no menu Principal.
Eu baixei e instalei.
O que devo fazer?
Angela Baker
Este vídeo é muito bem feito. Obrigado por explicar tudo tão bem.
Eu estava usando o login padrão do WP para as pessoas se registrarem no meu site, mas agora isso não está funcionando por algum motivo. Este plugin funcionará em vez disso? Eu não quero mudar nenhum dos meus logins de administrador, só preciso de uma maneira para o público se registrar.
Arya
Por que o recaptcha não é exibido no formulário de login?
Navi Singh
Olá querido,
como habilitar para qualquer usuário postar diretamente após um login. se algum plugin adequado estiver disponível para postagem de usuários, por favor, me ajude a fazer isso.
Obrigado
Chantal
Olá. Segui suas instruções no meu blog WP, e a página de login/registro frontal aparece. Mas quando alguém tentou se registrar, apareceu um erro dizendo “O registro de usuário não é permitido no momento.”
Eu configurei para aprovação de novos usuários.
Você pode me ajudar a entender o que fiz de errado e como posso fazer funcionar.
obrigado
Chantal
Resolvi o problema, precisei marcar que qualquer um pode se registrar nas configurações gerais!
Doug Poffinbarger
Isso foi muito útil e bem feito. Alguma ideia de como adicionar uma autenticação de login no meio de uma postagem? Em vez de baixar um brinde para capturar assinantes de e-mail, eu gostaria de exigir assinatura ou login para “ler mais” de uma determinada postagem. Isso tem sido muito difícil de encontrar em pesquisas no Google. Idealmente, seria um pequeno formulário inline ou um pop-up no final do artigo truncado e, uma vez que eles se inscrevessem ou fizessem login, eles veriam automaticamente o restante do artigo e quaisquer outros enquanto estivessem inscritos.
Jeff
Olá, como faço para remover algumas seções da página de perfil do usuário?
O nome e o tipo do formulário são exibidos aos usuários em sua página de perfil; por favor, como posso resolver isso?
Mohammad Kashif
Funcionará com o WooCommerce?
WPBeginner Support
Olá Kashif,
Sim, funcionará com o WooCommerce.
Admin
Mohammad Kashif
O WooCommerce já tem uma página de login. Após instalar este plugin, agora tenho duas páginas de login. Como posso ter uma única página de login?
WPBeginner Support
Olá Kashif,
Você pode desativar o plugin e usar a página de login do WooCommerce.
Mohammad Kashif
Como posso redirecionar a página de login do WooCommerce para a página de login do TML?
Rahul
Você pode adicionar campos extras à página de registro? Se sim, como? por favor, alguém pode me ajudar?
HELENANG
Eu vejo que o TML oferece bastante funcionalidade.
Estou simplesmente procurando uma opção de login que retorne o usuário para a página de onde ele veio em nosso site, em vez de sua página de perfil. Existe algum plugin mais simples que você recomendaria para fazer exatamente isso sem a chance de conflitar com outros plugins? Obrigado.
WPBeginner Support
Olá,
Você pode usar o WPForms com o complemento de registro de usuário.
Admin
HELENANG
Este My Login funciona bem com o plugin Simple Access Control, que fornece acesso privado a certas páginas do site?
Ele entra em conflito com a segurança fornecida pelo plugin WordFence Security, por exemplo, bloqueio por um certo período de tempo após um número de tentativas de login malsucedidas?
Obrigado.
graham
Parece que há muitos comentários no Google de que o WooCommerce e o TML não funcionam bem juntos, há alguma verdade nisso?
Don Tedlock
Estou recebendo um link de login e senha perdida extra e não formatado no meu formulário de registro. Como removo esses links?
Samuel Nyamavor
Estou recebendo um link de login e senha perdida extra e não formatado no meu formulário de registro. Como removo esses links?
ST
Olá, você sabe como colocar o login no cabeçalho em vez da barra lateral? Obrigado! (:
Christina
Eu gostaria de saber isso também.
Saurabh Saneja
O plugin cria automaticamente uma página de login. Basta adicioná-la ao menu do cabeçalho.
Rachid
É um shortcode dentro de uma página de login (página criada pelo plugin assim que você a ativou), você pode chamar o shortcode dentro do seu arquivo php do cabeçalho…(do_shortcode(“…”))
Diane
Olá, é possível tornar a página de registro disponível apenas para administradores?
Tim
Existe alguma maneira de adicionar um formulário de contato que salve o histórico com este plugin?
Essencialmente, eles fariam login, veriam um "formulário de pedido" e poderiam então fazer um "pedido", que enviaria um e-mail para alguém com o pedido deles. Mas também salvaria o histórico de pedidos deles para que pudessem reordenar itens.
Mesmo que você pudesse me indicar a direção certa, isso seria muito útil!
Obrigado.
Christian
Sou só eu, ou este é o vídeo errado?
WPBeginner Support
Obrigado por nos notificar. Adicionamos o vídeo correto.
Admin
oliverosM
por que é que todo mundo coloca em seu título como fazer algo e acaba sendo uma configuração de plugin e não o que diz? eu esperava algo diferente, mas parece que todo mundo faz o mesmo. é fácil dizer como fazer algo quando é apenas um plugin.
Bem, é um bom artigo de qualquer forma.
Matt
Muito útil – obrigado!
Mike Squatrito
Você pode adicionar campos extras à página de registro? Se sim, como?
Rahul
Ei, você entendeu isso? Eu também quero adicionar um novo campo na página de registro.
Mr Darlington
Impressionante! Vamos conferir…
Leonard Rattini, CCP
Primeiramente, quero parabenizá-lo por sua ajuda em entender o WP.
No entanto, como a maioria dos aplicativos tende a fazer, e seu ensino para realizar, também: você encabeça com uma legenda complexa de “Como fazer…”. Eu prefiro ver um título que inclua um único substantivo e um único verbo que explique “por que” preciso fazer algo. Então, nos detalhes de instruções do corpo, é aí que me diz “como” satisfazer seu objetivo “de propósito único”.
Todas as fontes de aplicativos precisam entender que o delas não é o único que nós, usuários, usamos. Como seus “Como fazer…”, para explicar, nem sempre está claro o que deve ser satisfeito, e com certeza suas ações de como fazer para executar não são um simples passo a passo, bing-bing e pronto, função de procedimento.
Meus 30 anos em design de aplicativos de computador são minha plataforma para fazer esta declaração. Leonard Rattini, CCP
Rahul Maurya
Existe algum método para integrar registro ou login usando o Facebook neste plugin?
Ochelh
Olá,
Muito bom tutorial. Gostaria de adicionar um link de login/logout ao meu menu superior, este link deve alternar entre login e logout dependendo se o usuário está logado ou não. É possível fazer isso com TML e como?
Atenciosamente,