Drumul fiecăruia pentru a deveni un dezvoltator web arată puțin diferit. Pentru mine, ca și pentru mulți oameni, am început ca designer. WordPress facilitează obținerea unui site cu aspect fantastic, fără a cunoaște niciun cod. În calitate de designer, puteți schimba teme, ajusta setările, adăugați pluginuri și puteți face atât de multe pentru a controla aspectul site-ului. Dar, la sfârșitul zilei, mulți designeri doresc să facă un pas mai departe și să dicteze pixel pentru pixel cum arată site-ul.

Există două moduri de a realiza acest lucru: angajați un dezvoltator pentru a vă implementa designul sau dobândiți singuri anumite abilități de dezvoltare. Chiar dacă angajați un dezvoltator, vor exista momente în care să știți cum să faceți o dezvoltare este un mare atu. În plus, atunci când poți face față nevoilor de dezvoltare pentru clienții tăi, devii și mai valoros pentru aceștia și poți crește rata în consecință.

A face saltul de la designer la dezvoltator este o mare activitate. Îți voi sugera câțiva pași simpli de urmat, astfel încât să poți începe tranziția de la cineva care creează design-urile site-ului la cineva care poate construi și implementa și acele design-uri.

Vești bune, ești în locul potrivit

Sunt șanse ca dacă sunteți aici citind The Layout, sunteți cel puțin puțin familiarizat cu WordPress. WordPress deschide ușa pentru ca cineva să treacă de la designer la dezvoltator mai bine decât orice altă platformă de pe web. O modalitate prin care realizează acest lucru este Editorul, care poate fi găsit în tabloul de bord WordPress sub Aspect > Editor.

Puteți vizualiza tot codul temei chiar acolo în Tabloul de bord WordPress fără instrumente speciale sau acces la server. Oferă și capabilități de editare a codului, cu toate acestea, nu aș sugera să faceți acest lucru aici (vom vorbi despre modalități mai bune de a face asta mai târziu). Acesta este un loc minunat pentru a arunca o privire și a vedea ce se întâmplă. Așa că mergeți mai departe și priviți sub capota temei dvs. și vedeți dacă puteți începe să înțelegeți ceea ce este acolo.

De obicei, veți vedea trei tipuri diferite de fișiere aici. Pentru a simplifica lucrurile, gândiți-vă la aceste fișiere ca „corpul” site-ului dvs. web. Fișierele PHP (.php) conțin HTML (oasele) și PHP (nervii care conectează totul la creier, la baza de date). Foile de stil (.css) sunt pielea site-ului dvs., determinând cum arată. JavaScript (.js) poate fi considerat ca mușchii site-ului, controlând de obicei părțile în mișcare și reacționând și răspunzând la modul în care site-ul este utilizat și cu care interacționează. Continuă și explorează puțin. Vedeți cuvinte descriptive care indică pentru ce secțiune a site-ului este codul? Sau cuvinte care descriu unele dintre aspectele vizuale ale site-ului?

Celălalt mod minunat prin care WordPress închide un decalaj între designer și dezvoltator este că împarte lucrurile în bucăți, permițându-vă să identificați cu ușurință secțiunea pe care doriți să o editați și să faceți modificări doar unei părți a site-ului. WordPress separă conținutul de șabloane de funcțiile site-ului. De asemenea, utilizează o structură consistentă între fișiere, astfel încât să puteți sări între site-uri și să puteți găsi cu ușurință fișierele pe care doriți să le editați.

Nu-ți fie frică

Una dintre expresiile pe care le folosesc cel mai des atunci când îi antrenez pe alții este: „nu-ți fie frică, nu poți da în bară asta într-un mod pe care nu îl pot repara”. Există foarte puține lucruri pe lume care nu pot fi anulate. Desigur, veți dori să profitați de instrumentele care vă vor facilita anularea, în cazul în care editările nu decurg conform planului. Două instrumente grozave pe care Flywheel le oferă sunt caracteristica Staging și capacitatea lor de a face cu ușurință o copie de rezervă și de a restabili din aceasta. Când decideți să accesați codul, utilizați un site de pregătire pentru a face modificări. În acest fel, nu vă riscați site-ul live și puteți reseta cu ușurință mediul de pregătire dacă este necesar. Dacă faceți din neatenție o schimbare pe site-ul dvs. live, nu vă temeți, restaurează-ți cea mai recentă copie de rezervă și, în mai puțin de cinci minute, ești din nou pe drumul cel bun. Aceste instrumente ar trebui să vă ofere încredere pentru a începe să faceți câțiva pași mici în editarea unui cod!

Sfat pro: odată ce vă simțiți mai confortabil cu codul, v-aș încuraja să explorați controlul versiunilor, fie Git, fie SVN, ca un al treilea strat de securitate și prima linie de urmărire a modificărilor și de detectare a erorilor înainte de lansarea codului dvs.

Unde sa încep?

Acum că am abordat unele dintre obstacolele mentale inițiale, de unde ar trebui să începi? Dacă sunteți designer, atunci cel mai natural loc pentru a începe să lucrați cu cod ar fi CSS. După cum am menționat anterior, acesta este skinul site-ului nostru; controlează cum arată site-ul și cum este aranjat. Înainte de a putea diseca CSS, trebuie să înțelegem cum funcționează cu HTML. HTML are o varietate de etichete pentru a diferenția conținutul din interior. Aceste etichete pot avea multe atribute diferite, care oferă câteva informații suplimentare despre etichetă și conținutul acesteia. Cele două atribute pe care le vom analiza sunt id și class . Iată un fragment de cod cu trei etichete HTML diferite. Veți observa că nu fiecare etichetă are un ID sau o clasă. Nu sunt obligatorii, dar ajută la diferențierea etichetelor de pe aceeași pagină unele de altele. Id-urile trebuie folosite o singură dată pe o pagină, în timp ce clasele pot fi repetate și utilizate de mai multe ori.

<article id="post-1" class="inset">
	<p class="highlight">Hello, <span>world!</span></p>
</article>

Deci avem etichetele, <article> , <p> și <span> . Articolul are un id de post-1 și o clasă de insert. Eticheta p are o clasă de evidențiere, iar eticheta span nu are un id sau o clasă.

CSS-ul care merge cu HTML-ul de mai sus ar putea arăta astfel:

/* This is a comment, it doesn't affect the code. We can use it to make notes or write instructions */
article { /* These styles will apply to every <article> tag on the page */

background: #eaeaea;  /* This makes the background gray using a HEX color code */

padding: 20px; /* give the article 20 pixels of space around the inside */

margin: 10px; /* give the article 10 pixels of space around the outside */

}

#post-1 { /* These styles will apply to only the tag with id of post-1 */

border: 1px solid green; /* green solid line around the container */

}

.highlight { /* These styles will apply to anything with a class of highlight */

background: yellow; /* give this text a yellow background */

}

span { /* These styles will apply to every <span> tag on the page */

font-weight: bold; /* bold this text */

text-transform: uppercase; /* make this text ALL CAPS */

}

Pentru a explora mai mult CSS și cum funcționează, există o mulțime de resurse fantastice. Unele locuri grozave pentru a începe sunt A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com și wpbeginner.com. Fiecare dintre aceste resurse este puțin diferită; unele oferă o abordare generală, învață elementele de bază, iar altele se concentrează pe cazuri de utilizare și vor oferi fragmente de cod specifice sau tutoriale pentru o anumită sarcină. Toată lumea învață în moduri diferite, așa că găsește ceea ce este potrivit pentru tine.

Uită-te la codul „În sălbăticie”

Am vorbit mai devreme despre o modalitate de a „privi sub capotă”, dar o altă modalitate este de a folosi instrumentele de dezvoltare încorporate în browser. Majoritatea browserelor vă vor permite să explorați în codul de pe o pagină web. Continuați și faceți clic dreapta sau ctrl faceți clic pe acest text și selectați „Inspectați” sau „Inspectați elementul”. Va apărea o fereastră care ar trebui să vă arate eticheta HTML și CSS-ul corespunzător. Puteți chiar să editați proprietățile și să vedeți cum arată acestea atunci când sunt modificate.

Google este prietenul tău

Când aveți îndoieli, Google! Serios, sunt atât de mulți oameni care scriu despre cod, sunt șanse ca cineva să fi scris despre ceea ce încerci să faci. Deci Google și vezi ce găsești. Pot exista chiar mai multe moduri de a realiza ceea ce vrei și poți găsi cea mai bună cale, având în vedere propriul stil și circumstanțe.

Punând-o în practică

Nu trebuie să construiți o temă de la zero pentru a utiliza unele dintre aceste abilități noi de dezvoltator găsite. Vă încurajez să începeți cu puțin. Încercați să modificați o temă existentă, cum ar fi schimbarea unor culori sau folosirea unui font diferit. După cum am menționat mai devreme, există modalități mai bune de a edita codul unei teme decât utilizarea Editorului. Temele oferă actualizări, iar dacă ați editat fișierele teme direct, o actualizare a temei va înlocui modificările dvs. Una dintre cele mai ușoare modalități de a adăuga un cod personalizat la o temă existentă este prin intermediul unui plugin. Iar pluginul perfect pentru CSS este Simple Custom CSS de John Regan și Danny van Kooten. Acest lucru vă permite să adăugați o parte din propriul dvs. CSS pe site-ul dvs. fără a încurca fișierele teme și este excelent pentru a face mici modificări vizuale site-ului dvs. WordPress.

Formalizați-vă fluxul de lucru

Odată ce vă simțiți mai confortabil să lucrați cu niște fragmente mai mici de cod prin tabloul de bord, veți dori un flux de lucru mai formal pentru sarcinile dvs. de dezvoltare. Fluxurile de lucru ale dezvoltatorului pot varia de la foarte simple la extrem de complexe. Există motive întemeiate pentru unele fluxuri de lucru mai complexe, dar vom începe cu elementele de bază. Cele două lucruri pe care trebuie să le aveți dacă doriți să editați cod în afara Tabloului de bord sunt un editor de cod și un program FTP, care vă va permite să puneți și să obțineți fișiere de pe serverul dvs. Elegant Themes are o postare grozavă care compară editorii de cod. Este o resursă excelentă atunci când încercați să determinați care editor este potrivit pentru dvs. Unele editoare de cod au FTP încorporat, dar există și o mulțime de opțiuni gratuite sau cu costuri reduse.

Sfat pro: un alt instrument excelent pentru fluxul de lucru al unui dezvoltator WordPress este DesktopServer de ServerPress. Acest lucru vă permite să configurați și să construiți un site WordPress pe computerul dvs. local, cu doar câteva clicuri.

Încercați să creați o temă pentru copii

Acum că aveți un mediu de editare mai formal, încercați să creați o temă copil. Aceasta este o temă personalizată care se bazează pe o altă temă. Ambele teme trebuie să fie instalate pe site-ul dvs. pentru ca acesta să funcționeze, iar tema secundară ar trebui să fie cea care este activată. Cele două lucruri necesare pentru o temă copil sunt fișierele style.css și functions.php . Cadrul Genesis folosește extrem de bine această funcționalitate și este un loc grozav pentru a intra și pentru a începe să vă construiți unele dintre abilitățile de dezvoltare. Carrie Dils a făcut mai multe cursuri lynda.com despre utilizarea temelor pentru copii cu Genesis. Este un pas fantastic următor în călătoria dvs. de la designer la dezvoltator.

Nu te descuraja

Este firesc ca, pe măsură ce sari în codul de învățare, la un moment dat să te descurajezi, dar nu fi. Toată lumea a fost acolo. Chiar și dezvoltatorii experimentați au zile în care simt că nu știu nimic. Unele dintre cele mai bune modalități de a depăși aceste cocoașe sunt să rămâneți conectat cu ceilalți în aceeași călătorie. Twitter, Slack și participarea la forumurile WordPress.org sunt toate modalități excelente de a rămâne conectat. Urmăriți câteva bloguri precum Layout și puteți cultiva relații și puteți învăța pe parcurs. Unii dintre oamenii mei preferati de urmat și care m-au ajutat în călătoria mea de dezvoltare sunt Carrie Dils, Tom McFarlin și John Regan.

Unde să merg de aici?

Odată ce simțiți că vă pricepeți bine HTML și CSS, următorul pas logic este JavaScript, sau puteți să faceți un pas mai departe și să explorați Codexul WordPress pentru a afla cum să trageți bucăți de conținut WordPress în codul dvs. Codare fericită!