{"id":806,"date":"2026-09-14T09:33:11","date_gmt":"2026-09-14T09:33:11","guid":{"rendered":"https:\/\/100porcentowp.com.br\/central-de-ajuda\/cms\/login-personalizado-wordpress-como-criar-sem-plugin\/"},"modified":"2026-09-14T09:33:11","modified_gmt":"2026-09-14T09:33:11","slug":"login-personalizado-wordpress-como-criar-sem-plugin","status":"publish","type":"post","link":"https:\/\/100porcentowp.com.br\/central-de-ajuda\/acesso-e-login\/login-personalizado-wordpress-como-criar-sem-plugin\/","title":{"rendered":"Login personalizado WordPress: como criar sem plugin"},"content":{"rendered":"

Voc\u00ea abre a tela de login do WordPress e l\u00e1 est\u00e1 ela: a mesma logo do WordPress, o mesmo azul, o mesmo formul\u00e1rio gen\u00e9rico. Para quem gerencia v\u00e1rios sites de clientes, isso n\u00e3o \u00e9 s\u00f3 fei\u00fara. \u00c9 uma quebra de identidade visual e, muitas vezes, um ponto de confus\u00e3o para o usu\u00e1rio final. Criar um login personalizado WordPress sem plugin \u00e9 poss\u00edvel e mais simples do que parece, mas exige cuidado com o que voc\u00ea mexe e onde mexe.<\/p>\n

O que d\u00e1 para personalizar em um login personalizado WordPress sem plugin<\/h2>\n

Praticamente tudo o que aparece na tela de login pode ser alterado via c\u00f3digo: a imagem de fundo, a logo acima do formul\u00e1rio, as cores, o link do logo, o texto do t\u00edtulo, a mensagem de rodap\u00e9 e at\u00e9 o endere\u00e7o para onde o usu\u00e1rio vai depois de errar a senha. Isso \u00e9 feito com hooks nativos do WordPress e uma folha de estilo carregada s\u00f3 naquela p\u00e1gina.<\/p>\n

O WordPress oferece ganchos espec\u00edficos para a tela de login. Os mais usados s\u00e3o login_enqueue_scripts<\/code>, para carregar CSS e JavaScript, login_headerurl<\/code>, para mudar o link do logo, e login_headertext<\/code>, para alterar o texto exibido nesse link. A documenta\u00e7\u00e3o oficial lista todos eles em developer.wordpress.org<\/a>.<\/p>\n

Passo a passo para personalizar a tela de login<\/h2>\n

Antes de qualquer coisa, crie um tema filho. Mexer no functions.php<\/code> do tema pai significa perder tudo na pr\u00f3xima atualiza\u00e7\u00e3o. Se voc\u00ea j\u00e1 tem um tema filho ativo, siga para o pr\u00f3ximo passo.<\/p>\n

    \n
  1. Crie o tema filho.<\/strong> Na pasta \/wp-content\/themes\/<\/code>, crie uma pasta com um style.css<\/code> contendo o cabe\u00e7alho com Template:<\/code> apontando para o tema pai. Ative o tema filho no painel.<\/li>\n
  2. Abra o functions.php do tema filho.<\/strong> Voc\u00ea pode editar pelo painel em Apar\u00eancia \u2192 Editor de arquivos do tema ou por FTP\/SSH. Se usar o editor do painel, cuidado: um erro de sintaxe derruba o site. Tenha acesso por FTP antes de salvar.<\/li>\n
  3. Adicione o hook para carregar o CSS.<\/strong> Cole o c\u00f3digo abaixo, ajustando o caminho conforme a estrutura do seu tema filho:<\/li>\n<\/ol>\n
    function meu_login_custom_css() {\n    wp_enqueue_style( 'meu-login-css', get_stylesheet_directory_uri() . '\/login-custom.css' );\n}\nadd_action( 'login_enqueue_scripts', 'meu_login_custom_css' );<\/code><\/pre>\n
    Esse c\u00f3digo diz ao WordPress para carregar um arquivo login-custom.css<\/code> que fica na raiz do tema filho, mas apenas na tela de login. Isso evita peso extra nas outras p\u00e1ginas.<\/p>\n
      \n
    1. Crie o arquivo login-custom.css.<\/strong> Na mesma pasta do tema filho, crie o arquivo e adicione as regras. Exemplo para trocar a logo e o fundo:<\/li>\n<\/ol>\n
      body.login {\n    background-color: #f0f0f0;\n    background-image: url('https:\/\/seusite.com\/wp-content\/uploads\/fundo-login.jpg');\n    background-size: cover;\n}\n.login h1 a {\n    background-image: url('https:\/\/seusite.com\/wp-content\/uploads\/logo-cliente.png');\n    background-size: contain;\n    width: 200px;\n    height: 80px;\n}\n.login form {\n    border-radius: 8px;\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}<\/code><\/pre>\n
      Use as classes nativas da tela de login. Elas est\u00e3o documentadas no Codex do WordPress<\/a>, que ainda serve como refer\u00eancia para a estrutura HTML.<\/p>\n
        \n
      1. Altere o link e o texto do logo.<\/strong> No functions.php<\/code> do tema filho, adicione:<\/li>\n<\/ol>\n
        function meu_login_logo_url() {\n    return home_url();\n}\nadd_filter( 'login_headerurl', 'meu_login_logo_url' );\n\nfunction meu_login_logo_title() {\n    return 'Voltar para o site';\n}\nadd_filter( 'login_headertext', 'meu_login_logo_title' );<\/code><\/pre>\n
        Por padr\u00e3o, o logo aponta para wordpress.org. Mudar isso mant\u00e9m o usu\u00e1rio no seu dom\u00ednio e evita que ele saia sem querer.<\/p>\n
          \n
        1. Teste em uma janela an\u00f4nima.<\/strong> Abra seusite.com\/wp-login.php<\/code> em uma aba an\u00f4nima para garantir que o CSS est\u00e1 sendo carregado e que nenhum cache est\u00e1 servindo a vers\u00e3o antiga.<\/li>\n<\/ol>\n
          Quando usar plugin em vez de c\u00f3digo<\/h2>\n
          Nem todo mundo deve fazer isso na m\u00e3o. A decis\u00e3o depende de tr\u00eas fatores: frequ\u00eancia com que voc\u00ea mexe nessa tela, quantidade de sites que administra e conforto com c\u00f3digo.<\/p>\n\n\n\n\n\n\n\n\n
          Cen\u00e1rio<\/th>\nMelhor caminho<\/th>\n<\/tr>\n<\/thead>\n
          Um site, personaliza\u00e7\u00e3o simples, sem pressa<\/td>\nC\u00f3digo no tema filho<\/td>\n<\/tr>\n
          V\u00e1rios clientes, cada um com identidade pr\u00f3pria<\/td>\nPlugin leve ou solu\u00e7\u00e3o centralizada<\/td>\n<\/tr>\n
          Equipe sem desenvolvedor dispon\u00edvel<\/td>\nPlugin com interface visual<\/td>\n<\/tr>\n
          Necessidade de recursos avan\u00e7ados (2FA, captcha, limites de tentativa)<\/td>\nPlugin especializado<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
          Se voc\u00ea administra dezenas de sites, repetir o mesmo c\u00f3digo em cada tema filho vira manuten\u00e7\u00e3o insustent\u00e1vel. Nesse caso, um plugin leve que aplique o mesmo estilo em toda a rede, ou um painel de gest\u00e3o que permita padronizar a experi\u00eancia de login, economiza tempo e reduz erro humano. \u00c9 o tipo de decis\u00e3o que parece pequena, mas se multiplica quando o n\u00famero de sites cresce.<\/p>\n
          O risco que ningu\u00e9m comenta: atualiza\u00e7\u00f5es que quebram a personaliza\u00e7\u00e3o<\/h2>\n
          Personaliza\u00e7\u00e3o via c\u00f3digo depende da estrutura HTML da tela de login. O WordPress muda essa estrutura de tempos em tempos. Uma atualiza\u00e7\u00e3o de vers\u00e3o pode alterar classes CSS ou a ordem dos elementos, e sua tela bonita vira um formul\u00e1rio desalinhado da noite para o dia.<\/p>\n
          Por isso, antes de aplicar qualquer atualiza\u00e7\u00e3o no core, fa\u00e7a um teste em ambiente de staging ou pelo menos uma verifica\u00e7\u00e3o r\u00e1pida na tela de login depois de atualizar. Se voc\u00ea gerencia v\u00e1rios sites, esse cuidado precisa ser sistem\u00e1tico. Um checklist de seguran\u00e7a no painel WordPress antes de atualizar<\/a> ajuda a n\u00e3o ser pego de surpresa.<\/p>\n
          Al\u00e9m disso, se o CSS for carregado com caminho absoluto ou depender de um plugin de cache, uma limpeza de cache pode fazer a tela voltar ao padr\u00e3o. Sempre que alterar algo, limpe o cache do site e do navegador antes de concluir que quebrou.<\/p>\n
          Erros comuns ao personalizar o login sem plugin<\/h2>\n