WordPress: aggiungere un box per il login

Avrete notato che in alcuni temi WordPress si trova un box personalizzato per il login, grazie al quale è possibile fare a meno di utilizzare il widget predefinito di wp (un po’ sgradevole a vedersi e poco versatile in quanto visualizzabile solo nella sidebar).

Con questa breve guida vediamo come inserire i campi necessari al login in un qualsiasi punto del layout (e personalizzarlo come vogliamo). E come rendere questa funzione un valore aggiunto al nostro blog.

I form base per il login

Ovviamente di base è necessario fornire all’utente 2 campi, username e password, che gli permetteranno di effettuare l’accesso.

Inseriamo nel punto dove vogliamo mostrare questi due campi il seguente codice:

<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
LOGIN:
<label for="log">USER<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="10" /></label>
<label for="pwd">PASSWORD <input type="password" name="pwd" id="pwd" size="10" /></label>
<input type="submit" name="submit" value="Login &raquo;" /><br />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form>

Invitiamo gli utenti a registrarsi o recuperare la password

Per fare ciò basta aggiungere due semplici collegamenti ipertestuali, nel punto più opportuno (io di solito ne metto uno sopra ed uno sotto il form).

Per la registrazione: <a rel=”nofollow”href=”<?php bloginfo(‘url’) ?>/wp-login.php?action=register”>REGISTRATI</a>

Per il recupero della password smarrita: <a href=”<?php bloginfo(‘url’)?>/wp-login.php?action=lostpassword”>Smarrita la password?</a>

Facciamo sentire gli utenti a casa loro

Una volta effettuato il login, perchè continuare a vedere il form se non è più necessario? Perchè non mostrare un messaggio di benvenuto con, magari, la possibilità di accedere direttamente alle funzioni più utilizzate?

Per fare ciò è necessario innanzitutto richiamare un paio di variabili e in secondo luogo creare una struttura if else che si comporti diversamente a seconda che l’utente sia loggato o meno.

Ecco un esempio:

<?php global $user_ID, $user_identity, $user_level ?>
<?php if ( $user_ID ) : ?>
<ul>
<li>Benvenuto <?php echo $user_identity ?>!</li> |
<li><a href="<?php bloginfo('url') ?>/wp-admin/">Bacheca</a></li> |
<?php if ( $user_level >= 1 ) : ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Scrivi un articolo</a></li> |
<?php endif // $user_level >= 1 ?>
<li><a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Profilo</a></li> |
<li><a href="<?php echo wp_logout_url(get_permalink()); ?>">Logout</a></li>
</ul>
<?php elseif ( get_option('users_can_register') ) : ?>
<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
<a rel="nofollow"href="<?php bloginfo('url') ?>/wp-login.php?action=register">REGISTRATI</a> oppure effettua il LOGIN:
<label for="log">USER <input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="10" /></label>
<label for="pwd">PASSWORD <input type="password" name="pwd" id="pwd" size="10" /></label>
<input type="submit" name="submit" value="LOGIN &raquo;" /><br />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
<a href="<?php bloginfo('url')?>/wp-login.php?action=lostpassword">Smarrita la password?</a>
</form>

Come si intuisce guardando il codice, in questo caso, wordpress controlla che l’utente sia loggato o meno e restituisce nel primo caso un messaggio di benvenuto “Benvenuto Mario Rossi!” (per dirne una), il collegamento all bacheca (dashboard), all’editor degli articoli, e alla pagina di modifica del profilo (ma si può aggiungere di tutto, dipende anche dalle necessità e dallo spazio). Nel secondo caso invece mostra il box per il login che abbiamo visto prima, con la possibilità di recuperare la password smarrita oppure di registrarsi nel caso non lo si fosse già.

Questo Blog è mio… E qui comando ioooo!! (sulle note du una celebre canzone :-P)

Possiamo personalizzare ulteriormente il login al nostro blog riservandoci, per così dire, “un trattamento di riguardo” (mi sembra anche doveroso, no?) :-)

Un’idea sarebbe un messaggio personalizzato per l’admin:

<?php if ( $user_ID ) : ?>
<?php if ( $user_identity == 'admin' ) {
echo '<b>I miei omaggi o mio padrone</b>';
}
else{
echo 'Bentornato/a '.$user_identity;
} ?>
<br /><br />
Puoi accedere ai seguenti servizi:<br />
<a href="<?php bloginfo('url') ?>/wp-admin/">Bacheca</a><br />
<?php if ( $user_level >= 2 ) : ?>
<a href="<?php bloginfo('url') ?>/wp-admin/post-new.php">Scrivi un articolo</a><br />
<?php endif // $user_level >= 2 ?>
<a href="<?php bloginfo('url') ?>/wp-admin/profile.php">Modifica il tuo profilo</a><br />
<a href="<?php echo wp_logout_url(get_permalink()); ?>">LOGOUT &raquo;</a>
<?php elseif ( get_option('users_can_register') ) : ?>
<form action="<?php bloginfo('url') ?>/wp-login.php" method="post">
<h2>LOGIN</h2><br />
<label for="log">USER<input type="text" name="log" id="log" value="<?php echo wp_specialchars(stripslashes($user_login), 1) ?>" size="10" /></label><br />
<label for="pwd">PASSWORD<input type="password" name="pwd" id="pwd" size="10" /></label>
<input type="submit" name="submit" value="INVIA" /><br />
<input type="hidden" name="redirect_to" value="<?php echo $_SERVER['REQUEST_URI']; ?>"/>
</form>
<a href="<?php bloginfo('url') ?>/wp-login.php?action=register">REGISTRATI SUBITO!</a>
<a href="<?php bloginfo('url')?>/wp-login.php?action=lostpassword">Smarrita la password?</a>
<?php endif // get_option('users_can_register') ?>

Nel caso il vostro nome utente fosse diverso da admin (e per questioni di sicurezza in effetti sarebbe meglio), basterebbe sostituire ‘admin’ con ‘nomeutente’ (facendo attenzione a non cancellare gli apici).

Con le opportune modifiche, è possibile personalizzare il messaggio di benvenuto per più utenti o gruppi grazie ad un minimo di php (liberate la fantasia!).

Nella parte alta di questo stesso blog potete vedere come ho riutilizzato questi concetti per gestire il lato login, benvenuto e registrazione. Fatemi sapere cosa ne pensate! 😉

Buona personalizzazione e…

Happy Blogging 😎

  • nio11

    Buongiorno..
    primo post sul tuo sito ma è già da un pò che lo osservo. Veramente complimenti.
    Avrei una domanda!
    Voglio modificare il form di registrazione inserendo anche io altri campi (ad es nome cognome pass). Mi potresti dire come fare?
    ho provato a modificare il file login.php nel case ‘register’, ma sono solo riuscito ad inserire alcuni campi senza riuscire a collegarli ai relativi campi del profilo. Mi puoi aiutare?
    Grazie mille, Enrico

  • sandro

    Ciao, per cambiare il colore grigio dal 1 tutorial cioè questo codice come faccio?
    <form action="/wp-login.php” method=”post”>
    LOGIN:
    USER<input type="text" name="log" id="log" value="” size=”10″ />
    PASSWORD

    <input type="hidden" name="redirect_to" value="”/>

    • http://enricodeleo.com Enrico Deleo

      Come per qualsiasi elemento html lo stile può essere specificato via CSS. Come puoi vedere nel codice che hai incollato non vi è nessuna indicazione sullo stile quindi suppongo nel tuo caso venga applicato quello di default del browser o quello già presente nel tuo tema. Per specificarne uno assegna un id al form (esempio:

      ) e utilizza i selettori form#mioid input { regole }