Como personalizar a página de login do WordPress

Se trabalharmos com o Wordpress é possível que gostemos de personalizar a nossa página com todos os detalhes que nos são possíveis. Uma das customizações mais solicitadas pelos clientes é o login. Por padrão, o design que o Wordpress nos oferece para o login é bastante simples e limpo. Por isso, podemos querer incluir nele um toque mais pessoal, como a nossa marca.

Se você tem um blog desenvolvido em Wordpress, saberá que para gerenciá-lo é necessário acessar uma url como http://www.midominio.com/wp-admin, que mostra a página de login do administrador da instalação; Isso, por padrão, inclui um logotipo Wodpress que podemos alterar. Mas não só isso, mas também podemos modificar o link para o qual ele aponta quando você clica nele, bem como sua dica de ferramenta (o pôster que é mostrado ao colocar o ponteiro do mouse sobre o logotipo).

Existem duas maneiras de realizar essa personalização: por meio plugins especializado ou adicionando uma peça código para o arquivo de instalação correspondente.

Ao realizar qualquer personalização em Wordpress É mais simples por meio de um plugin, a verdade é que estes afetam diretamente o tempo de carregamento de nossa página de forma que sempre que estiver ao nosso alcance será mais leve realizar este tipo de ações "tocando" o código.

Neste tutorial, veremos como fazer isso diretamente adicionando os três trechos de código php correspondentes a cada uma das personalizações que iremos realizar:

Personalizações

  • Mude o logotipo.
  • Alterar link do logotipo.
  • Personalize a dica de ferramenta do logotipo.

1. Alterar logotipo


Passo 1
A primeira coisa que devemos fazer é preparar a imagem que usaremos como logotipo. Isso deve ser quadrado, de 80 x 80 px e em formato .png.webp, de preferência com o Fundo transparente, uma vez que a página de login é acinzentada e, desta forma, vai "misturar-se" perfeitamente com ela.

Passo 2
Assim que tivermos a imagem que usaremos como logotipo pronta, que em nosso exemplo é chamada logo.png.webp, devemos salvá-lo na pasta imagens do nosso tópico atual ( \ wp-content \ themes \tópico atual\ imagens) Onde tópico atual corresponde ao nome do tema que você tem ativo em sua instalação.

Podemos realizar este processo, tanto através de um cliente FTP como através do gerenciador de arquivos de hospedagem, caso você tenha.

etapa 3
Agora será necessário adicionar o código php correspondente ao arquivo functions.php do nosso tema ativo. A maneira mais rápida de fazer isso é usando o próprio editor de arquivos do Wordpress. Para fazer isso, dentro da instalação do Wordpress, faça clique no menu Personalizar e então sobre editor. Agora, na coluna da esquerda, clique no arquivo functions.php e vá até o final.

Para indicar o logotipo que você deseja exibir, adicione o seguinte código. No snippet de código você deve substituir o texto logo.png.webp pelo nome que você deu ao seu próprio logotipo

 // personalizar a função de log de login my_custom_login_logo () {echo ''; } add_action ('login_head', 'my_custom_login_logo');

2. Alterar link do logotipo


Para alterar o URL vinculado ao logotipo da página, você também deve adicionar ao arquivo functions.php o seguinte trecho de código:
 // personalizar a função de link do logotipo put_my_url () {return ('http://www.solvetic.com'); // Indique aqui a URL para a qual o logotipo está vinculado} add_filter ('login_headerurl', 'put_my_url');

3. Personalize a dica do logotipo


Finalmente, e para que a personalização da página de login seja completa, vamos alterar o texto que aparece ao passar o mouse sobre a imagem do logotipo, que por padrão é "Powered by WordPress".

Para isso, você terá que adicionar um último fragmento de código ao arquivo functions.php do tópico ativo:

 // personalizar a função de link do logotipo put_my_url () {return ('http://www.solvetic.com'); // Indique aqui a URL para a qual o logotipo está vinculado} add_filter ('login_headerurl', 'put_my_url');

Uma vez finalizada a edição, será necessário salvar as alterações feitas para que tenham efeito. Para fazer isso, clique no botão Atualizar arquivo encontrado no final do editor. Agora, se você acessar a página de login do Wordpres, poderá ver como fica após as alterações aplicadas.

LembrarVocê pode tentar esses "truques" sem medo de desconfigurar seu site no Wordpress usando uma instalação local conforme explicado no tutorial Como ter uma instalação portátil do WordPress

Baixe modelos gratuitos de Wordpress

Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo

Você vai ajudar o desenvolvimento do site, compartilhando a página com seus amigos

wave wave wave wave wave