Portare il processo di adesione sul lato anteriore del tuo sito

WordPress viene fornito con la possibilità di aggiungere utenti, manualmente o tramite registrazione. Ciò include la possibilità di assegnare vari ruoli e capacità. Ma molto spesso non vuoi che gli utenti siano esposti al backend di WordPress. In questo tutorial ti mostrerò come creare un modulo di registrazione personalizzato nella parte anteriore del tuo sito e un modulo di profilo personalizzato. Gli utenti riceveranno anche e-mail personalizzate con ogni fase del processo di registrazione. Si prega di notare che questo tutorial non coprirà i pagamenti di adesione.


Qualche sfondo e cosa tratteremo

Useremo il tema TwentyEleven in cui modificheremo functions.php e il header.php. Alcune persone potrebbero preferire usare BuddyPress per un compito come questo, ed è bello, ma ho voglia di sapere perché hanno tutte quelle funzionalità se non le userai.

Questo è quello che faremo

  • Installazione dei plugin richiesti
  • Configurazione dei plugin
  • Adattare i nostri menu
  • Creazione di una pagina del profilo personalizzata
  • Creazione di una pagina di registrazione personalizzata
  • Creazione di e-mail personalizzate per ogni fase del processo di registrazione

È una specie di processo lungo, quindi prendi un caffè o una birra e ridiscendi.


Passaggio 1 Ottieni i plugin

Okay, per prima cosa, prendiamo i plugin di cui abbiamo bisogno. Li aggiungerò usando l'interfaccia di WordPress, ma se preferisci puoi usare i link qui sotto per scaricarli e installarli manualmente.

  • Tema Il mio login
  • Tema Il mio profilo
  • WP Better Email


Passaggio 2 Configura

"Assicurati di aver selezionato" Chiunque può registrarsi "sotto Impostazioni generali"

È tempo di configurare i nostri plug-in, ma prima però assicurati di averlo Chiunque può registrarsi spuntato sotto Impostazioni -> Generale.

Ok, ora nella configurazione del plugin, iniziamo con:

Tema My Login - Impostazione di base

Tema Il mio login crea una pagina "login / logout" una volta installato e per impostazione predefinita lo aggiunge alla lista delle pagine. Per maggiore controllo, impostalo manualmente:

  1. Vai a Impostazioni -> Temi Il mio login e deselezionare l'opzione "Mostra in lista pagine"
  2. Fai clic su "Salva modifiche"
  3. Navigare verso Aspetto -> Menu e aggiungilo al tuo menu (se il tuo tema supporta più di un menu puoi metterlo ovunque) *

*Non sai come usare il menu? Leggi qui

Va bene, quindi ora se salti in primo piano sul tuo sito web noterai che hai una voce di menu di accesso / uscita. Dovresti dire "Esci" quando sei loggato. Bello!

Ma diciamo che non lo vuoi nel tuo menu? Nessun problema, puoi rimuoverlo dal tuo menu e aggiungerlo come widget. Fortunatamente Jeff Farthing (creatore del plugin) ha incluso un widget elegante con un sacco di opzioni. Sono tutti abbastanza auto-esplicativi, quindi non lo farò. Basta andare Aspetto -> Widget e trascinare il widget Tema il mio login sull'area del widget desiderata. Lo preferisco nel mio menu, ma potresti averli entrambi.

Ora consente di configurare alcuni dei moduli.

Tema Il mio login - Configurazione dei moduli

Torna a Impostazioni -> Temi Login personale -> Moduli e abilitare quanto segue:

  • Abilita e-mail personalizzate
  • Abilita reindirizzamento personalizzato
  • Abilita sicurezza
  • Abilita i profili a tema
  • Abilita moderazione utente

Grande. Ora configuriamo quei moduli che iniziano con E-mail. Fondamentalmente ti è richiesto di creare contenuti e-mail personalizzati per ogni fase del processo di adesione (Nuovo utente, Recupera password, Reimposta password, Attivazione utente, Approvazione utente, Rifiuto utente). Ovviamente questo dipende da te ciò che scrivi, ma assicurati:

  • Per "Da e-mail" usa qualcosa come [email protected]
  • Vorresti che il "Formato E-mail" fosse Testo normale.

È una buona idea usare le variabili email - %Login utente%, % User_email%, % User_pass% - ma non preoccuparti troppo di eliminarlo perfettamente adesso. Invieremo alcuni test in modo da poterlo lucidare in seguito.

Okay, pronto per alcuni reindirizzamento Magia? Come amministratore, vorrai comunque essere indirizzato al back-end / dashboard quando effettui il login, quindi ti consigliamo di lasciare il ruolo di Amministratore così com'è (non chiuderti). Voglio che i miei utenti vengano portati al loro profilo quando accedono, quindi cambierò tutti gli altri ruoli. Quindi per "Accedi":

  • Usa l'opzione "posizione personalizzata" e inserisci qualcosa di simile http: // Dominio / profilo
    (assumendo che la tua struttura di permalink sia /% Categoria% /% postname% /)

e per "Esci":

  • Sto mettendo "Referer". In questo modo quando gli utenti si disconnettono rimangono nella pagina in cui si trovavano.

Per Sicurezza Vado via così com'è, ma vale la pena dare un'occhiata per vedere se quelle impostazioni ti stanno bene. Finalmente Moderazione. Poiché stiamo eseguendo un sito gratuito, scegli Conferma via email per Moderazione dell'utente.

Okay, applichiamo un po 'di profilo.

Tema Il mio profilo

Avremo bisogno di una pagina per ospitare il nostro profilo utente in modo da capirci Pagine -> Aggiungi nuovo. Assegna un titolo alla tua pagina, ad esempio "Profilo" e incolla questo shortcode [theme-my-profile] nel contenuto (assicurati di essere nella modalità di modifica HTML). Prendi nota dell'ID della pagina e pubblica.

Vai a Impostazioni -> Tema Il mio profilo. Applica queste impostazioni, ma fai attenzione a non bloccarti dal back-end:

  1. Inserisci l'ID della pagina "Profilo" appena creata
  2. Assicurarsi Mostra in Lista pagine "Mai" è selezionato (stiamo usando WP 3 Menu)
  3. Usa theme-my-profile.css è spuntato.
  4. Per le impostazioni del modello controlla l'immagine qui sotto:

Salva le modifiche.


Passaggio 3 Impostazione dei menu

Fondamentalmente utilizzeremo due menu: uno per gli utenti che hanno effettuato l'accesso e uno per gli utenti che hanno effettuato la disconnessione o che non sono membri. Quindi apri il tuo programma FTP e scarica header.php dal tuo tema. Vogliamo aggiungere un'istruzione if al codice che imposta il menu. È la linea 118 se usi TwentyEleven.

Sostituisci questo:

  'primario')); ?>

Con questo:

   'menu utente', 'items_wrap' => '
    % 3 $ s
',' container_class '=>' menu-menu-contenitore '))??> 'menu principale', 'items_wrap' => '
    % 3 $ s
',' container_class '=>' menu-menu-contenitore '))??>

Se lo desideri, puoi leggere ulteriori informazioni su wp_nav_menu nel codice WordPress.

Ok ora prendi il functions.php file e modificare la linea 101 in header.php per riflettere gli aggiornamenti.

Sostituisci questo:

 register_nav_menu ('primary', __ ('Primary Menu', 'twentyeleven'));

Con questo:

 register_nav_menus (array ('menu principale' => __ ('Menu principale'), 'menu utente' => __ ('Menu utente'),));

Ora carica quei file nella tua directory dei temi e vai al backend di WordPress. Impostiamo i menu, vai a Aspetto -> Menu. Ora dovresti avere due menu disponibili: "menu principale" e "menu utente", attivare entrambi.

  • Sotto il menu principale hai la pagina "Login"
  • Nel menu utente sono presenti le pagine "Login" e "Profilo"

Salva le modifiche e inseriamo alcuni modelli di email personalizzati.


Passaggio 4 WP Better Emails - Setup

Poche ore per ricevere e-mail personalizzate in modo da saltare Impostazioni -> WP Better Email. Gli input "Nome" e "Indirizzo email" usano qualcosa di simile Nome del blog e [email protected]. Ok, bene, ora scorri verso il basso e ti mandi un'anteprima. Salta sul tuo client di posta elettronica e dovresti avere una bella e-mail dall'aspetto che ti aspetta. Non male, ma consente di personalizzarlo un po '. Torna a WordPress e copia tutto l'HTML e incollalo nel tuo editor di testo preferito. Dipende da te quanto vuoi modificare questo. Cerchiamo di mantenerlo semplice e basta cambiare il logo. Quindi crea un'immagine 500 px di larghezza per 100 px di altezza. Caricalo sul tuo server e copia il percorso.

Nella riga 22 del codice HTML sostituire il file % BLOG_NAME% con la tua immagine, qualcosa del genere:

 

Adesso ti mando un altro test e dovresti avere qualcosa del genere:


Passaggio 5 Pagina di registrazione personalizzata

Le cose stanno prendendo forma, ma per registrarti hai usato il link di registrazione sotto il modulo di login. Bummer. Voglio che il "registro" faccia parte del mio menu. Quindi dirigetevi verso Aspetto -> Menu e aggiungi una nuova voce di menu al "menu principale" usando il pannello "Collegamenti personalizzati". Ho chiamato il mio "Iscriviti" e l'URL è http://yourdomain.com/login?action=register (assumendo che i permalink siano impostati su% Categoria% /% postname%).

Ottimo quindi ora abbiamo una scheda "iscrizione" che porta le persone alla pagina di registrazione. Bello vero? Ma diciamo che vuoi includere alcuni campi personalizzati? Come nome, sito web e codice postale.

Tema Il mio login viene fornito con alcuni moduli. Quindi puoi scaricare i moduli wp-content -> plugins -> theme-my-login -> templates e modificali e caricali nella tua directory dei temi. Ma facciamolo usando il nostro functions.php. Quindi scarica il tuo functions.php e incollalo dopo tutto il codice esistente.

 / * ------------------------------------------------ ----------------------------------- * / / * Aggiunta di campi obbligatori alla pagina di registrazione / * - -------------------------------------------------- ------------------------------- * / add_action ('register_form', 'show_this'); add_action ( 'register_post', 'check_fields', 10,3); add_action ('user_register', 'register_extra_fields'); function show_this () ?> 

aggiungi ('empty_realname', "ERRORE: Inserisci il nome del tuo nome "); else $ website = $ _POST ['first_name']; global $ website; if ($ _POST ['website'] ==") $ errors-> aggiungi ('empty_realname', "ERRORE: Inserisci il nome del tuo sito web "); else $ website = $ _POST ['sito web']; $ codice postale globale; if ($ _POST ['postcode'] ==") $ errors-> add ( 'empty_realname', "ERRORE: Inserisci il tuo codice postale "); else $ codice postale = $ _POST ['codice postale']; funzione register_extra_fields ($ user_id, $ password =" ", $ meta = array ()) update_user_meta ($ user_id, ' first_name ', $ _POST [' first_name ']); update_user_meta ($ user_id,' sito web ', $ _POST [' sito web ']); update_user_meta ($ user_id,' codice postale ', $ _POST [' codice postale ']);

Va bene così potresti voler editare quello per te. Ecco una ripartizione di base:

  • La prima funzione ( show_this ) dice inserire i seguenti campi nel modulo
  • La seconda funzione ( check_fields ) controlla se i campi sono compilati e sputa gli errori se necessario (convalida di base)
  • La terza funzione ( register_extra_fields ) aggiorna i dati dell'utente, nonché il profilo dell'utente

E per a indennità cambiamo la parola "registrati" in "join":

 / * ------------------------------------------------ ----------------------------------- * / / * Cambia 'register' in 'join' / * - -------------------------------------------------- -------------------------------- * / function tml_title_filter ($ title, $ action) if ($ action == 'register') return __ ('join'); return $ title;  add_filter ('tml_title', 'tml_title_filter', 10, 2);

Passaggio 6 Pagina profilo personalizzato

Come la maggior parte delle persone, mi sconcerta perché WordPress ha cose come AIM e Jabber nei campi del profilo ... quindi lasciali liberi! Incolla il seguente codice sotto il tuo attuale functions.php codice.

 / * ------------------------------------------------ ----------------------------------- * / / * Riempi i campi dal profilo / * ----- -------------------------------------------------- ---------------------------- * / function extra_contact_info ($ contactmethods) unset ($ contactmethods ['aim']); unset ($ contactmethods [ 'yim']); unset ($ contactmethods [ 'jabber']); $ contactmethods ['postcode'] = 'Codice postale (richiesto)'; return $ contactmethods;  add_filter ('user_contactmethods', 'extra_contact_info');

Passaggio 7 Test e stile

Va bene, va bene, va bene! (Stile Kevin Hart) Proviamo questo! Disconnetti da WordPress e salta in primo piano sul tuo sito. Fai clic su "registrati" e segui il processo.

Prendi nota di eventuali modifiche che devi apportare, ad esempio, i messaggi del modello e-mail, ecc., Quindi applicali e riesegui il test fino a quando non sei soddisfatto.

Ora potresti volerlo un po 'di stile, e per fortuna è facile usare alcuni fogli di stile con nome appropriato caricati nella tua directory dei temi. Puoi scaricarli per iniziare a utilizzare il link "Scarica file sorgente" nella parte superiore di questo tutorial.

L'utilizzo di questi fogli di stile assicurerà che il tuo CSS non venga sovrascritto quando il tuo tema si aggiorna.


Step 8 Un'altra cosa

Un'ultima cosa, la barra di amministrazione, cerchiamo di bandirla per sempre. Aggiungi il codice qui sotto al tuo functions.php.

 / * ------------------------------------------------ ----------------------------------- * / / * Disabilita la barra di amministrazione per tutti / * ---- -------------------------------------------------- ----------------------------- * / show_admin_bar (false);

Conclusione

In questo modo puoi vedere che è piuttosto semplice portare la procedura di iscrizione in primo piano sul tuo sito web. Questo metodo è estremamente flessibile, la configurazione del plugin utilizzata in questo tutorial può differire in base alle proprie esigenze. È anche abbastanza facile avere contenuti specifici per i membri (prova ad usare i membri wp). Ho avuto successo usando questo in progetti commerciali.

Si prega di lasciare qualsiasi feedback, o se avete suggerimenti mi piacerebbe sentirli, nei commenti qui sotto.