Cum să personalizezi paginile de login/înregistrare WordPress?

Question

Cum să personalizezi paginile de login/înregistrare WordPress?

28 ian. 2011, 04:09:40

Vizualizări: 15.5K

Voturi: 3

Întrebarea mea este cum pot personaliza pagina implicită de autentificare și înregistrare WordPress fără a edita fișierele de bază ale WP. Mă gândesc mai degrabă la o soluție prin cod în functions.php.

Poate cineva să mă ajute cu un tutorial sau ceva asemănător? Vă reamintesc, nu doresc să modific fișierele core ale WP. Mulțumesc!

Jared

3.84K

dezvoltare teme administrare autentificare

Toate răspunsurile la întrebare

Puteți utiliza funcția add_action pentru a adăuga funcționalități suplimentare procesului de autentificare fără a fi nevoie să editați nucleul WordPress.

Aici este un tutorial care vă arată cum să vă creați propria pagină de autentificare personalizată în WordPress: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/

Există și plugin-uri care pot crea pagini de autentificare personalizate, dar consider că acestea nu pot oferi același nivel de personalizare ca metoda prezentată.

Evan Yeung

3.52K

28 ian. 2011 06:19:06

Răspunsuri bune aici: Cum schimb sigla pe pagina de autentificare?

markratledge

8.74K

28 ian. 2011 06:19:03

Cred că acest cod este mai bun:

function login() {

    if( is_user_logged_in() ) {

        echo 'Ești deja autentificat! Poate dorești să te <a href="' . wp_logout_url( home_url() ) . '">deconectezi</a>?';

    } else { ?>

        <div id="login">

            <form method="post" action="<?php echo wp_login_url(); ?>" id="loginform" name="loginform">
                <p>
                    <label>Nume de utilizator<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                </p>
                <p>
                    <label>Parolă<br>
                    <input type="password" tabindex="20" size="20" value="" class="input" id="user_pass" name="pwd"></label>
                </p>
                <p class="forgetmenot"><label><input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme"> Ține-mă autentificat</label></p>
                <p class="submit">
                    <input type="submit" tabindex="100" value="Autentifică-te" class="button-primary" id="wp-submit" name="wp-submit">
                    <input type="hidden" value="<?php bloginfo( 'url' )?>" name="redirect_to">
                    <input type="hidden" value="1" name="testcookie">
                </p>
            </form>

            <p id="nav"><?php wp_register( '', '' ); ?> | <a title="Creează o parolă nouă" href="<?php echo wp_lostpassword_url() ?>">Ai uitat parola?</a></p>

        </div>

    <?php }

}

Și acum adaugă acest cod în header.php din template-ul tău:

if( $_GET['msv'] == 'login' ){

    login();
    get_sidebar();
    get_footer();

} else {

    // adaugă mai mult sau afișează pagina principală

}

Apoi vei vedea un ecran de autentificare mai bun.

User

100

6 mar. 2011 12:11:40

Iată un tutorial detaliat publicat recent de către niște dezvoltatori WordPress foarte cunoscători: http://digwp.com/2010/12/login-register-password-code/

Demo: http://digwp.com/custom-login-demo/

Actualizare

Unul dintre dezvoltatorii principali WordPress tocmai a publicat acest tutorial despre personalizarea siglei ecranului de logare:

http://markjaquith.wordpress.com/2011/02/01/customized-wordpress-login-screen/

joelhaus

264

28 ian. 2011 08:38:45

Comentarii

Deși ar putea fi util să menționăm preocupările legate de XSS ridicate de unul dintre utilizatorii care a comentat acel articol (care încă nu au fost abordate).

t31os

28 ian. 2011 12:50:26

Thompson 92 · Accepted Answer · 2011-01-28T06:40:17Z

Iată functions.php meu de unde poți copia funcțiile. CSS-ul meu este, recunosc, făcut în grabă și ar putea fi mai ordonat. Sunt acum într-o fază de lansare urgentă. Dar poți folosi funcțiile. Prima adaugă CSS în head-ul paginii de login pentru a suprascrie stilurile. Ultimele două funcții modifică URL-ul și atributul title al link-ului logo-ului.

// LOGIN - stil personalizat  
function my_login_style() {  
    echo '  
    #login {  
        background:none;  
        border:0;  
        box-shadow:0;  
        -moz-box-shadow: none; /* Firefox */  
        -webkit-box-shadow: none; /* Safari, Chrome */  
        box-shadow: none; /* CSS3 */  
        }  
    #nav {  
        background:none;  
        }  
    form {  
        -moz-box-shadow: 0 4px 18px #0b0b0b;  
        -webkit-box-shadow: 0 4px 18px #0b0b0b;
        box-shadow: 0 4px 18px #0b0b0b;
        }

    #login form#loginform, #login form#registerform, #login form#lostpasswordform {
        border: 1px solid #fff;
        }

    #login h1 {
        margin-bottom: 10px;
        }

    #login h1 a {
        width:300px;
        height:85px;
        margin: 0 auto 31px;
        }

    #login form#loginform #user_login, #login form#loginform #user_email, #login form#registerform #user_login, #login form#registerform #user_email, #login form#lostpasswordform #user_login, #login form#loginform #user_pass, #login form#loginform #openid_identifier   
        {  
        border: 1px solid #aaa;  
        }  

    #login form .submit input {  
        background: #2bab44 url("zhttp://www.domain.com/site/themes/mytheme/img/login-button-gradient8.png") left top repeat-x !important;   
        border: 1px solid #008717 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        padding: 5px 20px;  
        }  

    #login form .submit input:hover {   
        background: url("http://www.my.com/site/themes/my/img/login-button-gradient7.png") left -24px repeat-x !important;   
        border: 1px solid #2b8c35 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        }  

    #login form .submit input:active {
        padding: 5px 20px; /*necesar aici din nu știu ce motiv */
        }

    body.login p#nav a {
        color: #888 !important;
        text-shadow:none;
        font-weight:normal;
        letter-spacing:0;
        }
    body.login p#nav a:hover {
        color: #88eb86 !important;
        text-decoration: underline;
        }   

    .login #backtoblog a {
        display:none;
        }

    #login #login_error {
        font-size: 13px;
        font-weight: normal;
        text-shadow: none;
        margin: -11px auto 0;
        padding: 12px;
        width: 275px;
        background: #ffb5b4;
        border: 1px solid #db5858;
        -moz-border-radius: 10px !important;
        border-radius: 5px;
        }   

    #login .message {
        font-weight: normal;
        color: #bbb;
        text-shadow: none;
        }
    #user_pass, #user_login, #user_email {
        background: #fff;   
        }   
    ';
    }
    add_action('login_head', 'my_login_style');

//// LOGIN - funcție pentru a schimba link-ul logo-ului de pe pagina de login  
function my_login_custom_site_url($url) {  
    return get_bloginfo('siteurl'); //returnează URL-ul curent al blogului WP  
    }  
    add_filter("login_headerurl","my_login_custom_site_url");  

//// LOGIN - funcție pentru a schimba titlul link-ului logo-ului de pe pagina de login (elimină sloganul WordPress)  
function my_login_header_title($message) {  
    return False; /*returnează descrierea blogului curent */  
    }  
    add_filter("login_headertitle","my_login_header_title");