Como personalizar a tela de login do WordPress

Publicado em 15/01/2013

Usar o WordPress para gerenciar conteúdo dos sites de clientes é super normal, mas às vezes o cliente é leigo e pode não entender o que é aquele logotipo na tela de login do painel de administração do site dele. Por isso, personalizar a tela de login pode ser uma boa idéia.

Tela de login padrão do WordPress

Se você olhar o código fonte, vai notar que o logotipo do WP é uma imagem de fundo num link dentro de um h1. Esse arquivo se chama wordpress-logo.png e fica na pasta wp-admin/images. As dimensões dele na versão 3.5 são 274×63 pixels. Você pode simplesmente substituir esse arquivo pelo logotipo do cliente? Pode, mas é um trabalho porquinho a cada nova atualização do WordPress você vai precisar fazer a alteração novamente. Por isso é mais fácil fazer essa modificação através do arquivo funcions.php.

Para trocar o logotipo, primeiro você precisa criar uma imagem. No exemplo estou personalizando a tela de login aqui deste blog. Criei um arquivo chamado login.png, com 300×150 pixels, e coloquei dentro da pasta do meu tema.

No arquivo funcions.php do tema eu faço a alteração:

1
2
3
4
5
6
7
8
9
10
11
// Muda o logotipo na tela de login do painel administrativo
 
function my_custom_login_logo() {
	echo '
	<style type="text/css">
	.login h1 a {
	background-image:url('.get_bloginfo('template_directory').'/login.png) !important;
	background-size: 300px 150px;
	height: 150px;}
    </style>';}
add_action('login_head', 'my_custom_login_logo');

Imagino que se você está personalizando a tela de login do WordPress é porque tem conhecimentos básicos em CSS, por isso considero o código auto-explicativo. Note que como a minha imagem é maior que a original, precisei alterar também a altura do elemento.

Outro detalhe é que a tela de login do WordPress não tem fundo branco, e sim cinza muito clarinho. Você pode usar essa mesma cor no fundo da sua imagem, mas é mais garantido usar um fundo transparente; afinal, você não sabe se vão mudar o tom de cinza na próxima versão!

Legal, mas o link ainda leva para o wordpress.org, e o tooltip ainda é “Powered by WordPress”, então vamos personalizar isso também. Volte ao functions.php e acrescente o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
// Muda o logotipo e o link na tela de login do painel administrativo
 
function loginpage_custom_link() {
	return get_bloginfo('url');
}
add_filter('login_headerurl','loginpage_custom_link');
 
function change_title_on_logo() {
	return 'Voltar para ' . get_bloginfo('name');
}
add_filter('login_headertitle', 'change_title_on_logo');

Este código vai automaticamente utilizar a URL do site como link, e o nome do site como tooltip. Olha como ficou o meu exemplo:

Tela de login personalizada no WordPress

Muito melhor, não? Lembrando que ele foi testado para a versão atual do WordPress, que na publicação deste post é a 3.5.

Outra utilidade desse código tão simples é personalizar o tema para agregar valor ao projeto final. Temas prontos e grátis existem aos montes, por isso tudo que a gente puder deixar com a cara do cliente é sempre bem-vindo ;D

Obrigada Cynthia Pereira e Adriano pelas correções ;D


Leia mais sobre WordPress,


3 comentários para “Como personalizar a tela de login do WordPress”

Deixe um comentário




Seu e-mail não será publicado