In questo tutorial, ti guiderò attraverso il processo di creazione di un bellissimo modulo "Registrati", utilizzando Fancybox, jQuery e, ovviamente, WordPress. Come scoprirai, il processo è davvero piuttosto semplice.

Passaggio 1. Il markup

Innanzitutto, posizioniamo il nostro pulsante nella parte superiore della pagina, sostituendo la descrizione predefinita nel tema.

 
Registrare

Si noti che nel pulsante di registrazione, l'href (# register-form) è lo stesso ID del modulo sottostante. Stiamo anche utilizzando la classe ".show" per chiamare FancyBox con jQuery.

Abbiamo bisogno della nostra base; creiamo il nostro markup. Apri header.php e piazza questo snippet seguente ovunque desideri.

 
  
 
 
Registra il tuo account
 Iscriviti con noi e divertiti! 
 
    
 
La password verrà inviata via email.
 
 
 

Nota che sto usando display: nessuno per nascondere il modulo inizialmente.

---

Passaggio 2. CSS

Il CSS è piuttosto semplice; Sto semplicemente disegnando un design veloce in PhotoShop.

La forma, meno lo stile, sembra così: (nota che ho rimosso il display: nessuno nel markup per controllare i miei stili)

Iniziamo quindi a disegnare la nostra scatola.

 div # register-form width: 400px; overflow: nascosto; altezza: 230 px; posizione: relativa; background: # f9f9f9 url (images / secure.png) no-repeat 260px 40px; font-family: Helvetica Neue, Helvetica, Arial! important; 

Continuando, ora modifico gli input di testo, aggiungendo un po 'di sfarzo.

 div # register-form input [type = "text"] display: block; border: 1px solid #ccc; margine: 5px 20px; imbottitura: 9px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; larghezza: 200 px; font-family: Helvetica Neue, Helvetica, Arial! important;  div # register-form input [type = "text"]: hover border-color: # b1b1b1;  div # register-form input [type = "text"]: focus -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc; 

Ora, modifico il pulsante, aggiungendo uno stato al passaggio del mouse e sostituendo il pulsante predefinito con un'immagine.

 div # register-form input [type = "submit"] # register background: url (images / register.jpg) no-repeat; confine: 0; chiaro: entrambi; cursore: puntatore; altezza: 31px; overflow: nascosto; posizione: relativa; a sinistra: 295px; text-indent: -9999px; top: 42px; larghezza: 92px;  div # register-form input [type = "submit"] # register: hover background-position: 0 -32px; 

Infine, aggiungiamo alcuni stili generali.

 div # register-form span display: block; margin-bottom: 22px;  div # register-form div.title margin-left: 15px div # register-form div.title h1, div # register-form div.title span text-shadow: 1px 1px 0px #fff div # register- forma div.title h1 margin: 7px 0;  p.statement position: absolute; bottom: -2px; a sinistra: 10px; font-size: .9em; color: # 6d6d6d; text-shadow: 1px 1px 0px #fff; 

Ecco! noi abbiamo la nostra forma. Ora, passiamo alla funzionalità jQuery.

---

Passaggio 3. jQuery

Innanzitutto, dobbiamo includere jQuery in WordPress. Per raggiungere questo obiettivo, dobbiamo inserire il seguente blocco di codice prima del tag all'interno del file header.php. Ricorda, poiché WordPress stesso utilizza jQuery, non vogliamo caricarlo potenzialmente due volte!

Scarica Fancybox e inseriscilo nella tua cartella WordPress. Per organizzare un po 'di più, ho creato una cartella "Include".

Quindi, apri il file footer.php e posiziona quanto segue prima della fine del file etichetta

E ora, chiamiamo il metodo fancybox; incollalo dopo il codice sopra e prima del tag body di chiusura.

 jQuery (document) .ready (function () jQuery (". show"). fancybox ('titleShow': 'false', 'transitionIn': 'fade', 'transitionOut': 'fade');) ;

Sono stati fatti! Il nostro modulo è stato creato; abbiamo finalmente bisogno di passare le informazioni necessarie su WordPress per farlo funzionare correttamente.

---

Passaggio 4. WordPress

Non c'è niente di speciale qui; richiediamo solo due snippet di WordPress, nascosti nel file wp-login.php.

Il primo frammento:

E:

Il codice finale dovrebbe assomigliare così:

 
  
 
 
Registra il tuo account
 Iscriviti con noi e divertiti! 
 
     
 
La password verrà inviata via email.
 
 
 

Si prega di notare che è veramente importante, e necessario, per avere user_login come nome e come ID nel proprio input di testo; lo stesso vale per l'input di posta elettronica. Altrimenti, non funzionerà.

E con quello, abbiamo finito!

Conclusione

Con un tocco di codice e alcune modifiche, siamo riusciti a creare un "Modulo di registrazione" di grande impatto per i nostri utenti. Cosa pensi?