Come personalizzare le pagine di login/registrazione di WordPress?

Question

Come personalizzare le pagine di login/registrazione di WordPress?

28 gen 2011, 04:09:40

Visualizzazioni: 15.5K

Voti: 3

La mia domanda è: come posso personalizzare la pagina di login e registrazione predefinita di WordPress senza modificare i file core di WP. Sto pensando più a qualcosa come un codice da inserire nel functions.php.

Qualcuno può aiutarmi trovando un tutorial o qualcosa del genere? Ricordo che non voglio modificare i file core di WordPress. Grazie!

Jared

3.84K

sviluppo temi admin login

Tutte le risposte alla domanda

Puoi utilizzare la funzione add_action per aggiungere funzionalità al login senza dover modificare il core di WordPress.

Ecco un tutorial che ti mostra come creare un login personalizzato per WordPress: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/

Esistono anche plugin che possono creare login personalizzati per WordPress, ma ritengo che non possano raggiungere lo stesso livello di personalizzazione di questo metodo.

Evan Yeung

3.52K

28 gen 2011 06:19:06

Buone risposte qui: Come posso cambiare il logo nella pagina di login?

markratledge

8.74K

28 gen 2011 06:19:03

Penso che questo codice sia migliore:

function login() {

    if( is_user_logged_in() ) {

        echo 'Sei già loggato! Forse vuoi <a href="' . wp_logout_url( home_url() ) . '">fare il logout</a> ?';

    } else { ?>

        <div id="login">

            <form method="post" action="<?php echo wp_login_url(); ?>" id="loginform" name="loginform">
                <p>
                    <label>Nome utente<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                </p>
                <p>
                    <label>Password<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"> Ricordami</label></p>
                <p class="submit">
                    <input type="submit" tabindex="100" value="Accedi" 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="Crea una nuova password" href="<?php echo wp_lostpassword_url() ?>">Hai dimenticato la password?</a></p>

        </div>

    <?php }

}

Ora aggiungi questo codice al tuo header.php nel template:

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

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

} else {

    // aggiungi altro o mostra la home page 

}

Così vedrai una schermata di login migliore.

User

100

6 mar 2011 12:11:40

Ecco un tutorial approfondito pubblicato di recente da alcuni sviluppatori WP molto competenti: http://digwp.com/2010/12/login-register-password-code/

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

Aggiornamento

Uno degli sviluppatori principali di WP ha appena pubblicato questo tutorial sulla personalizzazione del logo nella schermata di accesso:

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

joelhaus

264

28 gen 2011 08:38:45

Commenti

Anche se potrebbe valere la pena notare le preoccupazioni relative all'XSS sollevate da uno degli utenti che ha commentato quell'articolo (che non sono ancora state affrontate).

t31os

28 gen 2011 12:50:26

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

Ecco il mio functions.php da cui puoi copiare le funzioni. Ammetto che il mio CSS è stato messo insieme velocemente e potrebbe essere più ordinato. Sono in una fase di lancio frettolosa in questo momento. Ma puoi usare le funzioni. La prima aggiunge CSS all'head della pagina di login per sovrascrivere gli stili. Le due funzioni successive modificano l'URL e l'attributo title del link del logo.

// LOGIN - stile personalizzato  
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; /*necessario qui per qualche motivo */
        }

    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 - funzione per cambiare il link del logo nella pagina di login  
function my_login_custom_site_url($url) {  
    return get_bloginfo('siteurl'); //restituisce l'URL corrente del blog WordPress  
    }  
    add_filter("login_headerurl","my_login_custom_site_url");  

//// LOGIN - funzione per cambiare il titolo del link del logo nella pagina di login (rimuove lo slogan di WordPress)  
function my_login_header_title($message) {  
    return False; /*restituisce la descrizione del blog corrente */  
    }  
    add_filter("login_headertitle","my_login_header_title");