Personalizar a Página de Login do WordPress

Por: em Hacks/Dicas, Tutoriais no dia 15 Janeiro, 2012

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.


Eu sou uma Webdesigner e programadora baseada em espinho com uma paixão pelas novas vertentes do webdesign como o Wordpress, HTML5 e CSS3, neste momento podes-me encontrar no Plus Coding.


Com um total de 9 posts.

Comenta com força que é de graça!