Veja como alterar o logo da página de login do WordPress. É exibido o logo do WordPress por padrão, mas é possível colocar a imagem que você quiser (desde que respeite as dimensões máximas). A alteração do Logo deixa o WordPress mais personalizado.
Dimensões do Logo
O Logo não deve ultrapassar as dimensões 80 pixels de altura por 80 pixels de largura. Se a imagem tiver exatamente essa dimensão, melhor ainda. Para informar um valor diferente deste é preciso modificar o código CSS para que a imagem seja exibida corretamente na página.
Inserindo a Nova Imagem
Siga os seguintes passos para inserir a nova imagem:
- Crie uma nova imagem com exatamente 80 x 80 pixels.
- Salve a imagem na pasta de imagens do seu tema. Provavelmente, será na pasta 'wp-content/themes/{seu tema}/images'.
- Abra o arquivo functions.php do seu tema. Ele fica no diretório 'wp-content/themes/{seu tema}'.
- Adicione o código abaixo no arquivo aberto:
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
height:65px;
width:320px;
background-size: 320px 65px;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
Customizando título e url do site
Se além da logo você deseja personalizar também o título e link da página de login, adicione o código abaixo:
function my_login_logo_url() {
return home_url(); // A url da logo vai ser o endereço da página inicial do site
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
return 'Nome do seu site e informações adicionais';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Deu super certo aqui! O código continua funfando! Obrigada Lucas!
Eu consegui fazer. Ficou show de bola
estou tentando alterar a logo do wordpress e esta aparecendo esta mensagem
Olá Ronaldo,
Acho que você colocou o código no local errado.
Pessoal seguem as correções feita no código.
Correção "cutom_login_logo" e não "custom_login_logo"
Muito Obrigado Lucas.
//Custom WordPress Login Logo by WpTotal.com.br function cutom_login_logo() { echo " body.login div#login h1 a { background-image: url(".get_bloginfo('template_directory')."/images/logo.png); -webkit-background-size: auto; background-size: auto; margin: 0 0 25px; width: 320px; } "; } add_action( 'login_enqueue_scripts', 'cutom_login_logo' ); add_action('login_head', 'cutom_login_logo'); function meu_wp_login_url() { return get_bloginfo('url'); } add_filter('login_headerurl', 'meu_wp_login_url'); function meu_wp_login_title() { return get_bloginfo('name'); } add_filter('login_headertitle', 'meu_wp_login_title');
Boa noite!
Estou com um problema, inseri o codigo e travou tudo, nao consigo acessar nem fazer login no wordpress, alguem poderia me ajudar?
Olá Clayton,
Dá uma olhada no artigo https://www.wptotal.com.br/como-corrigir-tela-branca-wordpress/. Ele deve ajudar você.
Espero ter ajudado.
Boa tarde Lucas,
Olha o erro que está apresentando o meu site.
http:// edudesigner .com.br/wp-login.php
Não estou conseguindo resolver isso.
Olá Eduardo,
Parece que o código do seu site está sem a tag <style>. Dá uma olhada no código css do artigo acima, você vai notar que ele está dentro da tag style.
Espero ter ajudado.
Bom dia, o erro do código corrigi, mas a imagem insiste em não aparecer, já conferi todo o caminho, código e não sei o que está havendo.
Olá Eduardo,
O endereço da imagem está errado.
Mude a url de:
http://public_html/wp-content/uploads/2015/12/logo_edu_admin-1.png
para:
http://edudesigner.com.br/wp-content/uploads/2015/12/logo_edu_admin-1.png
Lucas, muito obrigado, agora deu certo, muito obrigado pela sua disponibilidade de ensinar e desculpa o incomodo desses dias.
Boa noite, estou tentando mudar mais da um erro na página de acesso.
Escrevi o código desse modo.
//Custom WordPress Login Logo by cteavirtual.com.br function custom_login_logo() { echo " body.login div#login h1 a { background-image: url(http://cteavirtual.com.br/wp-content/themes/gera-loja/logo_ctea_login_02.png); -webkit-background-size: auto; background-size: auto; margin: 0 0 25px; width: 320px; } "; } add_action( 'login_enqueue_scripts', 'custom_login_logo' ); add_action('login_head', 'custom_login_logo'); function meu_wp_login_url() { return get_bloginfo('url'); } add_filter('login_headerurl', 'meu_wp_login_url'); function meu_wp_login_title() { return get_bloginfo('name'); } add_filter('login_headertitle', 'meu_wp_login_title');
Olá Eduardo,
Parece que você já conseguiu resolveu o problema. Se ainda tiver alguma dúvida me avise.
Boa noite, ainda não deu certo, já entrei no site, no arquivo e não consigo encontrar o erro
Ola Lucas,
Muito obrigado, deu certo, eu realmente esta usando outro file pra modificar o PHP, contudo apos inumeras tentativas eu consegui!
Muito Grato!
Ola Lucas,
Eu inseri o seu Code conforme apresentado e assim logo e tudo mais, depois que eu fiz o logout e posteriormente o login, surgiu essa mensagem abaixo:
Contudo nao consigo logar mais, ja tentei restaurar no servidor e alterar a page pelo servidor tambem, mas sem sucesso.
Agradeco a ajuda se possivel!
Olá Jimmy,
O código deve ser inserido depois do <?php e antes do ?>, caso contrário ele é interpretado como um simples HTML. Para resolver o problema, vá até o cliente FTP ou Gerenciador de Arquivos fornecido pela hospedagem, abra o arquivo que você alterou (functions.php) e mude o código de lugar. Se tiver alguma dúvida, poste aqui novamente.
Abraço.
Deu certo aqui. Muito obrigado pelo artigo. Parabéns!!!
show, fufa perfeitamente!!!
Muito Obrigado!!!
Estou apanhando aqui sumiu a imagem ... mais não entra a que eu preciso... se puderem ajudar agradeço
Crie uma basta images dentro do seu tema e coloque o logo.png dentro
Olá Lucas
Coloquei os dois códigos, assim como informado, porém não aparece nenhuma imagem, inclusive sumiu a logo do WP.
A imagem que quero utilizar está salva aqui em http:// chiquesemarrentas .com.br/wp-content/uploads/2015/05/LOGO.png
o Código coloquei assim:
//Custom WordPress Login Logo by WpTotal.com.br function cutom_login_logo() { echo " body.login div#login h1 a { background-image: url(".get_bloginfo('template_directory')."/images/LOGO.png); -webkit-background-size: auto; background-size: auto; margin: 0 0 84px; width: 320px; } "; } add_action( 'login_enqueue_scripts', 'cutom_login_logo' );
Olá José,
Esse código CSS chama uma imagem da pasta "wp-content/themes/Divi/images/" sendo que a mesma encontra-se na pasta uploads. O ideal, por questão de organização, é você colocar ela na pasta do tema e não uploads.
Para funcionar desta maneira, você teria que alterar o background-image para:
background-image: url(/wp-content/uploads/2015/05/LOGO.png);
Espero ter ajudado.
Aqui o código funcionou perfeitamente, muito obrigado pela sua dica.
O primeiro código trocou a imagem e o segundo que você disse que não testou muito trocou a url.
Muito simples, valeu e parabéns pelo site.
Aonde que ponha isso nao consigo tem que baixar ?
Olá Gustavo,
Tem que abrir o arquivo functions.php do seu tema e colocar esse código. Não precisa baixar nada.
Abraços.
Para quem quiser personalizar a logo e tirar aquele "Powered by WordPress" que fica no hover da logo, o código abaixo uso na minha página e deu certo:
<div style="background: #DFDDDD;padding: 10px;"> //Custom WordPress Login Logo by WpTotal.com.br function custom_login_logo() { echo " body.login div#login h1 a { background-image: url(".get_bloginfo('template_directory')."/images/peccin.png); -webkit-background-size: auto; background-size: auto; margin: 0 0 25px; width: 320px; } "; } add_action( 'login_enqueue_scripts', 'custom_login_logo' ); add_action('login_head', 'custom_login_logo'); function meu_wp_login_url() { return get_bloginfo('url'); } add_filter('login_headerurl', 'meu_wp_login_url'); function meu_wp_login_title() { return get_bloginfo('name'); } add_filter('login_headertitle', 'meu_wp_login_title'); </div>
Aqui comigo a imagem ficou minúscula.
As dimensões estão exatamente 67 x 323, pra ficar excelente, como você postou: "O Logo não deve ultrapassar as dimensões 67 pixels de altura por 323 pixels de largura. Se a imagem tiver exatamente essa dimensão, melhor ainda."
Infelizmente ficou bem ruim.
Sabe o que pode ser?
Olá Carlos,
Realmente estava com este problema. Modifiquei o código CSS para corrigir isso (código do artigo foi atualizado). Note que eu também atualizei a informação da dimensão da imagem. Provavelmente tenha parado de funcionar depois de alguma atualização do WordPress, mas agora já esta OK.
Se continuar tendo problemas, me avise para que eu possa ajudá-lo.
Abraços.
Lucas, show de bola!
Agora funcionou perfeitamente.
Muito obrigado!
A imagem simplesmente sumiu
Talvez você tenha informado o path da imagem errado no código css.
No exemplo acima, a imagem se chama logo.png e está armazenada na pasta "images". Caso no seu tema esteja diferente, é preciso fazer as devidas alterações no código css para chamar a imagem corretamente.
Abraços.
Lucas, esta tudo ok, apenas uma questão, quando você passa com o mouse sobre o novo logo, tem a mensagem "criado com wordpress" e tem o link para o site do wordpress. Tem como alterar essa situação?
Olá Luís,
Na logo do meu site aparece diferente, as informações mostradas são a do próprio site e não a do WP. Qual versão do WordPress você usa?
Lucas,
Versão 4.0, vou confirmar nas opções do meu WP.
Obrigado 🙂
Olá Luís,
Olhando o core do WordPress descobri que ele exibe os dados do site somente quando é multisites (que é o meu caso)!
Para alterar o título e link da página de login basta adicionar o seguinte código no arquivo functions.php do seu tema:
<div style="background: #DFDDDD;padding: 10px;"> //Trocando a url do logo na tela de login add_filter('login_headerurl', create_function('', 'return "http://{nova url do logo}";')); //Trocando o título do logo na tela de login add_filter('login_headertitle', create_function('', 'return "Novo Título do Logo";')); </div>
Fiz esse código aqui rapidamente, não deu tempo de fazer muitos testes. Qualquer problema me avise.
Abraços.
Faltou um diretório no caminho até a imagem.
background-image: url(".get_bloginfo('template_directory')."/assets/images/logo.png);
Olá Plinio,
Obrigado pela colaboração. Esse caminho vai depender da estrutura de pastas do tema usado no site.