Oggi vediamo come creare un modulo in JavaScript per la registrazione ed il Login in WordPress e disegnato per Bootstrap versione 4. Come funzioni supplementari ho inserito la possibilità per l’utente di ricevere una email di conferma di avvenuta registrazione.
Ho anche inserito la possibilità di ripristinare la password con una a 6 caratteri generata da WordPress e che verrà inviata alla email dell’utente ogni qualvolta ne richieda una.
Il bello di questo modulo di registrazione è che avviene tutto in JavaScript ed è facile per voi anche da “modellare” in base alle vostre esigenze.
Partiamo creando una nuova cartella dentro al tema e la chiameremo “inc” e poi proseguiamo inserendo come prima cosa il codice HTML necessario per inserire le voci “Login”, “Registrati” e “Logout”.
Creiamo un file a parte rinominandolo register.php, che conterrà al suo interno questo codice e lo inseriamo dentro la cartella “inc”:
Come potete vedere vi saranno 2 modal da inserire, ora le creeremo ma in 2 file separati chiamati form-login.php e form-register.php, non sono altro che 2 form separati, uno appunto per la parte del Login ed uno invece per la registrazione.
Creiamo ora un nuovo file form-login.php e lo inseriamo dentro la cartella “inc”, il codice per il form login è il seguente:
Ora creiamo il codice per il form registrazione, sempre dentro la cartella “inc” e lo chiamiamo form-register.php il codice è il seguente:
Abbiamo creato al momento i 2 form, ora, sempre dentro la cartella “inc” andiamo ad inserire i file per la convalida dei 2 form e lo chiamiamo register-functions.php, il codice sarà il seguente:
Se notate bene, nel file register-functions.php dovrete andare alla riga numero 15 e cambiare nel wp_register_script la vocina “themename-jquery” dentro all’array. Questa è una sicurezza maggiore, in quanto grazie a questa funzione, dico a WordPress di aspettare che sia caricato jQuery nel mio sito prima di procedere con le chiamate Ajax.
Ora ci occupiamo della parte JavaScript, quindi, se non avete già una cartella “js” nel vostro tema, createne una ed inserite questo file che chiamerete registration.js
Abbiamo quasi finito! Ora dobbiamo includere i files nel tema e partiamo con l’includere il file register-functions.php nel vostro file functions.php
Bene, ora non resta altro che inserire le 2 modal dei 2 form, registrazione e login dentro ad ogni pagina del sito, per questo è bene inserire il tutto nel footer.php del vostro tema:
Fatto questo, avrete un form per il login e la registrazione, completo e compatibile con la più recente versione di Bootstrap, ovvero la versione 4.
Per chi volesse abbellirlo, nel codice è presente anche un loader carino. Questo è il CSS che ho utilizzato:
Se vi interessa ho sviluppato anche un plugin con circa lo stesso codice, ma che vi offre anche la possibilità, tramite un pannello di opzioni, di escludere il CSS di BootStrap e di scegliere la posizione del menu login/Registrati.
Potete scaricare gratuitamente il plugin a questo link, finché WordPress.org non mi accetterà il plugin 🙂 Come promesso eccovi qua il link alla repository di WordPress: WP Ajax Register Login
Non si tiene in considerazione di eventuali altre funzioni aggiunte dai plugin, ad esempio come il recaptcha. Un’altra questione importante sono gli aggiornamenti, personalmente preferisco utilizzare un plugin con la sola accortezza di verificare prima di aggiornare.Ciao 🙂
Ciao Django, essendo un popup non necessita di reCaptcha, in quanto il boot non sa dove compiere l’azione javascript assegnata. Se proprio si viene presi di mira allora serve.
Il plugin non necessita di update.
Buongiorno e complimenti per il plugin, molto ben fatto! Avrei una domanda, è possibile creare una voce di menù tipo “Login” da poter inserire in un tema Genesis, ovvero che venga inserito nella lista delle voci possibili da inserire nei vari menù del tema child? Ed ovviamente eliminare il badge verde/rosso (molto carino).. un grazie in anticipo!
Ciao Christian, per associare una call/azione ad un qualsiasi bottone o tag hmtl nel menu di WP devi mettere come attributi della voce: data-toggle=”modal” data-target=”#modal-login”
Mentre per il badge dipende appunto dal tema installato, in questo caso puoi sovrascrivere a cascata il codice CSS!
[…] 11. Registrazione e Login in Ajax con WordPress e BootStrap v4 … […]