Como Personalizo a Página de Login do WordPress (Sem Código) 

Você gerencia um site de membros ou um site de cliente, e as pessoas fazem login através de uma tela que não se parece em nada com sua marca. A página de login padrão do WordPress, com seu pequeno logotipo do WordPress, parece um desvio do seu site.

Eu personalizo a página de login do WordPress nos meus próprios sites, e vou mostrar cinco maneiras de fazer isso, desde um plugin sem código até algumas linhas de CSS. Escolha a que se adapta ao quanto de controle você deseja.

Benefícios de Personalizar Sua Página de Login do WordPress?

A página de login padrão do WordPress exibe o logo do WordPress e dois campos de formulário, e nada mais. Tudo bem se você for a única pessoa fazendo login no backend.

Mas, uma vez que os visitantes se registram e fazem login, uma tela padrão que não se parece em nada com seu site pode parecer suspeita. Uma página de login personalizada com sua marca diz aos usuários que eles estão no lugar certo.

Exemplos de Design de Página de Login Personalizada no WordPress

Então, como é uma página de login com marca na prática? Você pode adicionar suas próprias imagens, linkar de volta para sua página inicial, incluir um call to action ou adicionar ícones sociais.

Aqui estão alguns exemplos reais para mostrar o que é possível.

Personalização da Página de Login do WordPress MonsterInsights

O MonsterInsights usa um layout de duas colunas. O formulário de login fica à esquerda e um call to action para seu produto irmão fica à direita.

A imagem de fundo dá à página uma sensação distinta e de marca que a tela padrão não consegue igualar.

Página de Login Personalizada do WordPress TED

O TED usa outro design de duas colunas. Uma imagem e um título ficam à esquerda, com várias maneiras de fazer login à direita.

Os usuários também podem se inscrever para uma conta TED inserindo seu endereço de e-mail ali mesmo.

Página de Login Personalizada Church Motion Graphics

Esta página de login chama a atenção com um fundo colorido que reflete o que o negócio faz. O cabeçalho, rodapé e navegação permanecem consistentes com o resto do site.

O próprio formulário de login permanece minimalista, com um fundo claro que contrasta com as imagens vibrantes. Você pode navegar por mais exemplos de páginas de login para inspiração.

Qual Método Você Deve Usar?

Cinco métodos é bastante, então aqui está como escolher um para sua situação antes de começar. A escolha certa depende do quanto você quer mudar e se você se sente confortável com código.

• Redesign completo, sem código: Use o SeedProd para reconstruir toda a página de login com um construtor de arrastar e soltar.
• Apenas o logo: Use um plugin gratuito de personalização de login como o Colorlib para trocar o logo e o link.
• Você é um desenvolvedor: Adicione CSS ao functions.php para controle total e zero plugins.
• Um formulário de login, não uma página: Use o WPForms para criar um formulário de login com sua marca que você pode incorporar em qualquer lugar.
• Login social: Permita que as pessoas façam login com Google ou Facebook usando um plugin dedicado de login social.

Como Personalizar a Página de Login do WordPress Usando SeedProd

SeedProd é um construtor de sites WordPress com arrastar e soltar e um modo de Página de Login integrado. Ele permite que você redesenhe a tela de login visualmente, sem código, e funciona com qualquer tema WordPress.

Eu uso o modo Página de Login do SeedProd no meu próprio site, e a parte que mais valorizo é a velocidade. Refazer a tela de login com CSS manualmente leva uma tarde de tentativa e erro, enquanto o fluxo sem código me entrega uma página pronta em minutos.

É também um construtor de páginas de destino do WordPress, então o mesmo editor cuida de páginas em breve, páginas de vendas e páginas de login personalizadas de um só lugar.

Observação: Existe uma versão gratuita do SeedProd no WordPress.org, mas ela cobre apenas o modo em breve e de manutenção. O personalizador de Página de Login é um recurso pago disponível em todos os planos pagos, começando com o Básico, então você não precisa do plano mais caro para isso.

Siga os passos abaixo para estilizar sua página de login do WordPress com o SeedProd.

Passo 1: Instalar e Ativar o SeedProd

Primeiro, baixe o plugin SeedProd e instale-o em seu site WordPress.

Se você é novo nisso, siga este guia passo a passo para instalar um plugin do WordPress.

Após ativar o plugin, você verá a página de boas-vindas do SeedProd no seu painel. Insira sua chave de licença e clique no botão Criar Sua Primeira Página.

Etapa 2: Editar sua Página de Login do WordPress

Você verá os diferentes modos de página que o SeedProd pode habilitar. Para este tutorial, você quer o modo Página de Login.

Clique em Editar Página sob o título Página de Login para começar.

Etapa 3: Escolher um Modelo de Página de Login Personalizado do WordPress

Na próxima tela, você verá a biblioteca de modelos de página de login do SeedProd. Cada modelo é editável no construtor visual.

Clique no filtro de Login para mostrar todos os modelos de página de login. Passe o mouse sobre o que você gosta e clique no ícone de visto. Para este guia, escolherei a Página de Login 8.

Um pop-up pede para você nomear a página e definir seu URL. Clique em Salvar e Começar a Editar Página para abri-la no editor de arrastar e soltar.

Etapa 4: Personalize sua Página de Login do WordPress

O editor tem duas partes. Blocos e seções ficam à esquerda, e uma prévia ao vivo da sua página de login fica à direita.

Para adicionar conteúdo, arraste um bloco da esquerda e solte-o na página. Você pode adicionar um logo no topo da página em poucos cliques.

Clique em qualquer bloco para editá-lo. Clicar no formulário de login abre as configurações do Bloco de Login do SeedProd à esquerda.

Lá você pode editar os rótulos do formulário, mostrar ou ocultar os campos de nome e senha, e alterar o texto do botão.

Clique na aba Modelos para escolher entre vários estilos de formulário. Escolha um e ele se aplica ao seu formulário instantaneamente, sem necessidade de código.

Você pode adicionar botões, colunas e imagens para complementar o design. Se você quiser que as pessoas façam login mais rápido, é aqui que você também pode adicionar um botão de login social para que os usuários façam login com Google ou Facebook.

O SeedProd também tem Seções pré-construídas, para que você não precise construir áreas como um cabeçalho ou rodapé bloco por bloco. Clique na aba Seções para navegá-las.

Para definir fontes, cores e o plano de fundo uma vez para toda a página, clique no ícone de engrenagem no canto inferior direito para abrir as Configurações Globais.

Na aba Fontes, altere suas fontes e pesos de cabeçalho e corpo nos menus suspensos.

Clique no botão Temas de Fonte para navegar por combinações que combinam bem, e então adicione-as com um clique.

Defina cores para links, cabeçalhos, texto, botões e planos de fundo com o seletor de cores.

Ou clique no botão Paletas de Cores para escolher entre mais de 20 esquemas prontos.

A seção Plano de Fundo cuida do plano de fundo da sua página. Defina uma cor sólida, um gradiente ou uma imagem em largura total.

Clique no ícone de lixeira para remover a imagem existente, então clique em Usar Sua Própria Imagem para escolher uma nova do seu computador ou biblioteca de mídia.

Lembre-se de clicar em Salvar para armazenar suas alterações.

Etapa 5: Configure as Configurações da sua Página de Login do WordPress

Com o design no lugar, configure algumas opções. Se você adicionou um formulário de optin para coletar endereços de e-mail, conecte seu serviço de marketing por e-mail primeiro.

Clique na aba Conectar no topo, escolha seu serviço de e-mail e siga os passos para vincular sua conta.

O SeedProd se integra com populares serviços de newsletter por e-mail, incluindo Constant Contact, ConvertKit, AWeber e Mailchimp.

Ainda não tem um provedor de e-mail? O recurso de gerenciamento de assinantes do SeedProd armazena cadastros em seu site. Visualize-os em SeedProd » Assinantes.

Em seguida, clique na aba Configurações da Página. A partir daí, você pode ajustar:

• Geral: Altere o nome e a URL da página, e defina-a como rascunho ou publicada.
• SEO: Edite o título da página e a meta descrição através de um plugin de SEO como All in One SEO.
• Analytics: Acompanhe o desempenho com um plugin como MonsterInsights.
• Scripts: Adicione scripts de rastreamento ou retargeting, como o pixel do Facebook.

Clique em Salvar antes de prosseguir.

Etapa 6: Verifique se sua página de login é compatível com dispositivos móveis

Toda página que você publica deve ser responsiva para dispositivos móveis, ou é mais difícil para usuários de telefone fazerem login. Os modelos do SeedProd são responsivos e uma ferramenta de visualização permite que você verifique.

Clique no ícone de visualização móvel na parte inferior da tela para ver sua página como os usuários de telefone a veriam.

Você pode continuar editando em qualquer visualização, e o SeedProd salva as alterações em ambas.

Etapa 7: Publique sua Página de Login Personalizada do WordPress

Quando estiver satisfeito com a página, clique na seta para baixo ao lado do botão verde Salvar e selecione Publicar.

Um pop-up confirma que a página está no ar. Clique em Ver Página ao Vivo para visualizá-la.

O último passo é ativar o modo Página de Login. Saia do construtor, então, sob o título Página de Login, mude o seletor para Ativo.

Agora, qualquer pessoa que visitar sua página de login do WordPress verá seu design personalizado.

Personalizar a Página de Login do WordPress Usando WPForms

O segundo método usa o WPForms, o melhor construtor de formulários de arrastar e soltar para WordPress. O que você talvez não saiba é que seu complemento de Formulário de Registro de Usuário pode criar um formulário de login para o seu site.

Com milhões de sites usando o WPForms para criar formulários mais inteligentes, você está em boas mãos. O WPForms faz parte da família de produtos da Awesome Motive, assim como o SeedProd.

Se você deseja um formulário de login em vez de uma página inteira, siga este guia sobre como criar um formulário de login personalizado do WordPress com o WPForms. Ele também cobre como adicionar um link de "esqueci minha senha" e exibir o formulário com um shortcode.

Como Personalizar a Página de Login do WordPress Manualmente

É possível personalizar a página de login do WordPress sem um plugin? Sim. Você pode adicionar código ao arquivo functions.php do seu tema ou a um plugin específico do site, embora isso exija algum conforto com código e ofereça menos controle do que um construtor visual.

Se você é novo nisso, leia este guia sobre como adicionar trechos de código no WordPress para não quebrar seu site acidentalmente.

O trecho abaixo reestiliza a tela de login e troca o logotipo. Edite os valores de cor e o caminho do logotipo para corresponder à sua marca e, em seguida, adicione-o ao functions.php:

// Custom WordPress login page styles
function clp_login_head() { ?>
    <style>
        /* Replace the default logo */
        .login h1 a {
            background-image: url('https://example.com/wp-content/uploads/your-logo.png');
            background-size: contain;
            width: 320px;
            height: 80px;
        }
        /* Link colors */
        .login #nav a,
        .login #backtoblog a { color: #0073aa !important; }
        /* Submit button */
        .login .button-primary {
            background: #0073aa;
            border-color: #0073aa;
        }
    </style>
<?php }
add_action( 'login_head', 'clp_login_head' );

// Point the logo link to your home page instead of wordpress.org
function clp_login_url() { return home_url(); }
add_filter( 'login_headerurl', 'clp_login_url' );

// Change the logo hover/title text
function clp_login_title() { return get_bloginfo( 'name' ); }
add_filter( 'login_headertext', 'clp_login_title' );

Isso altera o logotipo, o link para o qual ele aponta e as cores do formulário em sua página de login existente. Se você preferir evitar o código completamente, o método SeedProd acima faz o mesmo trabalho no editor visual.

Exiba seu formulário de login do WordPress em qualquer lugar sem um plugin

Para exibir o formulário de login do WordPress em qualquer página ou modelo, sem um plugin ou widget, adicione isto ao arquivo de modelo do seu tema:

<?php wp_login_form(); ?>

Isso gera o formulário de login padrão onde você colocar o código. Para personalizar os rótulos, o redirecionamento e as opções de campo, passe argumentos em vez disso:

<?php
$args = array(
    'echo'           => true,
    'redirect'       => home_url(), // where to send users after login
    'form_id'        => 'loginform',
    'label_username' => __( 'Username' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'remember'       => true,
);
wp_login_form( $args );
?>

Você pode alterar o CSS ao redor deste formulário para corresponder ao resto do seu site.

Como Mudar o Logo de Login do WordPress?

Você nem sempre precisa de uma página personalizada completa. Às vezes, alterar o logotipo e o link por trás dele é suficiente, e um plugin gratuito cuida disso sem código.

Instale e ative o plugin Colorlib Login Customizer. Em seguida, vá para Aparência » Personalizar e clique no novo item Colorlib Login Customizer.

O personalizador carrega sua tela de login com as configurações à esquerda e uma visualização ao vivo à direita. Clique na guia Opções de logotipo.

A partir daí, você pode ocultar o logotipo do WordPress, carregar o seu próprio e alterar seu URL e texto. Você também pode ajustar o tamanho, a largura e a altura do logotipo.

Você pode ir mais longe com colunas, imagens de fundo e cores personalizadas. Publique as alterações assim que estiver satisfeito com o novo logotipo.

Como Proteger sua Página de Login Personalizada?

Uma página de login com sua marca também é um alvo mais visível, então vale a pena protegê-la assim que ela tiver a aparência certa. Alguns passos reduzem as tentativas de força bruta e os bots.

• Altere o URL de login: Mova o login para longe do óbvio wp-login.php. Veja como alterar o URL de login do seu administrador do WordPress.
• Limite as tentativas de login: Defina quantas vezes alguém pode tentar uma senha antes de ser bloqueado, o que impede a maioria dos ataques de força bruta.
• Use mensagens de erro genéricas: "Nome de usuário inválido" informa a um invasor qual metade ele acertou. Uma mensagem mais vaga revela menos.
• Adicionar autenticação de dois fatores: Um segundo código além da senha impede que uma senha roubada seja suficiente por si só.

Nos meus próprios sites, mudar o URL de login é a primeira coisa que faço, pois impede a maioria dos ataques automatizados antes mesmo de chegarem ao formulário.

Como Testar sua Página de Login Personalizada?

Antes de considerar pronto, faça um teste rápido para que um erro de digitação não bloqueie seus usuários. Eu sempre saio e tento a página do zero, da maneira que um visitante real faria.

• Carregamento da página: Verifique se a página carrega sem problemas, sem elementos quebrados.
• Logo e design: Confirme se o novo logo e a estilização aparecem como esperado.
• Teste de login: Faça login com seu nome de usuário e senha e certifique-se de que funciona.
• Mensagens de erro: Insira credenciais erradas e verifique se o erro é exibido corretamente.
• Esqueci a senha: Inicie uma redefinição e confirme se o e-mail chega com um link funcional.
• URL personalizado: Se você definiu um URL personalizado, confirme se ele aponta para a nova página de login. Não tem certeza de onde está o seu? Veja como encontrar seu URL de login do WordPress.
• Responsividade: Abra a página no celular, tablet e desktop para verificar se ela fica correta em todos os lugares.

Perguntas Frequentes sobre Personalização da Página de Login do WordPress

É possível personalizar a página de login do WordPress sem um plugin?

Sim. Você pode estilizar a tela de login existente adicionando CSS e alguns ganchos ao arquivo functions.php do seu tema ou a um plugin específico do site. Isso altera o logo, o link por trás dele e as cores do formulário sem instalar um construtor de páginas.

A desvantagem é que exige algum conhecimento de código e oferece menos controle de design do que uma ferramenta visual. Para uma reformulação completa sem código, um construtor como o SeedProd é mais fácil.

Como altero o logo de login do WordPress sem código?

Instale um plugin gratuito de personalização de login, como o Colorlib Login Customizer, depois vá em Aparência » Personalizar e abra suas configurações. Na aba Opções de Logo, você pode ocultar o logo do WordPress, fazer upload do seu próprio, e definir o link e o tamanho.

Tudo é atualizado em uma pré-visualização ao vivo, então você vê o novo logo antes de publicar. O modo Página de Login do SeedProd também permite que você insira um bloco de logo se quiser redesenhar a página inteira.

É seguro personalizar a página de login do WordPress?

Sim, personalizar a página de login é seguro quando você usa um plugin confiável ou código cuidadoso. Isso altera a aparência da página, não como o WordPress autentica os usuários, então sua segurança não é enfraquecida pelo design em si.

Uma página personalizada é um bom momento para adicionar proteção real também. Mudar o URL de login, limitar as tentativas de login e ativar a autenticação de dois fatores reduzem o risco de ataques de força bruta.

Como adiciono login social à página de login do WordPress?

O login social permite que as pessoas façam login com uma conta existente do Google ou Facebook em vez de uma senha separada do WordPress. Você o adiciona com um plugin dedicado de login social que se conecta a esses serviços.

Isso reduz o atrito no cadastro, pois os usuários evitam criar e lembrar de outra senha. Uma vez configurado o plugin, você pode colocar os botões de login social em sua página de login personalizada ao lado do formulário padrão.

Comece a personalizar sua página de login do WordPress

Essa tela de login padrão não precisa mais saudar seus membros. Com o SeedProd, você pode alterar cores, fontes, logotipo e layout sem escrever nenhum código, e ter uma página de login com sua marca publicada em minutos.

Comece a usar o SeedProd e personalize sua página de login.

Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.