Un ghid pentru opțiunile de dezvoltare a temelor WordPress

admin 0 Comments Articles

Un ghid pentru opțiunile de dezvoltare a temelor WordPress

  • 14 min read
  • WordPress,Tehnici (WP)
  • Salvate pentru citire offline
  • Share on Twitter, LinkedIn
La recentul WordCamp Edinburgh, am luat parte la o discuție despre dezvoltarea temelor WordPress și opțiunile disponibile dezvoltatorilor atunci când construiesc teme. Concluzia principală a sesiunii a fost că nu există un răspuns universal și că cea mai bună metodă depinde de nevoile site-ului web și de capacitățile dezvoltatorului.

La recentul WordCamp Edinburgh, am luat parte la o discuție despre dezvoltarea temelor WordPress și opțiunile disponibile pentru dezvoltatori atunci când construiesc teme. Concluzia dominantă a sesiunii a fost că nu există un răspuns universal și că cea mai bună metodă depinde de nevoile site-ului web și de capacitățile dezvoltatorului.

Dar dacă sunteți la început să construiți teme WordPress sau doriți să dezvoltați un sistem pentru a le construi mai eficient sau mai robust, cum vă decideți ce abordare să adoptați? În acest articol, vom descrie pe scurt modul în care funcționează temele WordPress și apoi vom examina câteva dintre diferitele abordări pentru dezvoltarea lor, cu sfaturi despre care abordare ar putea fi cea mai potrivită pentru site-ul dvs. și circumstanțele în care vă aflați.

Lecturi suplimentare pe SmashingMag:

  • Migrarea unui site web în WordPress este mai ușoară decât credeți
  • Utilizarea WP_Query în WordPress
  • Programarea evenimentelor folosind WordPress Cron
  • Cum să îmbunătățiți implementarea site-urilor web WordPress

Cum funcționează o temă WordPress?

În WordPress, temele conduc un site web și determină ce conține, cum se comportă și cum arată. Tema este separată de conținut, care este păstrat în baza de date. Acest lucru înseamnă că puteți utiliza aceeași temă pe mai multe site-uri web, indiferent de conținutul site-urilor web – ceea ce s-ar putea să faceți deja dacă ați descărcat teme din depozitul de teme al WordPress.

O temă este formată dintr-un număr de fișiere șablon, toate stocate în folderul theme, pe care îl veți găsi în wp-content/themes în instalarea WordPress. Fiecare temă WordPress trebuie să includă cel puțin două fișiere: index.php și style.css. Fișierul index definește ce conținut este afișat de temă, iar foaia de stil (ați ghicit) îl stilizează, precum și conține meta-informații despre temă pe care WordPress le folosește pentru a face tema să funcționeze corect.

De fapt, majoritatea temelor au câteva fișiere suplimentare:

  • header.php Conține secțiunea <head> a fiecărei pagini, plus antetul de design al site-ului.
  • sidebar.php Conține bara laterală, inclusiv orice zone de widget-uri.
  • footer.php Conține subsolul, care poate avea sau nu zone de widget-uri.
  • functions.php Conține orice funcții specifice temei dumneavoastră. Puteți afla mai multe despre fișierul de funcții în WordPress Codex.
  • Filele care conțin bucla, care apelează conținutul din baza de date. În funcție de partea site-ului în care lucrați, acesta ar putea fi unul dintre mai multe fișiere:
    • page.php Pentru pagini statice
    • single.php Pentru postări individuale (postări de blog, de exemplu)
    • index.php, archive.php, category.php, etc. Pentru paginile care listează un număr de postări

Yoast a scris o reprezentare vizuală excelentă a modului în care funcționează fișierele tematice, iar WordPress Codex include o descriere detaliată a temelor, inclusiv detalii despre diferitele fișiere și despre momentul în care sunt apelate.

Susțin că foaia de stil, totuși, este cel mai important fișier și cel cu care este probabil să începeți, deoarece o „temă copil” (mai multe despre asta în scurt timp) are nevoie de o foaie de stil chiar dacă nu conține nimic altceva. Foaia de stil conține meta-informații importante despre tema în sine, care este comentată înainte de toate stilurile. Mai jos sunt comentariile de deschidere pentru tema implicită actuală a WordPress, Twenty Eleven:

Aceste informații sunt comentate pentru a nu fi citite de browsere, dar sunt citite de WordPress și oferă informații oricui folosește tema dvs. Vom reveni la acest aspect în scurt timp când vom vedea cum să creăm o temă copil.

Acum că știți cum funcționează temele, următorul pas este să vă dați seama cum să vă construiți propria temă. Înainte de a începe, ar merita să luați în considerare câteva puncte care vă vor ajuta să luați această decizie.

Ce să luați în considerare atunci când dezvoltați o temă WordPress?

Înainte de a decide ce abordare să adoptați pentru a vă dezvolta tema, identificați-vă constrângerile. Acestea includ probabil următoarele:

  • Timp. Cât timp aveți la dispoziție pentru a vă dezvolta tema, sau pentru a învăța cum să o faceți?
  • Buget. Acest lucru este legat de timp, dar are legătură și cu faptul dacă vă puteți permite să plătiți pentru o temă premium sau un cadru tematic.
  • Capacitate. Cât de familiarizat sunteți cu dezvoltarea temelor, cu CSS și PHP și cu modul în care funcționează temele? Dacă nu sunteți familiarizat, cât de mult doriți să învățați?
  • Pregătire pentru viitor. Va fi nevoie ca tema dvs. să fie actualizată în viitor? Vor lucra la ea și alți dezvoltatori în afară de dumneavoastră? Dacă da, atunci abordarea dumneavoastră va trebui să fie cât mai robustă posibil.
  • Repetiție. Vă vedeți dezvoltând un număr de teme similare în viitor? Dacă da, abordarea dvs. va trebui să permită reutilizarea codului.

Vom reveni asupra acestor considerații la sfârșitul articolului și vom identifica ce opțiuni de dezvoltare sunt cele mai potrivite pentru diverse situații.

Dezvoltarea temelor: Opțiunile dumneavoastră

Există câteva opțiuni disponibile pentru dezvoltarea temei sau temelor dumneavoastră, iar investigarea lor înainte de a vă suflecă mânecile și de a începe să codificați ar fi utilă. Alegerea abordării corecte va avea ca rezultat o temă mai bună, cu un cod mai robust, și va minimiza numărul de revizuiri pe care va trebui să le faceți mai târziu. De asemenea, vă va ajuta să construiți tema mai eficient.

Opțiunile pe care le vom analiza aici sunt:

  • Construiți o temă de la zero,
  • Editați (sau „hack”, ar putea spune unii) o temă existentă,
  • Utilizați personalizatorul de teme pentru a modifica o temă existentă,
  • Creați o temă copil pentru a face modificări la o temă existentă,
  • Creați-vă propria temă părinte (folosind una dintre abordările de mai sus) și teme copil,
  • Utilizați un cadru tematic.

1. Construiți o temă de la zero

Această abordare este cea mai dificilă dacă sunteți neexperimentat. Dar dacă sunteți un dezvoltator WordPress experimentat, vă va oferi cel mai mult control. Ar putea fi metoda cea mai potrivită dacă importați HTML de pe un site web static existent, care este actualizat la WordPress fără alte modificări.

Cu toate acestea, atunci când transferați un site web la WordPress, efectuarea unei revizuiri a acestuia ca parte a procesului, mai degrabă decât simpla copiere a codului peste, este o idee bună. Dacă copiați un site web static, va trebui să urmăriți îndeaproape codul pentru a vă asigura că acesta este curat, eficient și valid.

2. Editați (sau hack-uiți) o temă existentă

Aceasta este modalitatea prin care majoritatea oamenilor încep cu dezvoltarea de teme WordPress: lucrând la o temă pe care au descărcat-o, ei văd că unele stilizări nu sunt chiar potrivite, așa că se adâncesc în foaia de stil și fac unele modificări. A începe astfel este tentant, deoarece pare a fi o modalitate rapidă și ușoară de a obține efectul dorit. Dar există câteva pericole:

  • Dacă schimbați vreodată tema, acea actualizare va anula orice modificări pe care le-ați făcut.
  • Este ușor să adăugați cod repetitiv prin adăugarea de noi stiluri mai jos în foaia de stil care anulează stilurile mai sus, în loc să eliminați ceea ce nu aveți nevoie.
  • Site-ul ar putea sfârși cu mult mai mult cod decât are nevoie.
  • Dacă tema nu este bine codificată sau comentată pentru început, ați putea intra într-o încurcătură și mai mare și să vă treziți că trebuie să faceți o mulțime de reparații.

Cu toate acestea, hacking-ul unei teme poate funcționa dacă vă apucați de ea cu ochii deschiși. Poate fi o opțiune dacă următoarele sunt adevărate:

  • Tema pe care o folosiți este bine scrisă, validă și comentată (de ex, tema implicită WP, Twenty Eleven);
  • Modificările pe care le faceți sunt atât de drastice încât nu ar fi nevoie să actualizați tema originală;
  • Înțelegeți PHP-ul și CSS-ul conținute în temă și vă simțiți confortabil să le editați, să adăugați și să le eliminați fără a strica tema.

Dacă decideți să mergeți pe această cale, păstrarea unei copii de rezervă a temei originale și comentarea temeinică a codului sunt importante. De asemenea, v-aș sfătui să comentați orice cod pe care nu îl doriți și apoi să testați pentru a vedea ce se întâmplă înainte de a șterge ceva.

3. Folosiți Theme Customizer pentru a modifica o temă existentă

The theme customizer a fost lansat odată cu WordPress 3.4. Acesta vă oferă opțiunea de a personaliza o temă fără a scrie niciun cod, pur și simplu folosind o interfață WYSIWYG. În funcție de cât de bine este scris personalizatorul în tema în sine, îl puteți folosi pentru a schimba imagini, titluri, culori și chiar aspectul. Așteptați-vă să vedeți mai multe teme cu personalizatorul integrat în ele.

Utilizarea personalizatorului de teme WordPress cu tema Twenty Ten.

Personalizatorul de teme vă stochează modificările într-un fișier separat, nu în foaia de stil a temei, deci va exista cod repetitiv.

Pentru mai multe informații, aruncați o privire la tutorialul video al Otto on WordPress sau la ghidul pentru integrarea personalizatorului de teme în propriile teme.

4. Creați o temă copil pentru a face modificări la o temă existentă

Această abordare este similară cu editarea unei teme existente, dar mai sigură. Ea constă în crearea unei teme complet noi care este definită ca o temă copil a temei existente. În cazul în care tema copil nu are un anumit fișier, dar tema părinte are, aceasta îl va folosi. În cazul în care tema copil are un fișier, acel fișier îl va înlocui pe cel echivalent din tema părinte. Să ne uităm la un exemplu:

Filele temei părinte Filele temei copil
  • style.css
  • page.php
  • single.php
  • archive.php

    • .

  • header.php
  • sidebar.php
  • footer.php
  • style.css
  • page.php
  • header.php

În exemplul de mai sus, WordPress ar utiliza următoarele fișiere pentru a furniza conținut:

  • style.css de la tema copil,
  • page.php de la tema copil,
  • single.php de la tema părinte,
  • archive.php de la tema părinte,
  • header.php de la tema copil,
  • sidebar.php de la tema părinte,
  • footer.php de la tema părinte.

Vezi cum acest lucru ar fi util dacă ai vrea să folosești majoritatea marcajelor temei părinte, dar să schimbi conținutul antetului (adăugând, să zicem, logo-ul și detaliile adresei tale) și orice pagini statice (poate schimbând modul în care sunt afișate meta-date).

Unul fișier pe care fiecare temă copil trebuie să îl aibă pentru a funcționa este foaia de stil, deoarece conține informațiile de care WordPress are nevoie pentru a face tema copil să funcționeze corect. Pentru a face acest lucru, adăugați niște cod suplimentar la comentariile foii de stil:

Puteți observa liniile suplimentare? Prima dintre ele este:

Template: twentyeleven

Această linie îi spune lui WordPress că tema este o temă copil și că Twenty Eleven este părintele său. Ar trebui să adăugați numele directorului temei părinte, nu numele complet al acesteia.

Și cea de-a doua:

@import url("../twentyeleven/style.css");

Această linie îi spune browserului să încarce foaia de stil a temei părinte înainte de a reda oricare dintre stilurile din foaia de stil curentă. Acest lucru vă scutește de duplicarea oricăror stiluri din tema părinte pe care doriți să le folosiți.

Atunci, iată cum funcționează temele copil. Dar când este aceasta cea mai bună abordare? Aș sugera să o folosiți în următoarele cazuri:

  • Aveți deja o temă (care va fi folosită ca temă părinte) care conține majoritatea lucrurilor de care aveți nevoie pentru tema dumneavoastră;
  • Vreți să puteți actualiza tema părinte (de exemplu, atunci când sunt lansate actualizări ale temei în urma unei actualizări WordPress);
  • Nu doriți să vă încurcați în noduri din cauza hacking-ului unei teme existente;
  • Vreți să aveți opțiunea de a reveni la tema părinte sau de a dezvolta o altă temă similară în viitor (care ar fi o nouă temă copil);
  • Dezvoltați un număr de site-uri web similare cu unele diferențe minore de stil sau de conținut (am făcut acest lucru atunci când am construit site-uri web similare pentru un client care deținea mai multe companii);
  • Diferența dintre tema copil și tema părinte nu este atât de mare încât să trebuiască să începeți de la zero, sau nu este atât de mare încât codul temei copil să suprascrie orice lucru afectat de actualizările temei părinte.

5. Creați-vă propria temă părinte (folosind una dintre abordările de mai sus) și teme copil

Situația la care tocmai am făcut aluzie, de a construi un set de site-uri web pentru un client cu mai multe companii, este o ocazie în care s-ar putea să creați o temă părinte și apoi să configurați teme copil pentru site-uri web individuale. De asemenea, este posibil să doriți să faceți acest lucru în următoarele cazuri:

  • Planificați să dezvoltați în viitor o mulțime de site-uri web cu conținut și marcaje similare (nu doar pentru un singur client);
  • Administrați o mulțime de site-uri web și trebuie să intrați în fiecare dintre ele în mod regulat și doriți ca codul să fie foarte asemănător;
  • Vă simțiți confortabil creându-vă propria temă părinte, editând codul pentru a crea o temă părinte robustă care va funcționa bine cu temele copil.

Dacă decideți să adoptați această abordare, ați putea fie să vă construiți tema părinte de la zero, fie să modificați o temă existentă. Pentru cele mai multe dintre site-urile web pe care le construiesc, folosesc o temă părinte pe care am dezvoltat-o prin piratarea temei Twenty Ten, fosta temă implicită pentru WordPress. Am făcut atât de multe modificări încât nu am mai avut nevoie să activez actualizări ale temei originale. De asemenea, mă simțeam bine cu codul din temă și am vrut să fac modificări semnificative, reducând codul, restructurându-l pentru a se potrivi modului în care lucrez și eliminând codul de care știam că nu voi avea nevoie.

Ai putea, de asemenea, să creezi o temă copil bazată pe o temă existentă și apoi să creezi teme copil pentru aceasta – efectiv, nepoți ai temei originale. Avantajul acestui lucru este că nu veți suprascrie codul din tema originală, având în același timp flexibilitatea de a face modificări la tema copil care vor fi transmise temelor nepoate. Totuși, un cuvânt de avertizare aici: cu trei teme în uz, este ușor să devii confuz cu privire la ceea ce se întâmplă și ai putea sfârși cu o mulțime de cod inutil.

6. Folosiți un Theme Framework

Opțiunea finală este una folosită de mii de utilizatori și dezvoltatori WordPress. Există o serie de framework-uri de teme pe care le puteți utiliza ca un fel de temă părinte, dar cu mult mai multe funcționalități și, în unele cazuri, cu opțiunea de a face modificări destul de fanteziste de aspect și stil fără a scrie un rând de cod. Unele cadre sunt gratuite, în timp ce altele sunt premium. Acestea au fost analizate în detaliu deja pe Smashing Magazine, dar principalele sunt enumerate mai jos.

Cadre WordPress gratuite:

  • Theme Hybrid include o multitudine de cârlige și zone de widgeturi pentru a vă ajuta să vă personalizați temele. De asemenea, are câteva teme copil disponibile. Cadrul și temele copil sunt toate gratuite, dar dacă doriți asistență, va trebui să plătiți pentru aceasta, înregistrându-vă pe site-ul Theme Hybrid. Lucrul cu acesta poate fi destul de complex dacă nu înțelegeți PHP sau dacă nu folosiți una dintre temele copil.
  • Wonderflux se bazează pe un sistem de grilă flexibil. Are opțiuni pentru ajustarea aspectului și a stilurilor fără a fi nevoie să scrieți cod și include o mulțime de cârlige și zone de widget-uri. Poate fi folosit gratuit și beneficiază de asistență prin intermediul forumurilor WordPress.
  • Carrington este cel mai stabilit dintre cadrele gratuite și are o serie de teme copil.
  • Thematic este dezvoltat de Automattic, care dezvoltă WordPress însuși. Acesta include un număr de cârlige, filtre și zone de widget-uri.
Cadrele WordPress premium:
  • Desvoltatorii săi descriu Genesis ca fiind „standardul industriei”. Acesta vine cu o mare varietate de teme copil, opțiuni de personalizare fără a scrie cod și caracteristici SEO.
  • Thesis este celălalt mare framework premium și vă oferă, de asemenea, opțiunea de a personaliza teme copil fără a scrie cod.

Summary: Alegerea unei abordări

Sunt șanse ca, după ce ați citit acest lucru, să aveți o idee despre abordarea pe care să o alegeți. Dar, în cazul în care încă vă mai scărpinați în cap, iată un rezumat al cazurilor în care fiecare metodă este potrivită:

.

.

.

.

.

.

Abordare Timp Cost Capacitate Future-proofing Repetiție
Constituire de la zero Elevată Mare Mare Mică High Low Low
Hack tema existentă Low Low Low Mediu Low Low
Utilizați personalizatorul de teme Low Low Low Low Low Low
Create child theme based on existing parent Medium Medium Low Medium High High
Crearea temei părinte High Low High High High
Theme framework (free) Mediu Mediu Low Medium High High
Theme framework (premium) Mediu Înalt Low to medium Înalt Înalt

În general, fiecare abordare își are locul ei; depinde doar de site-ul web și de dumneavoastră. Important este să alegeți o abordare după ce ați cântărit argumentele pro și contra – nu doar să vă aruncați cu capul înainte și să încercați, doar pentru a descoperi că ați stricat o temă sau că v-ați creat o mulțime de retușuri.

Și, ca întotdeauna, orice ați decide, nu uitați să păstrați copii de rezervă!

(al)

Lasă un răspuns

Adresa ta de email nu va fi publicată.