WP: Personalizando Página de Login

Tutorial Wordpress

Ter uma página de login e agradável dá até prazer de logar! Isso é bom para quando for fazer o tema para algum cliente seu, ou até para si próprio, seguindo a identidade do site (ou blog) e deixar bem mais com carinha de profissional e único ::blush::

Essa lindeza ai pode ser feita por um função super simples! Dê uma olhada:

/////////// personalizando área de login do wordpress - por madlyluv.com
/// marca do blog no lugar da marca do wordpress
function my_custom_login_logo() {
    echo '
    <style type="text/css">
    .login h1 a {
        background-image:url('.get_bloginfo('template_directory').'/images/wplogin-logo.png) !important; // sua marca salva na pasta de seu tema atual
        background-size: 326px 175px; //setando altura e largura da sua imagem
        background-position: top center;
        background-repeat: no-repeat;
        width: 326px; 
        height: 175px;
        text-indent: -9999px;
        outline: 0;
        overflow: hidden;
        padding-bottom: 15px;
        display: block;
    }</style>';}
add_action('login_head', 'my_custom_login_logo');

/// setando principais configuracoes de CSS da página
function new_custom_login_page_style() {
    echo '
    <style type="text/css">
    body.login {background: #f8f2e9 url('.get_bloginfo('template_directory').'/images/bg-full.png) !important; font-family: Verdana, sans-serif} // background da página
    .login #nav a, .login #backtoblog a {color:#D5727C !important; text-decoration:none !important; font-size: 0.9em !important;}
    .login #nav a:hover, .login #backtoblog a:hover {color:#639197 !important; text-decoration:underline !important;}

    .login #nav {float: left !important;}

    .login form {-webkit-box-shadow: rgba(210,196,145,1) 0 4px 10px - !important;
        box-shadow: rgba(210,196,145,1) 0 4px 10px -1px !important; border-radius: 10px !important; -webkit-border-radius: 10px !important;}
    
    </style>';}
add_action('login_head', 'new_custom_login_page_style');

/// mudando o link de wordpress.org para o link do blog (na marca)
function loginpage_custom_link() {
    return get_bloginfo('url');
}
add_filter('login_headerurl','loginpage_custom_link');

/// acrescentando titulo no link da marca 
function change_title_on_logo() {
    return 'Voltar para ' . get_bloginfo('name');
}
add_filter('login_headertitle', 'change_title_on_logo');

Você pode personalizar cores, planos de fundo, mudar o link e a marca de seu blog para deixar mais personalizado e com sua cara. Ao finalizar, salve dentro de functions.php e seja feliz! o//

Veja também...

Dica de série: Anne with an E, da Netflix
King's Cross + Tour completo pelos Studios de Harry Potter
Almoço no Las Nenas Café Bistrô (Goiânia)

2 Comentário(s)

(2 pelo blog e pelo facebook)