Blog do MX Cursos

Como personalizar página de login WordPress

Como personalizar página de login WordPress

A página de login do WordPress é fácil de usar e tem um design bacana. Cumpre sua única função de permitir que um usuário acesse ao painel através de login e senha independente do nível de conhecimento da plataforma. Porém, não seria ainda mais bacana se essa página tivesse a cara da sua empresa?

Pensando nisso, hoje veremos 3 formas muito simples de como personalizar a tela de login do WordPress, bem como outros detalhes do ambiente do painel admin da plataforma.

Personalizando página de login WordPress com pequenos trechos de códigos

Na Agência Xadrez, desenvolvemos muitos projetos com WordPress todos os meses. E para agilizar o processo de desenvolvimento, nós criamos um tema-master, com os principais códigos que usamos em quase todo site que desenvolvemos com o CMS. É quase um framework próprio. Separamos os trechos de código que vamos utilizar e realizamos uma instalação com esse pacote.

Os trechos de código a seguir foram retirados diretamente dos arquivos functions.php e style.css de nosso tema-master. Basicamente, você só vai precisar desses dois arquivos para personalizar o ambiente de administração do WordPress nesse tutorial. Se quiser, faça o download dos arquivos neste link.

Vamos lá?

Personalizando logotipo e background

Com os códigos a seguir, você sobrescreve as regras de estilo aplicadas ao background da página de login e também no logotipo WordPress acima do formulário de login. Adicione-os em functions.php.

 

No trecho acima, você adiciona a action que estamos criando.

Agora, vamos adicionar css em linha, dentro da função que criamos, para modificar a imagem do logotipo:

Explicando: h1 a representa o logotipo WordPress. Para substituí-lo, você vai aplicar uma imagem de background para este elemento. Crie uma imagem, adicione ao seu tema, acerte altura e largura do elemento para o mesmo tamanho da imagem criada e corrija o caminho da imagem.

No código abaixo, você vai incluir o carregamento do arquivo style.css à página de login. A ideia é adicionar os estilos de background dessa página no css do tema.

 

A seguir, 3 linhas de css que você deve adicionar ao style.css do tema.

A primeira linha adiciona uma imagem para o background (não se esqueça de subir a imagem para o tema e apontar a URL correta). Em seguida, um trecho para personalizar o formulário. Por último, uma linha de css para personalizar as labels do formulário de login.

A seguir, você faz o functions.php aplicar as alterações.

 

Só com esses 2 recursos você já terá um visual bem bacana na página de login. Veja como ficou a página da Agência Xadrez.

Página de Login WordPress

E aqui, dois cases de aplicação desse recurso em nossos clientes.

Página de Login WordPress FocusPágina de Login WordPress Padrinho Kids

Alterando título e link do logotipo

Você pode refinar um pouco mais alterando 2 pequenos detalhes nessa página: o texto exibido ao passar o mouse pelo logotipo e o link ao clicar no mesmo.

Aqui você altera o título do logotipo.

 

E agora, você modifica o link do logotipo.

 

Muito fácil, né? 🙂

Bônus: adicione um box de informações no painel WP

Até aqui, você deixou a página de login do seu projeto – ou do seu cliente – muito mais bacana. Agora, pra agregar mais valor ao seu trabalho, que tal adicionar um box com suas informações de contato? Dica: seu cliente vai perceber o valor do dinheiro investido.

Basta adicionar esse trecho de código em functions.php:

 

 

Primeiro, adicionamos a action que acrescenta o box. Observe que demos ao box, o título “Sobre o site“.

Em seguida, informamos o que o box vai informar. Nesse caso, inserimos os dados em uma tabela.

 

Nos projetos que desenvolvemos, além das informações de contato (nosso site e email), adicionamos a URL da página de ajuda que criamos para cada site. Você pode informar o que achar conveniente, como por exemplo: horário de atendimento, telefone de contato, etc.

Bônus: modifique a mensagem de rodapé do painel admin

Outra detalhe sutil: Você pode personalizar a mensagem no rodapé do painel de administração do WordPress com esse código simples.

 

O resultado…

Painel WordPress personalizado

Concluindo

Com pequenos trechos de código, você viu que é possível personalizar a página de login WordPress e deixá-la com visual bem legal. Esse procedimento fácil de fazer vai criar um grande diferencial no projeto e aumentar o valor percebido pelo cliente.

Faça um teste. Passe a apresentar esse resultado a seus clientes e conte pra gente como está sendo a recepção.

Gostando do conteúdo de WordPress do Blog do MX?

CONHEÇA NOSSOS CURSOS ONLINE EM VÍDEO AULAS

TESTE GRÁTIS

Agência Xadrez

A Xadrez é uma Agência full-service especializada em criação de sites. Atua em todas as etapas da comunicação: desenvolvimento de plataformas digitais com WordPress, faz o planejamento de marketing, mensura resultados. É a agência oficial do MX Cursos.

Comente!

15 Shares
Share15
Tweet
+1
Share