A dica de hoje vai ser de como alterar a tela de login do WordPress sem Plugin, eu vou mostrar com apenas três funções vocês poderam alterar o logo de apresentação o link e o title do mesmo.
Bem vamos começar alterando o logo, o principal arquivo e o único que vamos trabalhar vai ser o functions.php do seu tema ativo.
Na última linha do arquivo functions.php vamos adicionar o seguinte código:
//Alterar o logo tela de login
function chr_style_personalizado() { ?>
<style>
body.login div#login h1 a {
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'chr_style_personalizado' );
Como vocês podem ver nas linhas 4,5 e 6 eu adicionei o style que é referente ao logo, mas existe outros styles que são referentes a página de Login também que são:
body.login {
}
body.login div#login {
}
body.login div#login h1 {
}
body.login div#login h1 a {
}
body.login div#login form#loginform {
}
body.login div#login form#loginform p {
}
body.login div#login form#loginform p label {
}
body.login div#login form#loginform input {
}
body.login div#login form#loginform input#user_login {
}
body.login div#login form#loginform input#user_pass {
}
body.login div#login form#loginform p.forgetmenot {
}
body.login div#login form#loginform p.forgetmenot input#rememberme {
}
body.login div#login form#loginform p.submit {
}
body.login div#login form#loginform p.submit input#wp-submit {
}
body.login div#login p#nav {
}
body.login div#login p#nav a {
}
body.login div#login p#backtoblog {
}
body.login div#login p#backtoblog a {
}
Mas o nosso foco nesse tutorial é alterar o logo padrão do WordPress, então vamos dar continuação. Após adicionar a função vamos adicionar o nosso logo personalizado, o padrão do WordPress é largura de 274px e a altura de 63px. Se seu logo tiver essas mesmas proporções então é só adicionar o seguinte estilo:
body.login div#login h1 a {
background-image: url(<?php bloginfo('template_url');?>/images/logo.png');
}
Se o seu logo for mas alto do que o padrão então precisaremos adicionar os seguintes estilos:
body.login div#login h1 a {
background-image: url('<?php bloginfo('template_url');?>/images/logo.png');
background-size: auto;
width: 126px;
height: 126px;
}
Como vocês podem ver nas linhas 3, 4 e 5 eu adicionei o background-size e o width – height e porque eu tive que adicionar o background-size??? Eu vou explicar o porque.
De padrão o WordPress já tem um tamanho predeterminado que é “background-size: 274px 63px;” então se deixarmos sem essa opção de “background-size: auto;” o seu logo irá ficar todo distorcido e feio, para finalizar essa parte eu adicionei o tamanho da imagem original que era “width: 126px; height: 126px;” ou se você preferir pode colocar a altura e a largura que desejar.
Pronto agora com o nosso logo personalizado finalizado, vamos para a segunda parte do tutorial que é como adicionar a url junto com o title do nosso projeto, primeiro de tudo no seu arquivo functions.php vamos adicionar as seguintes funções:
//URL do logo da tela de login
function chr_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'chr_logo_url' );
//Title do logo da tela de login
function chr_logo_title() {
return get_bloginfo( 'name' );
}
add_filter( 'login_headertitle', 'chr_logo_title' );
Como vocês viram na linha 3 eu coloquei o “get_bloginfo( ‘url’ );” com isso ele automaticamente irá pegar o link do seu site e adicionar no logo que acabamos de personalizar já na linha 9 eu apliquei o get_bloginfo( ‘name’ ); com essa função ele irá pegar o title do seu site, mesmo futuramente se você trocar o mesmo irá mudar automaticamente, você não precisa de se preocupar em ficar alterando.
Espero que vocês tenham gostado deste post e até breve, por favor se gostou compartilha o post e se tiver dúvida ou sugestão, por favor deixe um comentário. Até Mais…
