Como criar uma página de login personalizada no WordPress (guia definitivo) 2024

A página de login padrão do WordPress funciona bem, mas não representa totalmente a sua marca. Para criar uma experiência mais envolvente, é importante mostrar sua marca e seu negócio nessa página.

Um design de página de login personalizado é especialmente impactante para sites de associação ou lojas on-line, onde os usuários interagem com frequência com a página de login.

Na WPBeginner, implementamos uma página de login personalizada para nosso site gratuito de treinamento em vídeo do WordPress. Isso nos ajudou a mostrar nossa marca com mais destaque e, ao mesmo tempo, melhorou a experiência do usuário.

Neste guia, mostraremos a você como criar uma página de login personalizada no WordPress. Exploraremos vários métodos para que você possa escolher o que melhor se adapta às suas necessidades comerciais.

Aqui está o que você aprenderá com este guia:

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

Seu site WordPress vem com um sistema avançado de gerenciamento de usuários. Ele permite que os usuários criem contas em lojas de comércio eletrônico, sites de associação e blogs.

Por padrão, a página de login mostra a marca e o logotipo do WordPress. Isso é bom se você for a única pessoa com acesso de administrador ou tiver muito poucos usuários.

No entanto, se o seu site permitir que os usuários se regist rem e façam login, uma página de login personalizada oferecerá uma experiência melhor para o usuário.

Alguns usuários podem ficar desconfiados se a tela de login do WordPress não se parecer em nada com o seu site. Eles provavelmente se sentirão mais à vontade se você usar o logotipo e o design da sua empresa.

Por fim, a tela de login padrão não contém nada além do formulário de login. Ao criar uma página de login personalizada, você pode usar o espaço para promover outras páginas ou ofertas especiais.

É por isso que usamos uma página de login personalizada para todos os nossos sites em que os usuários precisam interagir com um formulário de login.

Por exemplo, aqui está a página de login personalizada que usamos para o site de vídeos de treinamento do WPBeginner.

Dito isso, vamos dar uma olhada em mais alguns exemplos de designs personalizados de páginas de login do WordPress.

Exemplos de design de página de login do WordPress

Os proprietários de sites podem personalizar a página de login do WordPress usando diferentes estilos e técnicas.

Alguns criam uma página de login personalizada que usa o tema e as cores do site. Outros modificam a página de login padrão adicionando um plano de fundo, cores e logotipo personalizados.

Aqui estão alguns exemplos do que é possível fazer.

WPForms

O WPForms é o melhor plugin de formulário de contato para WordPress do mercado. O plug-in também inclui um complemento para criar belos formulários de login e registro no WordPress, que mostraremos mais adiante neste artigo.

Sua página de login personalizada usa um layout de duas colunas. A coluna da esquerda contém o formulário de login, e a coluna da direita é usada para destacar promoções e outras chamadas para ação.

A página de login mostrada acima permite que os usuários conheçam os novos recursos. Ela usa branding personalizado, ilustração de fundo e cores da marca para criar uma experiência de login exclusiva.

Jacquelynne Steves

Jacquelynne Steeves é um site de artes e artesanato em que a autora publica conteúdo sobre decoração de casas, confecção de colchas, padrões, bordados e muito mais.

A página de login usa uma imagem de fundo personalizada que combina com o tema do site, e o formulário de login está à direita.

Gráficos de animação da igreja

A página de login dessa empresa de design de gráficos em movimento tem um plano de fundo colorido que reflete seu negócio.

Ele usa o mesmo cabeçalho, rodapé e menus de navegação do site na tela de login. O formulário de login em si é bastante simples, com um fundo claro.

Revisão da administração do MITSloan

O MITSloan Management Review usa um modal pop-up para exibir um formulário de login e registro.

A vantagem de um pop-up é que os usuários podem fazer login sem sair da página. Isso evita que eles precisem carregar uma nova página e oferece uma experiência de usuário mais rápida.

Agora, você está pronto para aprender a criar uma página de login personalizada no WordPress?

Criação de uma página de login do WordPress usando o tema My Login (gratuito)

Theme My Login é um plug-in gratuito que altera sua página de login para combinar com seu tema do WordPress. Ele não é muito personalizável, mas substituirá a página de login padrão do WordPress e a deixará com uma aparência mais profissional.

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Theme My Login. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, o Theme My Login cria automaticamente URLs para suas ações personalizadas de login, logout, registro, esquecimento de senha e redefinição de senha.

Você pode personalizar esses URLs de login do WordPress visitando a página Theme My Login ” General. Role para baixo até a seção “Slugs” para modificar os URLs usados pelo plug-in para ações de login.

O Theme My Login também permite que você use códigos de acesso para criar páginas personalizadas de login e registro. Você pode simplesmente criar uma página para cada ação e adicionar o slug da página aqui para que o plug-in possa localizar e redirecionar os usuários adequadamente.

Vamos começar com a página de login.

Vá até Página ” Adicionar novo para criar uma nova página do WordPress. Em seguida, você precisa dar um título à sua página e inserir o seguinte shortcode [theme-my-login] na página.

Agora você pode publicar sua página e visualizá-la para ver sua página de login personalizada em ação.

Esta é a aparência em nosso site de teste do WordPress.

Repita o processo para criar outras páginas usando o seguinte shortcode:

[theme-my-login action="register"] Para o formulário de registro

[theme-my-login action="lostpassword"]Para a página de senha perdida

[theme-my-login action="resetpass"] Para a página de redefinição de senha

Criação de uma página de login personalizada do WordPress usando WPForms

O WPForms é o melhor plug-in de criação de formulários para WordPress do mercado. Ele permite que você crie facilmente formulários personalizados de login e registro para o seu site.

O WPForms é um plug-in premium do WordPress, e você precisará de pelo menos o plano profissional para acessar o complemento de registro de usuário. Os usuários do WPBeginner podem obter um desconto de 50% usando nosso código de cupom do WPForms: SAVE50

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPForms. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, você precisa visitar a página WPForms ” Configurações para inserir sua chave de licença. Você pode encontrar essas informações em sua conta no site do WPForms.

Depois de inserir a chave de licença, você poderá instalar complementos.

Vá em frente e visite a página WPForms ” Addons e localize o User Registration Addon.

Em seguida, clique no botão “Install Addon” (Instalar complemento) para fazer o download e ativar o complemento. Agora você está pronto para criar seus formulários de login personalizados.

Vá para a página WPForms ” Adicionar novo. Você será solicitado a “Selecionar um modelo” para seu formulário. Procure o modelo “User Login Form” e clique no botão “Use Template” para continuar.

O WPForms carregará o formulário de login do usuário com os campos obrigatórios.

Você pode clicar nos campos para adicionar sua própria descrição ou texto ao redor deles.

Você também pode alterar outras configurações.

Por exemplo, o título padrão do botão é “Enviar”. Você pode clicar no botão e alterar o texto para “Login”.

Você também pode decidir o que acontece quando um usuário faz o login com sucesso.

Você precisará ir até a guia Configurações ” Confirmação e selecionar uma ação. Você pode redirecionar o usuário para qualquer outro URL, redirecioná-lo para a página inicial ou simplesmente mostrar uma mensagem informando que ele já está conectado.

Quando estiver satisfeito com as configurações do formulário, basta clicar no botão “Save” (Salvar) no canto superior direito da tela e fechar o construtor de formulários.

Adição do formulário de login personalizado a uma página do WordPress

O WPForms torna muito fácil adicionar seu formulário de login personalizado em qualquer post ou página do WordPress.

Basta editar a página em que você deseja adicionar o formulário de login ou criar uma nova página. Em seguida, na tela de edição da página, adicione o bloco WPForms à sua área de conteúdo.

Em seguida, selecione o formulário de login que você criou anteriormente, e o bloco WPForms o carregará automaticamente dentro da área de conteúdo.

Agora você pode continuar editando a página do formulário de login. Fique à vontade para adicionar mais texto ou blocos promocionais. Quando terminar, não se esqueça de salvar e publicar suas alterações.

Agora você pode visitar seu site para ver sua página de login em ação.

Criação de uma página de login personalizada do WordPress usando o SeedProd (recomendado)

Por padrão, sua página personalizada do formulário de login do WordPress usará o modelo e os estilos de página do seu tema. Ela terá os menus de navegação, o cabeçalho, o rodapé e os widgets da barra lateral do seu tema.

Se quiser assumir completamente o controle de toda a página e projetar algo do zero, você poderá usar um plug-in do construtor de páginas do WordPress.

O SeedProd é o melhor construtor de páginas de destino para WordPress. Ele é fácil de usar para iniciantes e oferece um construtor do tipo arrastar e soltar para ajudá-lo a criar qualquer tipo de página de destino, inclusive uma página de login, uma página de lançamento em breve, uma página de modo de manutenção e muito mais.

Para este artigo, usaremos a versão SeedProd Pro porque ela inclui um modelo de página de login e blocos de página avançados para personalização.

Há também uma versão gratuita do SeedProd, mas ela não inclui a opção de criar uma página de login para seu site WordPress.

Primeiro, você precisará instalar o plug-in SeedProd em seu site. Para obter mais detalhes, você pode seguir nosso guia sobre como instalar um plug-in do WordPress.

Quando o plug-in estiver ativo, você será redirecionado para o SeedProd na área de administração do WordPress.

Aqui, você precisará inserir sua chave de licença, que pode ser facilmente obtida na conta do SeedProd. Depois de inserir a chave, clique no botão “Verify key” (Verificar chave).

Depois disso, você estará pronto para criar sua página de login no SeedProd.

Para começar, vá para SeedProd ” Landing Pages e selecione a opção “Login Page” clicando no botão “Set up a Login Page”.

Na próxima tela, você pode selecionar um modelo para a sua página de login. Você também pode criar uma página do zero usando o modelo em branco.

No entanto, sugerimos o uso de um modelo, pois é mais fácil e rápido personalizar a página de login.

Quando você selecionar um modelo, será exibida uma janela pop-up para inserir um Nome da página para sua página de login. O SeedProd usará o nome da página como URL de sua página de destino.

Depois de inserir esses detalhes, clique no botão “Salvar e começar a editar a página”.

Agora, você pode editar sua página de login usando o construtor de arrastar e soltar do SeedProd na guia Design. O construtor permite que você adicione facilmente qualquer bloco de página à página simplesmente arrastando-o do menu esquerdo e colocando-o em qualquer lugar da página.

Por exemplo, você pode adicionar algum texto, um vídeo ou um novo botão à sua página de login. Há mais opções de personalização na seção Advanced Blocks, onde é possível adicionar um cronômetro de contagem regressiva, ícones de compartilhamento social e muito mais.

O SeedProd permite até mesmo que você remova os blocos de página existentes no modelo. Tudo o que você precisa fazer é clicar no ícone da lixeira para excluir o bloco de página.

Em seguida, se você clicar em qualquer seção da página de login, verá mais opções de personalização.

Por exemplo, você pode alterar o texto e a cor dos campos, escolher uma fonte diferente, editar a cor do botão e muito mais.

Quando estiver satisfeito com o design da página de login, clique na guia “Connect” (Conectar) na parte superior.

Agora você pode conectar diferentes serviços de marketing por e-mail, como Constant Contact, Drip e outros.

Depois disso, você precisa ir até a guia Page Settings (Configurações da página). Nas configurações gerais, o SeedProd permite que você edite o título da página e altere o status da página de rascunho para publicação.

Você também pode selecionar a opção de usar um link do SeedProd e adicionar seu link de afiliado do SeedProd para ganhar mais dinheiro on-line.

Se quiser otimizar sua página de login para os mecanismos de pesquisa, vá para as configurações de SEO. Aqui, você encontrará um botão que instalará o plug-in All In One SEO.

OAll in One SEO for WordPress (AIOSEO) é o melhor plugin de SEO para WordPress que permite otimizar seu site WordPress para mecanismos de pesquisa e plataformas de mídia social.

Você pode aprender a melhor maneira de usá-lo em nosso guia sobre como configurar corretamente o All In One SEO para WordPress.

Depois disso, você também pode adicionar diferentes trechos de código à sua página de login na guia Scripts settings (Configurações de scripts).

Por exemplo, talvez você queira adicionar o código do Google Analytics, o pixel do Facebook ou outro código de rastreamento aqui.

Agora que você alterou as configurações da página, clique no botão “Salvar” na parte superior.

Em seguida, você terá que tornar sua página de login ativa. Para fazer isso, você pode sair do construtor de landing page e ir para SeedProd ” Landing Pages.

Uma vez lá, você deve clicar no botão para alterar o status da página de “Inativa” para “Ativa”.

Agora você pode acessar o URL da sua página de login e vê-lo em ação.

Esta é uma captura de tela da tela de login em nosso site de demonstração.

Alternativa: Você também pode usar o Thrive Architect para criar uma página de login atraente. Esse é outro excelente plugin de construção de páginas do tipo arrastar e soltar que recomendamos para a criação de páginas personalizadas.

Ele inclui mais de 300 modelos projetados profissionalmente que permitem criar uma página de login parecida com a que está abaixo.

Se os plug-ins do construtor de páginas do WordPress não forem a sua praia, você poderá usar CSS personalizado para estilizar o formulário e a própria página de login.

Alterar o logotipo e o URL de login do WordPress

Nem sempre é necessário criar uma página de login personalizada do WordPress para o seu site. Muitos sites substituem o logotipo e o URL do logotipo do WordPress e ainda usam a página de login padrão.

Se você quiser substituir o logotipo do WordPress na tela de login pelo seu próprio logotipo, poderá usar facilmente um plug-in do WordPress ou adicionar um código personalizado. Mostraremos os dois métodos, e você poderá usar o que melhor lhe convier.

Método 1: Alterar o logotipo e o URL de login do WordPress usando um plug-in

A primeira coisa que você precisa fazer é instalar e ativar o plug-in Colorlib Login Customizer. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, o plug-in adiciona um novo item de menu ao personalizador de temas do WordPress. Basta navegar até Appearance ” Customize e clicar no novo item “Colorlib Login Customizer” para iniciar o personalizador de login.

Observe que essa opção não estará disponível se você estiver usando um tema de bloco, portanto, recomendamos o uso do método de código se esse for o caso.

O personalizador de login carregará sua tela de login padrão do WordPress com opções de personalização à esquerda e uma visualização ao vivo à direita.

Para substituir o logotipo do WordPress pelo seu próprio, clique na guia “Opções de logotipo” à direita.

A partir daqui, você pode ocultar o logotipo do WordPress, carregar seu próprio logotipo personalizado e alterar o URL e o texto do logotipo.

Você também pode personalizar o tamanho e a cor do texto e a largura e a altura do logotipo personalizado.

O plug-in também permite que você personalize completamente a página de login padrão do WordPress. Você pode adicionar colunas, imagens de fundo, alterar as cores do formulário de login e muito mais.

Basicamente, você pode criar uma página de login personalizada do WordPress sem alterar o URL de login padrão do WordPress.

Quando terminar, basta clicar no botão “Publicar” para salvar suas alterações. Agora você pode visitar a página de login do WordPress para ver seu formulário de login personalizado em ação.

Método 2: Alterar o logotipo e o URL de login do WordPress com o código

Esse método permite que você substitua manualmente o logotipo do WordPress na tela de login pelo seu próprio logotipo personalizado sem a necessidade de um plug-in. Ele também é adequado para temas de blocos.

Primeiro, você precisa carregar seu logotipo personalizado na biblioteca de mídia. Basta acessar a página Mídia ” Adicionar novo e carregar seu logotipo personalizado.

Depois de fazer o upload da imagem, clique no link “Edit” (Editar) ao lado dela. Isso abrirá a página de edição de mídia, onde você precisará copiar o URL do arquivo e colá-lo em algum lugar conveniente, como um arquivo de texto em branco no seu computador.

Em seguida, você precisa adicionar o seguinte trecho de código ao arquivo functions.php do seu tema ou usar o plug-in WPCode para adicionar facilmente o código personalizado sem quebrar seu site (recomendado):

function wpb_login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(http://path/to/your/custom-logo.png);
        height:100px;
        width:300px;
        background-size: 300px 100px;
        background-repeat: no-repeat;
        padding-bottom: 10px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'wpb_login_logo' );

Não se esqueça de substituir o URL da imagem de fundo na linha 4 pelo URL do arquivo que você copiou anteriormente. Você também pode ajustar outras propriedades CSS para corresponder à imagem do logotipo personalizado.

Agora você pode visitar a página de login do WordPress para ver seu logotipo personalizado.

No entanto, esse código substitui apenas o logotipo do WordPress. Ele não altera o link do logotipo, que aponta para o site WordPress.org.

Vamos mudar isso.

Basta adicionar o seguinte código ao arquivo functions.php do seu tema ou ao WPCode. Você pode colá-lo logo abaixo do código que adicionou anteriormente:

function wpb_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'wpb_login_logo_url' );
 
function wpb_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'wpb_login_logo_url_title' );

Não se esqueça de substituir “Your Site Name and Info” pelo nome do seu site. O logotipo personalizado na tela de login agora apontará para a página inicial do seu site.

Desativação do seletor de idioma da página de login do WordPress

O lançamento do WordPress 5.9 introduziu uma nova opção de login suspensa que permite aos usuários selecionar um novo idioma ao fazer login em um site.

Se houver mais de um idioma ativo no site, essa opção será exibida.

Isso funciona bem para sites multilíngues e equipes com diferentes usuários que podem querer acessar o painel do WordPress em um idioma diferente.

Mas se quiser manter a página de login simples e os usuários não precisarem trocar de idioma com frequência, a remoção do alternador de idioma pode ajudar a organizá-la. Você pode fazer isso usando um plug-in ou código.

Método 1: Desativar o alternador de idioma com um plug-in

Tudo o que você precisa fazer é instalar e ativar o plug-in Disable Login Language Switcher. Após a ativação, a opção do alternador de idioma será removida automaticamente. Não há configurações adicionais para você definir.

Agora, quando você for para a tela de login, verá a tela de login padrão sem a opção de alternância de idioma.

Método 2: Desativar o seletor de idioma com código

Outra maneira de desativar o alternador de idioma é adicionar um código ao WordPress.

Basta adicionar o seguinte trecho de código ao seu arquivo functions.php ou nos trechos do WPCode. Para obter detalhes, consulte nosso tutorial sobre como adicionar trechos de código personalizados no WordPress:

add_filter( 'login_display_language_dropdown', '__return_false' );

Para obter mais detalhes, consulte nosso guia sobre como desativar o alternador de idioma na tela de login do WordPress.

Isso é tudo. Esperamos que este artigo tenha ajudado você a conhecer diferentes maneiras de criar uma página de login do WordPress para seu website. Talvez você também queira ver nosso tutorial sobre como adicionar um login do Google com um clique no WordPress ou nosso guia sobre como escolher o esquema de cores perfeito para seu site.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.