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á!