Como Criar Corretamente uma Página de Login Personalizada no WordPress (Passo a Passo)

Já se perguntou se você poderia criar uma página de login personalizada no WordPress?

Criar uma página de login personalizada ajuda você a exibir uma marca consistente para seus usuários, o que dá ao seu site uma aparência mais profissional.

Neste artigo, mostraremos como criar uma página de login personalizada no WordPress.

Criando uma Página de Login Personalizada no WordPress – Índice

• Por Que Criar uma Página de Login Personalizada?
• Escolhendo o Plugin Certo para Criar uma Página de Login Personalizada
• Método 1: Usando SeedProd para Criar uma Página de Login
• Método 2: Usando WPForms para Criar uma Página de Login
• Método 3: Usando Theme My Login para Criar uma Página de Login
• Método 4: Personalizar a Página de Login Existente do WordPress Sem um Plugin
• Método 5: Mostrar Formulário de Login em Qualquer Lugar Sem um Plugin

Por Que Criar uma Página de Login Personalizada?

Se você está gerenciando um site impulsionado pela comunidade, como um fórum, um site de membros, uma rede social de nicho, ou qualquer outro site que exija que os usuários registrem uma conta e façam login, então você precisará criar uma página de login personalizada.

A página de login padrão do WordPress parece genérica e sem graça. Com uma página de login personalizada, você pode personalizar todos os elementos da página ao redor do formulário.

Se você tiver uma página de login personalizada, poderá ocultar a página de login padrão, se desejar. Isso pode reduzir o spam de login e manter seu site WordPress seguro.

Escolhendo o Plugin Certo para Criar uma Página de Login Personalizada

No repositório oficial de plugins do WordPress, você pode encontrar dezenas de plugins diferentes que o ajudam a criar facilmente uma página de login personalizada. Neste artigo, veremos 3 plugins diferentes: SeedProd, WPForms e Theme My Login.

Escolha SeedProd se você precisar de um construtor de landing pages fácil de usar para criar páginas de login personalizadas, páginas de vendas, páginas de captura de leads, páginas de em breve, páginas de modo de manutenção e muito mais.

Aqui estão alguns recursos notáveis do SeedProd:

• Modelos de página de login projetados profissionalmente para você começar.
• Personalize totalmente sua página de login com elementos como perfis sociais, vídeo, depoimentos, avaliações por estrelas e muito mais.
• Adicione um formulário de login a qualquer landing page que você criar com o SeedProd.

Escolha WPForms se você precisar de um plugin de formulários WordPress completo que o ajude a criar facilmente qualquer tipo de formulário online, incluindo formulários de registro, formulários de pagamento, formulários de contato, etc.

Alguns benefícios do WPForms são:

• Personalize seu formulário de login da maneira que desejar, sem restrições.
• Publique seu formulário de login em qualquer post ou página.
• Incorpore seu formulário de login na barra lateral ou até mesmo no rodapé com widgets.

Escolha Theme My Login se você quiser criar uma página de login simples com facilidade.

Abaixo estão alguns recursos do Theme My Login:

• Nenhuma configuração é necessária para criar uma página de login personalizada.
• Oculta automaticamente a página de login padrão e redireciona para a página de login recém-criada.
• Adicione um link para a página de login na sua barra lateral com um widget de login personalizado.

A desvantagem é que, ao contrário do SeedProd e do WPForms, o Theme My Login não permite que você incorpore seu formulário de login em qualquer lugar do seu site, e ele aparecerá exclusivamente na sua página de login. Como não é um plugin de formulário completo como os outros, a capacidade de personalizar seu formulário de login é limitada.

Método 1: Usando o SeedProd para Criar uma Página de Login

Primeiro, vamos ver como criar uma página de login personalizada com o SeedProd, passo a passo.

Passo 1: Instale o SeedProd no Seu Site

Para começar, você precisa baixar o plugin SeedProd. Em seguida, faça o upload e ative o plugin no seu site WordPress.

Para instruções detalhadas, siga este tutorial sobre como instalar um plugin do WordPress.

Após ativar o plugin, você verá uma tela de boas-vindas onde precisará inserir sua chave de licença. Você pode encontrar sua chave de licença na sua conta no site do SeedProd.

Once your license key is verified, scroll down the page further and click on the Create Your First Page button.

Em seguida, você será levado ao painel do SeedProd. Aqui você pode ver os diferentes tipos de landing pages que pode criar. Clique em Configurar uma Página de Login para começar.

Passo 2: Escolha um Modelo de Página de Login

Nesta etapa, você será solicitado a escolher um modelo de página de login. O SeedProd oferece uma tonelada de modelos projetados profissionalmente para você escolher.

Há também um modelo em branco que você pode usar se quiser começar seu design do zero.

Para escolher um modelo de página de login, basta passar o mouse sobre ele e clicar no ícone de marca de seleção.

Em seguida, é hora de personalizar o modelo.

Passo 3: Personalize Sua Página de Login

A melhor parte do SeedProd é que você pode personalizar facilmente sua página de login usando o construtor visual de arrastar e soltar. Primeiro, você pode personalizar qualquer elemento existente no modelo clicando nele.

Por exemplo, você pode clicar no título “Entrar” para alterar o texto, tamanho, alinhamento, tipografia e muito mais.

Para adicionar novo conteúdo à sua página de login, você pode usar os blocos de landing page prontos do SeedProd.

No lado esquerdo do construtor visual, existem blocos de landing page como imagem, vídeo, botão, perfis sociais, cronômetro, barra de progresso e muito mais.

Simplesmente arraste o bloco que você deseja e solte-o em sua página de login. Novamente, você pode clicar no bloco para personalizar o estilo, tamanho, alinhamento, etc.

O SeedProd também oferece seções pré-construídas como Recursos, FAQ, Rodapé e outras, que você pode adicionar à sua página de login.

Simplesmente clique em uma seção e o SeedProd a adicionará automaticamente à sua página.

Você também pode acessar as Configurações Globais do SeedProd no canto inferior para alterar a imagem de fundo, a fonte e as cores de toda a sua página de login, em vez de alterar cada elemento individualmente.

Por exemplo, se você quiser alterar o esquema de cores da sua página de login, o SeedProd oferece mais de 20 paletas de cores que você pode usar para criar um visual coeso.

Assim que estiver satisfeito com a aparência da sua página de login, clique em Salvar no canto superior direito.

Etapa 4: Configure as Configurações da Sua Página de Login

Se você adicionar um formulário de captura de e-mail à sua página de login, poderá conectá-lo ao seu serviço de marketing por e-mail na aba Conectar.

Simplesmente clique no seu provedor de marketing por e-mail preferido e siga as instruções para conectar sua conta. Agora, sempre que alguém fornecer seu endereço de e-mail através do formulário de captura, ele será adicionado à sua lista de e-mail automaticamente.

Você também pode ir para a aba Configurações da Página para configurar outras configurações.

As configurações nesta página incluem:

• Geral – Altere o nome e a URL da sua página de login, exiba um link de afiliado do SeedProd e muito mais.
• SEO – Defina o título SEO da sua página, meta descrição, etc. Se você estiver usando um plugin de SEO como All in One SEO, você pode usá-lo como um atalho para suas configurações.
• Analytics – Acompanhe o desempenho da sua página de login usando um plugin de analytics como MonsterInsights.
• Scripts – Use scripts de rastreamento e retargeting, como cookies ou pixels de rastreamento do Facebook.

Não se esqueça de clicar no botão Salvar para salvar suas configurações.

Etapa 5: Publique sua página de login

Agora é hora de publicar sua página de login personalizada em seu site. Para fazer isso, clique na seta suspensa ao lado do botão verde Salvar e pressione o botão Publicar.

Em seguida, você verá uma mensagem de sucesso informando que a página de login está agora no ar.

Clique em Ver página ao vivo para visualizar sua nova página de login personalizada.

A etapa final é habilitar o modo de página de login em sua área de administração do WordPress. Isso pode parecer difícil, mas o SeedProd torna isso super fácil.

Simplesmente saia do construtor visual de landing pages e volte para o painel principal do SeedProd. Na seção Página de Login, alterne o botão de Inativo para Ativo.

Pronto! Agora sua página de login do WordPress tem um design personalizado. Se você quiser desativar a página de login, basta voltar ao mesmo botão de alternância e desativá-lo.

Método 2: Usando o WPForms para Criar uma Página de Login

Vamos dar uma olhada em como criar uma página de login com o WPForms.

Etapa 1: Instale o WPForms em seu site

A primeira coisa que você precisa fazer é instalar e ativar o plugin WPForms. Certifique-se de verificar sua chave de licença navegando para WPForms » Configurações. Você pode obter a chave de licença em sua conta no site do WPForms.

Para poder criar uma página de login personalizada com o WPForms, você precisará instalar o addon de Registro de Usuário indo para WPForms » Addons. Clique em Instalar Addon ao lado de User Registration Addon e depois clique em Ativar.

Assim que o addon for ativado, você pode prosseguir e criar um formulário de login de usuário com o WPForms.

Passo 2: Criar um Formulário de Login Personalizado

Com o poderoso construtor de arrastar e soltar do WPForms, você pode criar um formulário de login em apenas alguns minutos, não horas, sem escrever uma única linha de código.

Para criar um formulário de login, visite WPForms » Adicionar Novo. Na página de configuração do formulário, você precisará escolher o modelo Formulário de Login de Usuário para criar um formulário de login.

Agora você verá o construtor de formulários onde pode adicionar, personalizar e remover campos do formulário de login. Por padrão, o modelo de formulário de login adiciona os seguintes campos: Nome de Usuário e Senha.

Você pode personalizar qualquer campo clicando nele no construtor de páginas. Em seguida, você pode fazer as personalizações desejadas no painel esquerdo.

Passo 3: Configuração do Formulário

Para configurar as configurações gerais, você pode ir para Configurações » Geral. Nesta página, você pode personalizar o nome do formulário, descrição, texto do botão de envio, etc.

Você não precisa fazer nada na aba Notificações para o seu formulário de login personalizado. Por padrão, as notificações estão desativadas, então você não receberá um e-mail sempre que alguém fizer login no seu site.

Quando um usuário faz login através do seu formulário de login personalizado, ele será direcionado para a página inicial do seu site. Você pode alterar a URL de redirecionamento, se desejar, no campo URL de Redirecionamento de Confirmação.

Etapa 4: Publique seu formulário WordPress

Um dos principais benefícios de usar o WPForms para criar um formulário de login é que ele permite incorporar seu formulário em qualquer lugar do seu site, incluindo posts, páginas, widgets da barra lateral ou áreas de rodapé com widgets.

Vamos dar uma olhada em como publicar seu formulário em posts ou páginas.

Crie um novo post ou página no WordPress e, em seguida, clique no ícone + no editor de blocos do Gutenberg. Você pode pesquisar pelo bloco WPForms e clicar nele.

Em seguida, selecione seu formulário de login no bloco WPForms e ele será carregado automaticamente em seu post / página.

Após adicionar o formulário, você pode publicar seu post / página.

Você também pode adicionar o formulário de login ao widget da sua barra lateral da seguinte forma. Vá para Aparência » Widgets e adicione o widget WPForms à sua barra lateral.

Selecione seu formulário de login personalizado nas configurações do widget e clique no botão Salvar para salvar as alterações.

Método 3: Usando Theme My Login para Criar uma Página de Login

O plugin Theme My Login torna super fácil publicar um formulário de login personalizado em seu site WordPress. Para criar uma página de login simples, tudo o que você precisa fazer é instalar e ativar o plugin Theme My Login.

O plugin funciona sem nenhuma configuração adicional.

No entanto, se você precisar personalizar as configurações do plugin, pode clicar no menu Theme My Login no seu painel do WordPress.

Você pode então alterar os tipos de login e registro. Você também pode ajustar os slugs de URL para as páginas de login, logout, registro, senha perdida e redefinição de senha.

Método 4: Personalizar a Página de Login Existente do WordPress Sem um Plugin

Se você preferir fazer alterações ou adicionar estilos personalizados à sua página de login existente em vez de criar uma nova, veja como fazer isso.

Simplesmente adicione este código ao arquivo functions.php do seu tema ou a um plugin específico do site:

//Custom login page
function clp_login_head() {
		
	echo '<style>'; //Begin custom styles
	echo '.login #nav a, .login #backtoblog a { color: # !important; }'; //Login page link color
	echo '.login h1 a { background:url("' . get_bloginfo('stylesheet_directory') . '/images/IMAGE GOES HERE"); width: px; height: px; }'; //Login page logo
	echo '.login .button-primary { background:#; border-color:#; }'; //Login page button color
	echo '</style>'; //End custom styles
		
}
add_action('login_head', 'clp_login_head');

Você pode alterar o CSS e o URL da imagem no código acima para adicionar seu estilo personalizado para a página de login do WordPress.

Método 5: Exibir Formulário de Login do WordPress em Qualquer Lugar Sem Plugin

Se você deseja exibir o formulário de login do WordPress em qualquer página, barra lateral ou área de rodapé, você pode adicionar este código ao arquivo de modelo do seu tema:

<?php
          wp_login_form();
?>

O código acima exibirá apenas a página de login geral do WordPress no local onde você adicionar o código. Caso você queira adicionar uma página de formulário personalizado do WordPress com campos e opções adicionais, você pode usar este código:

<?php $args = array(
        'echo' => true,
        'redirect' => 'http://wpsnipp.com',
        'form_id' => 'loginform',
        'label_username' => __( 'Username' ),
        'label_password' => __( 'Password' ),
        'label_remember' => __( 'Remember Me' ),
        'label_log_in' => __( 'Log In' ),
        'id_username' => 'user_login',
        'id_password' => 'user_pass',
        'id_remember' => 'rememberme',
        'id_submit' => 'wp-submit',
        'remember' => true,
        'value_username' => NULL,
        'value_remember' => false );
wp_login_form($args);
?>

Mais alguns trechos de código que você achará úteis:

• Altere sua URL de login via arquivo .htaccess
• Altere sua URL de login via functions.php
• Remova o efeito de tremer do login do WordPress quando ocorre um erro

É isso! Se você planeja adicionar trechos de código ao seu site com mais frequência, confira o plugin WPCode. É a melhor solução para adicionar trechos de código personalizados com facilidade.

Esperamos que este guia tenha ajudado você a criar uma página de login personalizada no WordPress. Se você gostou deste artigo, talvez também queira aprender como criar uma página protegida por senha no WordPress. Esta postagem ajudará você a restringir seu conteúdo com uma senha para ganhar dinheiro ou coletar endereços de e-mail de usuários.

Você também pode querer limitar as tentativas de login em sua página de login para impedir que hackers realizem ataques de força bruta em seu site.

Leia nosso guia completo de segurança para WordPress para mais informações sobre isso.