[{"data":1,"prerenderedAt":15},["ShallowReactive",2],{"post-tela-de-login-personalizada-wordpress":3},{"id":4,"imagem":5,"titulo":6,"slug":7,"tags":8,"date":12,"resumo":13,"artigo":14},1,"\u002Fimagens\u002Fblog\u002Ftiago-bernardes-tela-login-personalizada-wordpress-tiago-bernardes.webp","Personalizando a tela de login do wordpress sem uso de plugin","tela-de-login-personalizada-wordpress",[9,10,11],"php","wordpress","frontend","22\u002F08\u002F2025","Tem como fazer de uma forma bem simples uma tela de login do wordpress personalizada, sem a necessidade de instalar plugin[...]","\u003Ch3>Deixe sua tela de login do wordpress com a aparência do seu projeto\u003C\u002Fh3>\n\u003Cp>Na atualidade é comum encontrar plugins que fazem esse tipo de função. Geralmente é muito fácil o uso de plugin mas muitas vezes desnecessário. Contudo, para fazer uma tela de login do \u003Ca href=\"https:\u002F\u002Fbr.wordpress.org\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"wordpress (abre numa nova aba)\">wordpress\u003C\u002Fa> personalizada, não há necessidade de plugin.\u003C\u002Fp>\n\u003Cp>Com esse pequeno código abaixo, você pode personalizar a tela de login do seu wordpress.\u003C\u002Fp>\n\u003Ch3>Para que tudo aconteça...\u003C\u002Fh3>\n\u003Cp>Vamos incluir código a seguir no arquivo \u003Cstrong>functions.php\u003C\u002Fstrong> do seu tema. Existem duas formas de alterar o arquivo:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Via painel do wordpress em \u003Cstrong>Aparência\u003C\u002Fstrong> > \u003Cstrong>Editor\u003C\u002Fstrong>\u003C\u002Fli>\n\u003Cli>Acessando o arquivo via \u003Cstrong>FTP\u003C\u002Fstrong> acesse o caminho \u003Cstrong>wp-content\u003C\u002Fstrong> > \u003Cstrong>themes\u003C\u002Fstrong> > \u003Cstrong>SEU TEMA\u003C\u002Fstrong> > \u003Cstrong>functions.php\u003C\u002Fstrong> e utilizando um editor de código (VS Code, Sublime Text, etc...).\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>Insira o código abaixo no final do do arquivo \u003Cstrong>functions.php\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre><?php\n\u002F\u002FLogo customizada na pagina de login (admin)\nfunction cutom_login_logo() {\necho \"<style type=\\\"text\u002Fcss\\\">\nbody.login {background:#ffffff!important; height:auto; margin: 0; background-size:100%;}\n#login {padding: 3% 0 0!important;}\nbody.login div#login h1 a {\nbackground-image: url(\".get_bloginfo('template_directory').\"images\u002Flogo.webp);\n-webkit-background-size: 95%;\nbackground-size: 95%;\nmargin: 0 auto;\nwidth: 164px;\nheight:60px;\nbackground-color:#fff;\n}\n#backtoblog {margin: 0 0!important; padding-bottom:30px!important;}\n<\u002Fstyle>\";\n}\nadd_action( 'login_enqueue_scripts', 'cutom_login_logo' );\nadd_filter('login_headerurl', create_function('', 'return \"http:\u002F\u002Fwww.seusite.com.br\";'));\nadd_filter('login_headertitle', create_function('', 'return \"Nome do Site\";'));\n\n?>\u003C\u002Fpre>\n\u003Cp>Com este código é possível substituir a logo do wordpress e alterar alguns estilos como background da logo e background da tela em si.\u003C\u002Fp>\n\u003Cp>Na linha 9, o caminho que a logo precisa se encontrar é a pasta images do seu tema.\u003Cbr \u002F>As linhas 13 e 14, são largura e altura exatas da sua logo. \u003Cbr \u002F>Insira a URL do seu site na linha 21 e o nome do seu site na linha 22.\u003C\u002Fp>\n\u003Cp>Estas são apenas algumas classes CSS da tela de login, você tem várias possibilidades de personalização como alterar cores de inputs e textos.\u003C\u002Fp>\n\u003Cp>Se você sabe e\u002Fou já usou alguma outra forma de personalizar a tela de login, compartilhe conosco nos comentários.\u003C\u002Fp>\n\u003Cp>Bora compartilhar conhecimento! Até o próximo post.\u003C\u002Fp>\n\n",1780414804172]