#WordPress: Come creare un #custom #login_form

Premetto subito che si tratta di un articolo per i più esperti su “come creare, via #mu-plugins (Must Use Plugins)“, un #custom #login_form da inserire nella #sidebar del vostro blog #WordPress (esattamente come quello presente qui su questo sito).

La difficoltà è relativamente bassa se si ha confidenza con l’ftp e si possiede un buon editor di testo (notepad++/notepadqq).

Importante è attivare prima il php_include_plugin (vedi punto 1) per includere lo script php in un widget di testo della nostra sidebar, e solo dopo creare il file vero e proprio che si occuperà del login form.

 

Ve la sentite? procediamo 😀

Punto 1: l’esecuzione del php tramite shortcode:

possiamo farlo comodamente tramite il nostro php_include_plugin: Php: Come eseguirlo via mu-plugins su WordPress

fatto ciò, abbiamo abilitato il php_include tramite shortcode anche nella sidebar e quindi possiamo procedere.

Punto 2: Creiamo un nuovo file:

e lo inseriamo dentro la directory _php_script (precedentemente indicata nel php_include_plugin)

<?php defined( 'ABSPATH' ) or exit; ?>
<div id="cust_lf">
<?php
if ( ! is_user_logged_in() ) // if is guest...
{
?>
    <h2 class="widget-title">Benvenuto &nbsp;&#x1F60A;</h2>
        <form name="loginform" id="loginform" action="<?php echo wp_login_url(); ?>" method="post">
            <p class="login-username">
                <label for="user_login">Nome utente o indirizzo email</label>
                <input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="&#x1F464; Username" required>
            </p>
            <p class="login-password">
                <label for="user_pass">Password</label>
                <input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="&#x1F511; Password" required>
            </p>
            <?php
            /*get social login! */
            do_action('oa_social_login');

            /* recaptcha */
            if( function_exists( 'gglcptch_display' ) )
            {
                echo gglcptch_display();
            }
            ?>
            <p class="login-remember">
                <label><input name="rememberme" type="checkbox" id="rememberme" value="forever"> Ricordami</label>
            </p>
            <p class="login-submit">
                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login &#x2714;&#xFE0F;" title="Login">
                <input type="hidden" name="redirect_to" value="<?php echo esc_url( get_permalink() ); ?>">
            </p>
        </form>
    <?php
    echo '
    <div id="right_link">
        <a href="' . esc_url( wp_registration_url() ) . '" title="Register">' . __( "Register" ) . '</a> | <a href="' . esc_url( wp_lostpassword_url( get_permalink() ) ). '" title="Lost Password">' . __( "Lost your password?" ) . '</a>
    </div>';
}
else // if is logged...
{
    $getuser = wp_get_current_user();
    $firstname = $getuser->user_firstname;
    $lastname = $getuser->user_lastname;
    $dispname = $getuser->display_name;
    if(isset($firstname) && isset($lastname))
    {
        $fullname = $firstname . ' ' . $lastname;
    }
    if(isset($fullname) && $fullname !== $dispname)
    {
        $titlename = $fullname . ' (' . $dispname . ')';
    }
    else
    {
        $titlename = $dispname;
    }
    $avatar = get_avatar( $getuser->ID, 60 );
    $profile_url = home_url() . '/membri/me/';
    echo '
    <h3 id="welcomeback">
        Bentornato
        <a class="custom_login_profile" href="' . esc_url( $profile_url ) . '" title="Ciao ' . $titlename . ' - Visita il tuo profilo!">' . $avatar . '</a>
        <br>
        <a class="custom_login_profile" href="' . esc_url( $profile_url ) . '" title="Ciao ' . $titlename . ' - Visita il tuo profilo!">' . $dispname . '</a>
    </h3>';
    /*
    // <small>Collega l\'account con uno dei seguenti social network:</small>';
    // do_action('oa_social_link');
    // ... not used, but simple to imprement if required:
    // ' . $getuser->user_login . ' + ' . $getuser->user_email . '
    */
    echo '
    <div id="right_link">
    <a href="' . esc_url( wp_logout_url( get_permalink() ) ) . '" title="logout">' . __( "Log out" ) . '</a>';
    if( current_user_can('edit_posts') )
    {
        wp_register(' | ', ''); // Site Admin:
    }
    echo '
    </div>';
}
?>
</div>

Quindi lo richiamiamo in un widget di testo:

semplicemente > [php_include file='custom_login_form']

 

Questo, invece, il css:

/* custom login form in sidebar */
#cust_lf label[for=user_login]::before,
#cust_lf label[for=user_pass]::before {
    content: '*\00a0';
    color: red
}
#cust_lf .login-remember {
    margin: 0;
    float: left;
    padding: 6px;
    border: 1px dotted;
    border-radius: 5px;
}
#cust_lf #right_link,
#cust_lf .login-submit {
    margin: 0;
    text-align: right
}
#cust_lf #welcomeback {
    line-height: 30px
}
#cust_lf #welcomeback,
#cust_lf #loginform {
    border-bottom: 1px solid #d1d1d1;
    margin: 0 0 10px;
    padding-bottom: 10px
}
#cust_lf img.avatar {
    float: left;
    margin-right: 10px
}

 

Fatto ciò avremo il nostro login form!

Come si può notare dal codice, c’è anche recaptcha e social-login (presenti, da visitatore, nella mia sidebar – il recaptcha adesso è la nuova versione “invisibile” ma comunque presente e perfettamente funzionante).

 

Ovviamente, come anticipato nella premessa, si tratta di un articolo per smanettoni e quindi assolutamente sconsigliato a meno esperti.

Inizialmente avevo fatto tutto sfruttando solo “it:Riferimento_funzioni/wp_login_form” ma le possibilità offerte erano ben più limitate rispetto al rifarlo praticamente da zero 😛

 

Per ogni dubbio o domanda, commentate pure 😉

---

---

---