Efectuarea Templului Perfect WordPress Cum să Cod bine

În partea anterioară a acestei serii; am trecut prin diferite API-uri WordPress pe care ar trebui să le învățăm, am vorbit despre importanța de a face o temă traducabilă (sau chiar mai bună, de a le elibera deja traduse în alte limbi) și a înțeles conceptul de licențiere a temelor și utilizarea produselor licențiate cu temele.

În acest articol, ne vom concentra pe cod: vom vedea cum să codificăm cu standardele de codare WordPress, cum să comentăm corect codul nostru și cum să validăm și să testăm tema.

Codurile WordPress Coding

Da, stiu, ai propriul stil preferat de codare: iti place sa comprimi o mare functie cu o singura linie de cod, nu-ti place deloc spatiul alb - Ah, am fost odata la fel.

Dar dacă te vei dezvolta pentru alți oameni și literalmente vinde codul, trebuie să faceți codul dvs. de înțeles. Și, în timp ce credeți că codul dvs. este "suficient de clar", există standarde universale de codificare pentru a ajuta toată lumea să codifice același stil și toate piețele tematice grave și centrele de descărcare (de la WordPress.org la ThemeForest) necesita să codifici standardele.

Există patru limbi principale de programare și de marcare necesare dezvoltării temelor WordPress: HTML, CSS, JavaScript și, bineînțeles, PHP. Să aruncăm o privire la fiecare:

Standardele HTML

Există reguli relativ simple pentru scrierea codului HTML compatibil cu standardele:

Validați codul dvs. cu W3C. Mereu. Vom ajunge la asta mai târziu.
Aveți grijă cu elementele de auto-închidere: trebuie să închideți elementul cu un spațiu, o bară și semnul "mai mare decât".
Când tastați valorile atributelor, tastați-le pe toate cu majuscule - cu excepția cazului în care acestea sunt pentru oameni.
Împachetați întotdeauna valorile atributului cu cotații. Atât cotațiile unice, cât și cele dublu sunt acceptabile.
Indentarea trebuie să fie logică și lizibilă. Cod PHP amestecat în HTML nu ar trebui să fie o excepție.

Verificați pagina WordPress HTML Standards, la WordPress pentru mai multe informații.

Standardele CSS

Lista este un pic mai lungă, dar din nou, există reguli ușoare pentru codarea corectă a CSS:

Proprietățile ar trebui să fie indentate cu file.
Puteți grupa selectorii, dar fiecare selector trebuie să aibă propria linie pentru citire.
Denumiți toate dvs. clasă și id selectori cu litere mici și nu uitați să separați cuvintele cu cratime.
Utilizați selectori lizibili. .c6 nu este un nume bun - nume-l .coloană șesime!
Nu se califică prea mult. div.column este lipsită de sens atunci când poți folosi doar .coloană.
Proprietățile și valorile acestora trebuie să fie și în litere mici, cu excepția numelor de fonturi și a proprietăților specifice furnizorilor.
Comandarea pentru proprietăți trebuie să fie "afișare, poziționare, model de cutie, culori, tipografie și altele".
De asemenea, trebuie să ordonați prefixele furnizorilor de la cele mai lungi (-WebKit-) la cel mai scurt (fără prefix).
Păstrați interogările media în partea de jos a foii de stil.
Comentariți codul CSS pe măsură ce comentați în PHP. Mai multe despre asta mai târziu.

Vedeți pagina WordPress CSS Standards, la WordPress pentru o explicație mai detaliată.

Standardele JavaScript

Deoarece în zilele noastre JavaScript devine crucial pentru multe teme WordPress, avem nevoie și de standarde și reguli pentru acesta:

Brațele pot nu deschideți și închideți în aceeași linie.
Preferă citate unice peste ghilimele duble, cu excepția cazului în care un șir conține ghilimele simple.
Aveți libertatea de a utiliza spațiile libere așa cum doriți în codul dvs. - nu utilizați spațiul alb pe liniile goale, totuși. Și nu uitați că utilizați spații libere pentru lizibilitate - nu pentru distracție.
Denumiți funcțiile și variabilele utilizând CamelCase, not_with_underscores. Constructori ar trebui să fie în TitleCase.
Puteți declara mai multe variabile pe o singură linie; dar dacă intenționați să atribuiți valori, veți avea nevoie de linii separate.
new Array () și obiect nou () notațiile sunt "nu-nu". Utilizați echivalente de scurtă durată ([] și ) in schimb.
Tratați condițiile și buclele foarte delicat - de obicei, acestea sunt cele mai ușor de citit greșit. Folosirea brațelor și spațiile albe sunt cheia acestui lucru.
Dacă intenționați să utilizați jQuery; definiți o funcție anonimă și treceți jQuery ca argument înainte de a face altceva. Verificați exemplul pentru a vă asigura.

Pagina WordPress JavaScript Standards la Make WordPress are mai multe informații, marcați această pagină și folosiți-o.

Standarde PHP:

Aceasta este partea mai dificilă. Există tone de reguli care trebuie luate în considerare:

Convențiile de denumire
Citate unice și duble
Utilizarea spațiului alb
Expresii obisnuite
"Condiții Yoda"
Special guest star SQL și formatarea interogărilor bazei de date

Dacă nu știți ce sunt, atunci poate că cel mai bun curs este să vă deplasați cu ușurință.

Există două resurse minunate pentru a învăța, totuși:

WordPress pagina de standarde PHP la WordPress
Seria Wptuts + numită "Codurile de codare WordPress" de Tom McFarlin

Comentând corect codul

Pentru a permite altor dezvoltatori să înțeleagă modul în care ați făcut tema, trebuie să faceți codul temei clar și lizibil - și aceasta necesită comentarea codului.

Cea mai bună practică pentru PHP este să folosiți PHPDoc, stilul de documentare al phpDocumentor. Este folosit pe scară largă între dezvoltatorii WordPress și recomandat în pagina de standarde de documentare PHP la WordPress. Acesta oferă un stil de documentare curat pentru codul dvs. PHP.

În ceea ce privește CSS, pagina WordPress CSS Standards de la Make WordPress vă recomandă să o faceți cum ar fi PHPDoc, împreună cu câteva alte sugestii.

În ceea ce privește codul HTML și JavaScript, se pare că nu există nici o modalitate recomandată sau necesară pentru a-ți comenta codul, dar asta nu înseamnă că nu trebuie să faci nimic: Încercați să fie cât mai clară cu codul dvs. și să oferiți mici biți de informații, comentând oriunde ați considera necesar.

Validarea și testarea temei

Tema poate funcționa ca un site elegant în capul tău, dar, sperăm, vor exista sute (poate mii) de oameni care vor ajunge să folosească tema ta și să fie siguri că vor încerca să facă site-uri pe care nu le poți gândi de. În plus, există cerințe pentru piețele tematice și directoarele tematice pentru a vă trage împreună tema.

De aceea trebuie să vă testați tema și să vă validați codul. Am trei idei pentru asta:

Validați HTML și CSS cu validatorii W3C

Primul lucru pe care trebuie să-l faceți este să vă validați codul cu serviciile de validare ale W3C. Atât Validatorul HTML Markup Validator, cât și serviciile Validatorului CSS sunt folosite și dezvoltate de ani de zile și sunt cele mai bune servicii de validare disponibile.

După ce faceți cele două lucruri de mai jos, pur și simplu verificați paginile demonstrative cu aceste două servicii pentru a vă asigura că nu există erori sau avertismente.

Utilizați pluginul "Dezvoltator" pentru a vă corecta tema

Developer este un plugin gratuit dezvoltat de Automattic care, în cuvintele lor, ajuta dezvoltatorii WordPress să se dezvolte. Este de fapt doar un plugin de instalare: Scopul principal al plugin-ului este de a furniza plugin-urile esențiale pentru mediul de dezvoltare.

Programatorul sugerează 16 pluginuri diferite. În timp ce unele dintre ele fac procesul dvs. de dezvoltare mult mai ușor (cum ar fi comutarea utilizatorilor și unitatea de testare a temelor), unele dintre ele vă ajută să depanați tema (cum ar fi Anunțurile anulate și verificarea temelor).

Cele pe care le găsesc cele mai utile sunt Theme Check, Theme Test Drive și Debug Bar, dar toate cele 16 plugin-uri oferă caracteristici excelente. Vă sugerez să le instalați pe toate pentru a testa șansa din tema dvs..

Testați-vă tema cu date de testare

Nu puteți doar să codificați tema și să spuneți că este completă - trebuie să o testați cu un anumit conținut. Puteți crea propriul dvs. conținut, dar trebuie să luați în considerare testarea cu unele "date de testare":

Utilizați datele de probă ale WordPress. Aceste date de probă conțin unele dintre cele mai utilizate tipuri de conținut și vă vor ajuta să observați deficiențele temei dvs. față de conținutul pe care ați uitat să îl luați în considerare.
Utilizați mai mult exhaustiv datele de testare. WPTest.io este un mic site web cu un infricosator colecție de conținut WordPress exemplu. Nu glumesc: Din elementele de meniu care merg pe adâncime de 10 grade și Amazon Store, acestea sunt cele mai exhaustive date de testare pe care le-am văzut vreodată. Nu am testat niciodată o temă cu acest eșantion de conținut, dar dacă reușiți să faceți tema dvs. de lucru cu aceste date, probabil că nu trebuie să vă faceți griji cu privire la tema dumneavoastră caută plictisitoare în orice scenariu.

Singurul dezavantaj al acestor două teste este că nu veți putea să testați conținutul cu coduri scurte sau tipul de conținut specific pe care l-ați avut în vedere în timpul dezvoltării temei. Vă sugerez să testați tema cu cel puțin datele de probă ale WordPress, apoi să vă creați propriul conținut. La urma urmei, veți avea nevoie de conținut solid atunci când creați site-ul demo pentru tema dvs..

Înfășurarea în sus

În acest articol; am trecut prin procesele de codificare corectă și comentând cu unele standarde, apoi am văzut cum să ne validăm codul și să testăm tema. În următoarea parte a seriei, vom examina câteva practici incorecte.

Rămâi acordat și nu uitați să distribuiți articolul, dacă v-ați plăcut!

Cod