Nos dias de hoje, a imagem significa tudo. Por isso mesmo, é importante que a página de registo e login do seu blog WordPress seja o mais atractiva possível, garantindo uma elevada personalização, que fará com que os seus leitores e visitantes se identifiquem ainda mais com o seu blog. Para quem utiliza o WordPress como ferramenta de negócios, esta dica é ainda mais importante. Seja ao desenvolver um trabalho para um cliente, seja montando um blog ou loja online, a imagem é extremamente importante. Por tudo isto, damos-lhe dois exemplos de personalizações que realizámos em dois dos nossos projectos, e qual o código PHP e CSS a utilizar no seu WordPress Theme para conseguir personalizar a sua página à sua medida.

Na Galeria de Blogs decidimos partir do padrão de imagem do site para criar uma página de login customizada e à imagem do projecto. Utilizámos uma imagem padrão para posteriormente reproduzir no campo específico de login.

Na Escola Dinheiro optámos por uma abordagem bastante mais reservada e onde prevalece apenas o lettering do logotipo. Desta feita utilizámos apenas uma imagem horizontal para posicionar o logo centrado com a caixa de login padrão do WordPress.

COMO CRIAR UMA PÁGINA DE LOGIN CUSTOMIZADA

Abra o seu ficheiro functions.php e cole o seguinte código:

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_directory') . '/custom-login.css" />';
}

De seguida, crie um ficheiro CSS com o nome custom-login.css e coloque-o na directoria de raíz do seu template, de forma a poder customizar eficientemente o estilo e cores da sua página de login. Poderá simplesmente começar com o seguinte código CSS:

/* Custom WordPress Login Page Style */

/* Page Background */
html {
	background: #eae2d5 url(bgi-mage-path);
	margin: auto;
	font-weight:bold;
}
/* WordPress Logo Replacement (Don't forget to change width and height */
h1 a {
	background:url(logo-path) 0 0 no-repeat;
	width:290px;
	height:150px;
	margin-left: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}
/* Top Bar Background Color */
body.login {
	border-top-color:#dac6ad;
}
.message {
	margin-bottom: 0px;
}
/* Login Button */
#wp-submit {
	background: #bc3d1d;
	border: #f24643;
}
/* Lost Password Link */
.login #nav a, .login #nav a:hover {
	color: #443030!important;;
}
/* Top Bar Link */
.login p#backtoblog a:link, .login p#backtoblog a:visited {
	color:#443030;
	font-weight: bold;
}
.login p#backtoblog a:hover, .login p#backtoblog a:active {
	color:#443030;
	text-decoration:underline;
}

Se desejar, poderá customizar as cores, imagens e tudo aquilo que desejar colocar na sua página de login. Dependendo da sua inspiração, esta base poderá servir-lhe para se iniciar neste tipo de customização. Boa sorte!

Até Já!