Aducerea procesului de membru în fața site-ului dvs.

WordPress livrează cu abilitatea de a adăuga utilizatori, fie manual, fie prin înregistrare. Aceasta include capacitatea de a atribui diferite roluri și capabilități. Dar, de cele mai multe ori, nu doriți ca utilizatorii să fie expuși la backend-ul WordPress. În acest tutorial vă vom arăta cum să creați un formular de înregistrare personalizat în partea din față a site-ului dvs., precum și un formular de profil personalizat. Utilizatorii vor primi, de asemenea, e-mailuri personalizate cu fiecare pas al procesului de înregistrare. Rețineți că acest tutorial nu acoperă plățile pentru membri.


Unele fundaluri și ceea ce vom acoperi

Vom folosi tema TwentyEleven unde vom edita functions.php si header.php. Unii oameni ar putea prefera să folosească BuddyPress pentru o astfel de sarcină, și asta e misto, dar mă simt de parcă ai toate aceste caracteristici dacă nu le vei folosi.

Asta vom face

  • Instalarea pluginurilor necesare
  • Configurarea pluginurilor
  • Adaptarea meniurilor noastre
  • Crearea unei pagini de profil personalizate
  • Crearea unei pagini personalizate de înregistrare
  • Crearea de e-mailuri personalizate pentru fiecare etapă a procesului de înregistrare

Este un fel de proces lung, pentru a lua o cafea sau o bere și a vă alătura.


Pasul 1 Obțineți pluginurile

Bine, mai întâi, mai întâi, să primim pluginurile de care avem nevoie. Voi fi adăugați-le folosind interfața WordPress, dar dacă preferați, puteți utiliza linkurile de mai jos pentru a le descărca și instala manual.

  • Tema Mea de conectare
  • Tema Profilul meu
  • WP E-mailuri mai bune


Pasul 2 Configurați

"Asigurați-vă că aveți" Oricine se poate înregistra "bifat în Setări generale"

Este timpul să vă configurați pluginurile, dar înainte de asta, asigurați-vă că aveți Oricine se poate înregistra bifați sub Setări -> Generalități.

Bine, acum pe configurația pluginului, începeți cu:

Tema Conectarea mea - Configurare de bază

Tema Loginul meu creează o pagină "login / logout" o dată instalată și, în mod implicit, o adaugă paglistului tău. Pentru mai mult control, lăsați-l să se configureze manual:

  1. Mergi la Setări -> Tema Mea de conectare și deconectați opțiunea "Afișați în Pagelist"
  2. Faceți clic pe "Salvați modificările"
  3. Navigheaza catre Aspect -> Meniuri și adăugați-o în meniu (dacă tema dvs. acceptă mai multe meniuri pe care le puteți pune oriunde) *

*Nu sunteți sigur cum să utilizați meniul? Citiți aici

Bine - deci acum, dacă sari la partea din față a site-ului tău, vei observa că ai un element din meniul de conectare / deconectare. Ar trebui să spună "Deconectați-vă" pe măsură ce vă conectați!

Dar să zicem că nu vrei în meniul tău? Nicio problemă, o puteți elimina din meniu și o puteți adăuga ca widget. Din fericire, Jeff Farthing (creatorul pluginului) a inclus un widget minunat cu multe opțiuni. Toate sunt destul de explicative, așa că nu voi trece prin ea. Doar du-te la Aspect -> Widgeturi și trageți widgetul Theme My Login (Login) la zona de widget dorită. Prefer asta în meniul meu, dar ai putea avea pe amândouă.

Acum permiteți configurarea unora dintre module.

Tema Conectarea mea - Configurarea modulelor

Salt înapoi la Setări -> Tema Mea de conectare -> Module și permiteți următoarele:

  • Activați e-mailurile personalizate
  • Activați redirecționarea personalizată
  • Activați securitatea
  • Activați profilurile tematice
  • Activați Moderarea utilizatorilor

Grozav. Acum, să configuram aceste module începând cu E-mail. Practic, este necesar să creați conținut de e-mail personalizat pentru fiecare fază a procesului de aderare (Utilizator nou, Parola de preluare, Resetare parolă, activare utilizator, aprobare utilizator, refuzare utilizator). Evident, depinde de tine ceea ce scrii, dar asigurați-vă că:

  • Pentru "De la e-mail" utilizați ceva de genul [email protected]
  • Veți dori să fie format "E-mail Format" Text simplu.

Este o idee bună să utilizați variabilele de e-mail - %logare utilizator%, % USER_EMAIL%, % User_pass% - dar nu vă îngrijorați prea mult de al îndoi perfect chiar acum. Vom trimite câteva teste pentru a le putea lustrui mai târziu.

Bine pregătit pentru unii Redirectionarea magie? În calitate de Administrator veți dori totuși să fiți dus în backend / tabloul de bord când vă autentificați, astfel încât veți dori să părăsiți rolul Administrator ca atare (Nu vă închideți). Vreau ca utilizatorii mei să fie luați la profilul lor atunci când se autentifică, așa că voi schimba toate celelalte roluri. Deci, pentru "Log in":

  • Utilizați opțiunea "locație particularizată" și introduceți ceva asemănător http: // yourdomain / profil
    (presupunând că structura permalink este /% Categorie% /% postname% /)

și pentru "Deconectați-vă":

  • Îl pun pe "Referer". În acest fel, atunci când utilizatorii se deconectează, ei rămân pe pagina în care se aflau.

Pentru Securitate Am de gând să plec așa cum este, dar merită să aruncați o privire pentru a vedea dacă aceste setări vă sunt potrivite. In cele din urma Moderare. Pe măsură ce rulam un site gratuit, alegeți COnfirmare email pentru Moderarea utilizatorilor.

Bine, să aplicăm o bunătate a profilului.

Tema Profilul meu

Vom avea nevoie de o pagină care să găzduiască profilul nostru de utilizatori în așa ceva Pagini -> Adăugați noi. Dați paginii dvs. un titlu, cum ar fi "Profil", și inserați acest scurtcod [topic-my-profile] în conținut (asigurați-vă că vă aflați în modul de editare HTML). Luați notă de ID-ul paginii și publicați.

Mergi la Setări -> Tema Profilul meu. Aplicați aceste setări, dar aveți grijă să nu vă blocați din backend:

  1. Introduceți pagina de identificare a paginii nou create "Profil"
  2. Asigura-te Afișați în Pagelist "Niciodată" nu este selectată (folosim meniurile WP 3)
  3. Folosiți theme-my-profile.css este bifată.
  4. Pentru setările șablonului, verificați imaginea de mai jos:

Salvați modificările.


Pasul 3 Configurarea meniurilor

În principiu, vom folosi două meniuri: una pentru utilizatorii conectați și una pentru utilizatorii sau membrii non-afiliați. Deci, deschideți programul FTP și descărcați header.php din tema ta. Vrem să adăugăm o declarație if la codul care stabilește meniul. Linia 118 este dacă folosiți TwentyEleven.

Înlocuiți acest lucru:

  "primar")); ?>

Cu asta:

   'meniu utilizator', 'items_wrap' => '
    % 3 $ s
',' container_class '=>' meniu-menu-container '));?> 'main-menu', 'items_wrap' => '
    % 3 $ s
',' container_class '=>' meniu-menu-container '));?>

Dacă doriți, puteți să citiți mai multe despre wp_nav_menu în Codul WordPress.

Bine acum functions.php fișier și modificați linia 101 în header.php pentru a reflecta actualizările.

Înlocuiți acest lucru:

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

Cu asta:

 register_nav_menus (array ('main-menu' => __ ('Meniu principal'), 'meniu utilizator' => __ ('Meniu utilizator');));

Acum, încărcați aceste fișiere în directorul tematic și treceți la backendul WordPress. Să pregătim meniurile, du-te la Aspect -> Meniuri. Ar trebui să aveți acum două meniuri disponibile: "meniul principal" și "meniul utilizatorului", activați ambele.

  • În meniul principal, este afișată pagina "Conectare"
  • Sub meniul utilizatorului, aveți pagini "Conectare" și "Profil"

Salvați modificările și să intrăm în șabloane de e-mail personalizate.


Pasul 4 E-mailuri mai bune pentru WP - Configurare

Între timp, pentru a obține niște e-mail-uri personalizate care se întâmplă așa să sari Setări -> E-mailuri mai bune pentru WP. Pentru intrările de "Nume" și "Adresa de e-mail" utilizați ceva asemănător Numele blogului și [email protected]. Bine bine, acum derulați în jos și trimiteți-vă o previzualizare. Hop peste clientul dvs. de e-mail și ar trebui să aveți un e-mail destul de frumos caută în așteptare pentru tine. Nu este rău, dar permiteți-l personalizați puțin. Salt înapoi la WordPress și copiați toate acele HTML și inserați-l în editorul dvs. de text preferat. Depinde de cât de mult vrei să editezi acest lucru. Să o păstrăm simplu și să schimbăm sigla. Deci, creați o imagine de 500px la 100px înălțime. Încărcați-l pe serverul dvs. și copiați calea.

Pe linia 22 în HTML înlocuiți % BLOG_NAME% cu imaginea ta, ceva de genul:

 

Acum trimiteți-vă un alt test și ar trebui să aveți ceva de genul:


Pasul 5 Pagina de înregistrare personalizată

Lucrurile se formează, dar utilizați link-ul de înregistrare sub formularul de înregistrare pentru a vă înregistra. Păcat. Vreau ca "registrul" să facă parte din meniul meu. Deci, dă-i drumul Aspect -> Meniuri și adăugați un nou element de meniu în "meniul principal" utilizând panoul "Link-uri personalizate". Am sunat pe mine "Înscrieți-vă" și URL-ul este http://yourdomain.com/login?action=register (presupunând că permalinks-urile dvs. sunt setate la% Categoria% /% postname%).

Excelent, acum avem o filă "înscrie-te" care duce oamenii la pagina de înregistrare. Bine, bine? Dar să spunem că doriți să includeți câteva câmpuri personalizate? Ca și prenume, site și cod poștal.

Tema Conectarea mea se face cu câteva formulare de șablon. Deci puteți descărca formularele wp-content -> plugin-uri -> temă-my-login -> șabloane și să le editați și să le încărcați în directorul tematic. Dar hai să o folosim functions.php. Deci, descărcați-vă functions.php și lipiți-l după tot codul existent.

 / * ------------------------------------------------ ----------------------------------- * / / * Adăugarea câmpurilor obligatorii pe pagina de înregistrare / * - -------------------------------------------------- ------------------------------- * / add_action ('register_form', 'show_this'); ADD_ACTION ( 'register_post', 'check_fields, 10,3); add_action ('user_register', 'register_extra_fields'); funcția show_this () ?> 

adăugați ('empty_realname', 'EROARE: Introduceți numele primului dvs. nume "); altceva $ site = $ _POST ['first_name']; site-ul global $, dacă $ _POST ['website'] ==") ('empty_realname', 'EROARE: ($ _POST ['postcode'] == ") $ errors-> add (nume de site-ul dvs.) "empty_realname", "EROARE: Introduceți codul poștal "); altceva $ postcode = $ _POST ['postcode']; funcția register_extra_fields ($ user_id, $ password =" "$ meta = , $ _POST ['first_name'], $ _POST ['first_name']), update_user_meta ($ user_id, 'website', $ _POST ['website']);

Bine, deci ar trebui să editați asta pentru a vă potrivi. Iată o defalcare de bază:

  • Prima funcție ( show_this ) spune că introduceți următoarele câmpuri în formular
  • A doua funcție ( check_fields ) verifică dacă câmpurile sunt completate și spitalizează erorile dacă este necesar (validarea de bază)
  • A treia funcție ( register_extra_fields ) actualizează datele utilizatorului - precum și profilul utilizatorului

Și pentru a primă hai să schimbăm cuvântul "înregistrare" în "join":

 / * ------------------------------------------------ ----------------------------------- * / / * Modificați "înregistrare" în "join" / * - -------------------------------------------------- -------------------------------- * / funcția tml_title_filter ($ title, $ action) if ($ action == 'register') retur __ ('join'); întoarcere $ titlu;  add_filter ('tml_title', 'tml_title_filter', 10, 2);

Pasul 6 Pagina personalizată a profilului

La fel ca majoritatea oamenilor, eu mă deranjează de ce WordPress are chestii ca AIM și Jabber în câmpurile de profil ... așa că lasă să scapi de ele! Inserați următorul cod sub actualul functions.php cod.

 / * ------------------------------------------------ ----------------------------------- * / / * Reomve feilds din profil / * ----- -------------------------------------------------- ---------------------------- * / funcția extra_contact_info ($ contactmethods) unset ($ contactmethods ['target']); desetate ($ contactmethods [ 'YIM']); desetate ($ contactmethods [ 'trăncăni']); $ contactmethods ['postcode'] = 'Codul poștal (obligatoriu)'; returnați metode de contact $;  add_filter ('user_contactmethods', 'extra_contact_info');

Pasul 7 Testarea și stilul

Bine, bine, bine! (Stilul lui Kevin Hart) Să testăm asta! Deconectați-vă de WordPress și faceți clic pe partea din față a site-ului dvs. Dă clic pe "înscrie-te" și trece prin proces.

Luați notă de orice schimbări de care aveți nevoie pentru a face, de exemplu, mesaje șablon de e-mail etc., apoi aplicați-le și retestați până când sunteți fericiți.

Acum, poate doriți să-l stil un pic, și, din fericire, este ușor să utilizați unele stiluri de stiluri numite în mod corespunzător încărcate în directorul temă. Puteți să le descărcați pentru a începe să utilizați linkul "Descărcați fișierele sursă" din partea de sus a acestui tutorial.

Folosind aceste foi de stil veti asigura ca CSS nu este suprascris atunci cand tema dvs. se actualizeaza.


Pasul 8 Un lucru mai mult

Un ultim lucru, bara de administrare, să o eliminăm pentru totdeauna. Adăugați codul de mai jos la dvs. functions.php.

 / * ------------------------------------------------ ----------------------------------- * / / * Dezactivează barul de administrare pentru toate / * ---- -------------------------------------------------- ----------------------------- * / show_admin_bar (false);

Concluzie

Deci, puteți vedea că este destul de ușor să trageți procesul de aderare în fața site-ului dvs. Această metodă este extrem de flexibilă, configurația pluginului folosită în acest tutorial poate să difere în funcție de nevoile dvs. De asemenea, este destul de ușor să aveți conținut specific pentru membri (încercați să utilizați membrii wp). Am reușit să folosesc acest lucru în proiecte comerciale.

Vă rugăm să lăsați orice feedback, sau dacă aveți sugestii pe care aș dori să le aud, în comentariile de mai jos.

Cod