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á!
maria porto
não funciona
Construo seu Site
Olá,
quando tiver um tempinho vou testar e postar aqui.
Wagner
Em, eu coloco o
function custom_login() {
echo ”;
}
NA PRIMEIRA LINHA?
Fernando
Aqui tb não deu certo…
Felipe
nao está dando certo…
Kako Naiz
Bom estou criando uma pagina e tentei fazer este procedimento que vocÊ ensinou mas estou tendo dificuldades. Me ajude por favor!
Repeat do Miau
Não tem como isso funcionar… Ele cria uma função que chama o CSS customizado, mas nunca chama essa função em lugar nenhum.
Faltou no mínimo 1 linha de código nesse tutorial.
Diogo
Muito safado esse post! Não funciona, e tem uma apelação nos comentários para gerar ranking no GOOGLE. Blog denunciado. Melhor fazer as coisas bem feitas e ter mérito, do que apelar e ser para sempre um cretino.
Felipe
Olá Paulo, testei o código aqui e infelizmente não funcionou tbm, porém adicionando mais uma linha de código e ele funciona. A linha que precisa ser adicionada é a seguinte:
add_action('login_head', 'custom_login');
Abraços
Daniel Leão
Eu sou programador jovem, ou seja ainda sei mais o básico e vou testar isso para o meu projecto clube leão, ou seja eu sou programador, mas ainda preciso de estudar muito até chegar a altura e vou ver se isso funciona no clube leão para a versão 3.0.
Obrigado!
Gen.FaculH (L.R clã)
Muito bom, só estava conseguindo isso com plugin.
Abraço!
Aqui deu certo após adicionar a seguinte entrada:
“add_action(‘login_head’, ‘custom_login’);”
Então o código ficará assim:
function custom_login() {
echo ”;
}
add_action(‘login_head’, ‘custom_login’);
Thiano
Olá.
Não funcionou, mesmo usando a dica do Gen.FaculH (L.R clã). Não sei se fiz certo, o código no functions.php ficaria assim:
function custom_login() {
echo ”;
}
add_action(‘login_head’, ‘custom_login’);
Att,
Thiao