Cum de a dezvolta un site de membru cu WordPress Partea 1

WordPress deja livrează cu o mulțime de lucruri bune pentru a face un site de membru. Din păcate, cea mai mare parte a procesului este tratată prin spatele site-ului și, în mod ideal, dorim să-i ținem pe utilizatori departe de zona administratorului. Deci, în cadrul acestei serii cu trei părți, vom trece acest proces în fața site-ului, aruncând o parte din personalizare și alăturându-l pe drum.

La sfârșitul seriei ar trebui să aveți un site în care oamenii să se poată înscrie, să se logheze și să editeze propriile detalii ale contului. Deoarece este un subiect atât de vast, nu vom putea să acoperim totul, dar voi face tot posibilul pentru a vă oferi o bază solidă pentru un site de membru.

Pe scurt, acesta este ceea ce se poate aștepta în cadrul seriei:

• Partea întâi: Formulare de înregistrare și de autentificare
• Partea a doua: Adăugarea câmpurilor personalizate la formularul de înregistrare
• Partea a treia: Dezvoltarea unei secțiuni "Profil de utilizator"

Acum, înainte de a începe, există un argument bun pentru ca acest cod să fie făcut ca un plugin - la urma urmei, este destul de funcțional. Dar din cauza cantității de "theming"Vom face, este complet rezonabil ca codul să fie găzduit în tema noastră.  

Haideți să mergem

Ca dezvoltator WordPress folosesc Sage ca tema mea de pornire, deci voi fi în curs de dezvoltare folosind asta. Dacă nu ați folosit anterior Sage (anterior cunoscut sub numele de Roots), există o ușoară curbă de învățare pe măsură ce utilizează Bower și Gulp, astfel încât va trebui să aveți o experiență folosind aceste. După ce ați spus toate acestea, puteți aplica cu ușurință principiile de aici pentru orice temă. Mai sunt multe de spus despre temele inițiale, dar să salvăm asta pentru un alt moment.

Deci, fără altă întârziere, să intrăm în secțiunea de înregistrare a site-ului dvs. Există în esență două abordări și am încercat amândouă. Primul este să dezvolți un formular personalizat și să procesați înregistrarea dvs., iar al doilea implică extinderea formularelor de înregistrare nativă și de conectare. Prefer acest lucru din urmă, și de aceea: nativul este întotdeauna mai bun, este mai ușor de întreținut și există părți mult mai puțin în mișcare.

Un dezavantaj în legătură cu utilizarea formularelor native pentru autentificare și înregistrare este că obțineți URL-urile native: http://AnExampleDomain.com/wp-admin și http://AnExampleDomain.com/login/?register.

Nu vă faceți griji, deoarece există modalități de a rescrie aceste, deci nu va fi evident că este un site WordPress.

Obținerea casei noastre în ordine  

Îmi place să păstrez o casă curată, așa că în funcțiile mele.php voi include un fișier numit admin.php care va conține toate funcțiile noastre legate de admin. Codul de mai jos (linia 12) este modul în care ați include fișierul dacă utilizați Sage WP Starter Theme.  

Dacă nu utilizați Sage puteți folosi doar ceva de genul: 
require_once locate_template ('/lib/admin.php');
Notă marginală: Acest lucru nu este legat de acest subiect, dar aș recomanda să includeți mai multe în funcțiile.php și apoi să codificați în fișierele respective. Păstrează fișierele mai curate și mai ușor de citit. 
Vom păstra activele de administrare (CSS și imagini) într-un mod separat admin director. Acest lucru este opțional, dar nu uitați să schimbați calea atunci când consultați aceste fișiere dacă utilizați o structură diferită.  
Să începem cu CSS
Vrem să ignorăm stilurile pe care WordPress le-a aplicat paginilor de conectare și înregistrare.
 
http://AnExampleDomain.com/wp-admin
 
http://AnExampleDomain.com/wp-login.php?action=register
 
Deci, pentru a face acest lucru, trebuie să includem o temă de stil în tema noastră. Modul de a face acest lucru în WordPress este de a utiliza funcția wp_enqueue_style.
Deci, planul este de a încărca o altă foaie de stil pentru fiecare formular. Pentru a face acest lucru, vom verifica parcurgerea parametrului GET și încărcarea stilului respectiv. Dacă vă gândiți, "Ce naiba este un parametru GET?", Atunci nu vă faceți griji. Este în principiu adresa URL. Asta e tot ce trebuie să știți de dragul a ceea ce facem. 
Deci, logica este: dacă adresa URL este x, încărcați x foaia de stil, iar dacă adresa URL este y, încărcați foaia de stil y. Deci, creați un fișier admin.php și copiați acest cod în el, apoi salvați-l în lib pliant.  
Folosim aici acțiunea login_head pentru a încărca stilurile noastre pe pagina de conectare. Această acțiune este în mod special concepută în acest scop. Dacă nu sunteți familiarizați cu acțiunile și filtrele în WordPress, aș recomanda să petreceți ceva timp învățând despre ele. Ele sunt piloni ai dezvoltării WordPress.  
Acum pentru CSS în sine. Pentru a păstra în limitele acestui tutorial, vom scrie doar CSS de vanilie. Nu mai puțin sau Sass. Domeniul DOM nu ne dă cu adevărat multe lucruri pentru a ne lega de aceste pagini, așa că trebuie să fim un pic vag. 
Pentru a adăuga stiluri tip antet și subsol, să folosim pseudoelementele inainte de și după. Am luat o imagine de la http://unsplash.com pentru fundalul paginii noastre de conectare. Este o resursă excelentă, dar nu are capacitatea de căutare. Din fericire, Arthur Weill a făcut un instrument pentru a căuta imaginile.
Puteți să apăsați sau să vizualizați fișierele CSS de mai jos:
 
 Formular de conectare CSS
 
 
 Înregistrare formular CSS
 
 
Acest CSS este doar un ghid. Principalele puncte sunt:
 
Pentru a obține un antet / subsol, utilizați inainte de și după pseudo elemente.
 
Utilizați interogările media pentru a vă asigura că formularele se pot micșora frumos. S-ar putea să doriți ca acestea să fie utilizate într-o modalitate / iframe sau să vă conectați de pe tabletă sau telefon.
 
Unele atingeri de finisare
Logo-ul de pe paginile noastre se leagă de http://wordpress.org, ceea ce nu este ideal. Din fericire WordPress are un filtru la îndemână pe care îl putem folosi pentru a schimba acest lucru, login_headerurl. Deci, să includeți acest fragment în admin.php.
Un alt lucru este că pe pagina noastră de înregistrare există un text de introducere. Nu este foarte informativ: "Inregistreaza-te pe acest site". Să-l ajustăm și pe alții. Din nou, există o acțiune (login_message) pentru a accesa și schimba. Nu este la fel de simplu ca filtrul anterior, dar folosind funcția PHP, putem verifica anumite copii ("Inregistreaza-te") și apoi returnați copia noastră modificată. 
". $ register_intro. '
„;  altceva return $ message;  add_action ('login_message', 'tutsplus_register_intro_edit');
Și nu în ultimul rând, să schimbăm acele adrese URL. Există o mulțime de modalități de a face acest lucru. Ai putea folosi .htaccess, dar îmi place să folosesc iThemes Security Plugin. În cadrul setărilor puteți modifica adresele URL în zona de administrare. M-am schimbat /Logare. Există o mulțime de alte lucruri grozave pe care le puteți face cu plugin-ul, așa că vă recomand să îl verificați.
Ce urmeaza?
Suntem la un început minunat pentru site-ul nostru de membru. În partea a doua vom discuta cum să adăugăm câmpuri meta personalizate în formularul nostru de înregistrare și să atingem foarte scurt modul în care puteți personaliza e-mailurile trimise de pe site-ul nostru. Sper că acest tutorial a fost ușor de urmărit. Orice feedback, întrebări și comentarii sunt binevenite.
Lucruri de notat
Rețineți: dacă descărcați codul din depozitul GitHub, acesta include toate fișierele pentru a vă crea tema. Ideea este că puteți să luați repo-ul și să conduceți comenzile Gulp și Bower necesare și veți fi plecați! Dacă doriți doar fișierele care conțin cod specific acestei serii, fișierele sunt enumerate mai jos. 
 
Toate fișierele din directorul de administrare  
 
lib / admin.php 
 
lib / membership.php 
 
template-user-profile.php
 
template-uri / header.php 
 



		
			
	   
	




Cod