A página de login é o primeiro contacto que temos com uma nova instalação de WordPress, e personalizar esta página pode não ser das coisas mais importantes a fazer quando temos um novo site mas é sempre uma boa ideia ter um login personalizado e o melhor de tudo é que personalizar esta página não é complicado e não desaparece com as atualizações do WordPress.
Temos duas opções para concretizar esta ideia, a primeira é apenas mudar o logótipo da página ou seja trocar o logótipo do WordPress pelo do nosso blog ou site. Para fazermos isto abrimos o ficheiro functions.php do nosso tema (se o tema que estiveres a utilizar não tiver este cria um novo ficheiro de php e grava com o nome functions.php) e escrevemos:
1 2 3 4 | function login_styles() { echo '<style type="text/css">h1 a { background: url('. get_bloginfo("template_directory") .'/imagens/logo.png) no-repeat ; }</style>'; } add_action('login_head', 'login_styles'); |
O logótipo do WordPress na página de login está como imagem de fundo da h1 da página e tudo o que estamos a fazer nesta função é mudar a imagem de fundo dessa h1 colocando lá o nosso logótipo em vez do que vem por defeito com a instalação do WordPress.O logótipo tem que ser menor que 326px.
Se quisermos mesmo mudar a página por completo também o podemos fazer e para isso temos que criar uma folha de estilo para a página de login, e como no código anterior isto é feito no functions.php com a mesmo função de php mudando apenas o echo, sendo este igual à localização do ficheiro de CSS que criamos, ou seja:
1 | echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/custom-login.css" />'; } add_action('login_head', 'custom_login'); |
A partir daqui se vocês se sentirem confortáveis com o CSS é só criarem as seguintes tags no vosso novo ficheiro de CSS e darem-lhes os valores que desejarem:
1 2 3 4 | html { /* Muda o fundo da página de login */} h1 a {/* Imagem que por defeito é o titulo do wordpress, não se esqueçam de colocarem as dimensões da nova imagem*/} #nav a {/* Muda o estilo dos "Recupera a tua password" e "Regista-te" */} #backtoblog a {/* Muda o estilo do link "Go back to oteublog" */} |
A partir daqui é tudo uma questão da criatividade de cada um. Espero que tenham gostado do artigo e se experimentarem com esta técnica coloquem nos comentários em baixo o resultado.
Não tens Gravatar? Clica aqui para saberes como ter o teu avatar pessoal(gravatar)!