Como colocar sua logo na página de log in do WordPress

Como colocar sua logo na página de log in do WordPress

Certamente, uma das grandes vantagens do WordPress é que qualquer pessoa, seja ela conhecedora de programação ou não, consegue personalizar seu site ou blog do jeito que quiser. Neste post quero mostrar as formas de colocar sua logo na página de log in do WordPress.

Página de log in do WordPress

Formas de colocar sua logo na página de log in do WordPress

Basicamente, existem duas formas de colocar sua logo na página de log in do WordPress, usando algum plugin ou modificando através de códigos.

Através de plugins

Decerto, essa é a forma mais fácil de alguém colocar sua logo na página de log in do WordPress. Não será necessário utilizar código algum. Tudo que você precisa fazer ir na galeria de plugins no próprio WordPress e procurar. Navegando pela internet encontrei três plugins que oferecem esse recurso.

LoginPress

O LoginPress é um plugin mais completo. Com ele você pode ir mais além do que só colocar sua logo. Você pode personalizar completamente a página de log in do WordPress. Por exemplo, você pode alterar a imagem de fundo, mudar cores e posicionamento de alguns elementos na tela e muito mais.

O plugin possui uma versão paga, com ela você obtém os recursos premiums, como por exemplo, mudar a fonte, colocar reCaptcha para aumentar a segurança, além disso, a versão pro adiciona temas pré-configuradas, caso você não queira configurar algo do zero.

Página de personalização do plugin LoginPress

Custom Login Page Customizer

Assim como o LoginPress, o plugin Custom Login Page Customizer by Colorlib oferece mais recursos do que só colocar sua logo, com esse plugin você pode alterar, por exemplo, a cor de fundo ou adicionar uma imagem de fundo, cores, tamanho do formulário e muito mais. Ele também oferece temas pré-configurados, entretanto, é muito menos do que o plugin LoginPress.

Diferentemente do plugin LoginPress, o plugin Custom Login Page Customizer não possui uma versão paga, ou seja, todos os recursos ofertados pelo plugin são gratuitos.

Página de personalização do plugin Custom Login Page Customizer

Change WordPress Login Logo

Os dois primeiros plugins são mais robustos, oferecem mais recursos. Separei esse plugin para aqueles que querem ser mais objetivos, ou seja, desejam somente colocar a sua logo na página de log in do WordPress.

O plugin Change WordPress Login Logo é bem simples de configurar. Tudo que você precisa fazer é fazer upload da sua logo. Além disso, você pode definir a altura e largura da logo.

Página de personalização do plugin  Change WordPress Login Logo

Através de código

Para aqueles que não querem colocar mais um plugin no seu site ou blog, consequentemente, adicionar mais um requisição, fazendo o site ficar lento. A solução pode ser colocar sua logo na página de log in do WordPress através de códigos.

Não é preciso ser expert em programação para adicionar um trecho de código mas é importante saber localizar o arquivo certo e não apagar nenhum código, pois isso pode comprometer o tema do seu site.

Forma não muito recomendada

No painel de administração do WordPress, você tem a possibilidade de modificar os arquivos do tema usando o Editor de temas. Você pode encontrar esse recurso no menu lateral, só ir em Aparência e em seguida, Editor de temas. O próprio WordPress recomenda que não faça isso por este método.

Página de Edição de arquivos do tema

Mesmo com a recomendação vamos prosseguir clicando em “Eu entendo”. Em seguida, você deve localizar na tela a seção que estará com título “Arquivos do tema”. O próximo passo é procurar nessa seção, o arquivo chamado functions.php.

Página de edição de arquivo

O arquivo functions.php é responsável por criar funções, óbvio, tanto funções nativas do PHP, quanto funções do próprio WordPress como actions e filters. Então, reforço, cuidado ao mexer nesse arquivo, você pode comprometer o seu site.

Voltando ao passo a passo, aberto o arquivo functions.php no editor de tema do WordPress, você precisa pegar código abaixo e colar no arquivo.

function my_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/images/my-logo.png);
		width: 320px;
		height: 65px;
		background-size: 320px 65px;
		background-repeat: no-repeat;
        	padding-bottom: 30px;
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_logo' );

Não esqueça de atualizar o aquivo. Caso você tenha feito tudo certo, o resultado disso será este:

Página de log in já modificada

Entretanto, ao clicar na logo você ou o usuário será redirecionado para o site oficial do WordPress. Podemos contornar esse problema adicionando o seguinte código também no arquivo functions.php.

function logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'logo_url' );

Agora, quando for clicar na logo, você será redirecionado para a página inicial do seu site.

Forma recomendada mas nem tanto

Ao ler o aviso que o WordPress nos apresenta, ele nos diz para usarmos algum gerenciador de arquivos. Pelo menos nas hospedagens que utilizei, todos tinham gerenciadores de arquivos. Através dessa ferramenta podemos editar, criar, copiar e apagar os arquivos que temos dentro do servidor.

Outra ferramenta que podemos utilizar é um programa FTP. Em resumo e sem entrar em termos muito técnicos, FTP é um protocolo que rege a transferência de arquivos. O FileZilla, é um dos programas FTP mais utilizados para este fim. Pessoalmente, recomendo usar um programa FTP para fazer esse tutorial.

Para quem não está habituado com servidores, talvez fique mais difícil localizar o arquivo functions.php usando um programa FTP ou um gerenciador de arquivos. Caso você seja um dessas pessoas, recomendo entrar em contato com alguém com mais conhecimento.

Por sua conta em risco, caso você quiser tentar, você deve encontrar os arquivos do seu site. Este arquivos, por padrão, estão na pasta public_html. Dentro desta pasta, você vai encontrar, provavelmente, uma pasta com o nome do seu site. Dentro da pasta do seu site, encontre a pasta chamada wp-content, entre nela e encontre a pasta themes. Você deve localizar a pasta com o nome do tema que está ativo no seu site. Ao entrar na pasta do tema, provavelmente, você vai encontrar o arquivo functions.php. Agora, só pegar os códigos lá em cima e colar nesse arquivo. Não esqueça de salvar. Caso esteja usando um programa FTP, envie de volta para o servidor.

Desvantagens de usar esses métodos

Talvez você tenha se perguntado o porquê das frases “não muito recomendada” e “recomendada mas nem tanto”. Isso se dá porque a maioria das temas WordPress, aliás, tudo no WordPress, recebem constantes atualizações. Quando um tema é atualizado, os códigos que você colocou diretamente no tema serão perdidos. Daí você terá que fazer todo o processo novamente.

Como contornar essa situação?

O WordPress possui um recurso chamado tema descendente ou o termo em inglês, Theme Child. Esse recurso nos permite criar um tema “filho” que herda todas as funções, estilos e etc, que estão presentes no tema “pai”, ou seja, no tema que está ativo no site.

Ao fazer esse processo de tema de descendente, você pode adicionar os códigos, funções que quiser. Assim, mesmo que o tema “pai” receba alguma atualização as personalizações que você fizer não serão perdidas.

Legal esse recurso né!? Não se preocupe, estou preparando um post especial sobre tema descendente.

Quer aprender a criar sites usando o WordPress mesmo sem saber nada sobre programação? Clique aqui e comece a criar sites do zero ao avançando usando o Elementor. Além disso você vai aprender técnicas de SEO, tráfego orgânico, hospedagens e muito mais.

Palavras finais

Viu como é fácil colocar a sua logo na página de log in do WordPress!? Você só precisa prestar muita atenção nos arquivos que está personalizando, além de tomar cuidado para não apagar nenhum código. Como dica, tenha sempre um backup do seu site, caso dê algo errado.