Cum să adăugați cu ușurință CSS personalizat în WordPress (2022)

Depozitul oficial de teme WordPress are aproximativ 9.000 de teme. Adăugați temele disponibile pe piețele populare și pe site-urile web ale dezvoltatorilor de teme și acest număr ar putea ajunge până la 20.000!

Chiar dacă reușești să treci prin acest număr uriaș și să găsești tema potrivită, de obicei descoperi că designul necesită o mulțime de modificări.

Pentru aceasta, începeți de la backend-ul temei și schimbați tipografia și culorile.

Poate fi necesar să modificați distanța dintre elemente sau să adăugați culoare de fundal unui widget.

Acolo puteți adăuga CSS personalizat pentru a schimba aspectele temei și pentru a o face cu adevărat proprie.

Ce este CSS?

CSS, sau Cascading Style Sheets, este poate al doilea cel mai popular limbaj web după HTML.

În timp ce HTML oferă elementele de bază ale unei pagini web, CSS le face drăguțe de privit.

După cum vă puteți imagina, veți găsi CSS oriunde vedeți HTML.

Puteți folosi CSS pentru a adăuga culori, pentru a schimba fețele și dimensiunile fonturilor și pentru a adăuga sau elimina spațierea dintre elementele de design. În general, CSS este folosit pentru a stila și a îmbunătăți aspectul paginilor web.

Dacă doriți să schimbați orice element vizual, puteți adăuga fragmente CSS personalizate pe site-ul dvs. și puteți vedea rezultatele aproape imediat.

Beneficiile CSS

CSS oferă câteva beneficii importante pentru site-ul dvs. WordPress.

Consecvență mai mare în designul site-ului web

Codul CSS este în general conținut în fișiere separate (de obicei, style.css în cazul WordPress). Acest fișier este referit în codul frontend, iar secțiunile relevante sunt extrase după cum este necesar.

Aceasta înseamnă că trebuie să creați un singur fișier de stil care poate fi folosit pentru toate paginile site-ului.

Ca rezultat, toate elementele HTML sunt stilate în același mod (sau puteți aplica selectiv formatarea definind clase personalizate).

Dacă trebuie să schimbați stilul, trebuie să faceți schimbarea o singură dată în fișierul CSS și va fi aplicată pe site în cel mai scurt timp.

Prezentați diferite stiluri pentru diferiți privitori

Designul responsive se referă la potrivirea elementelor și conținutului HTML la dimensiunea ecranului vizitatorilor.

Cu un singur fișier CSS, vă puteți asigura că site-ul dvs. este redat perfect, indiferent de dispozitivul vizitatorilor.

Paginile HTML sunt notoriu proaste pentru a fi ușor de imprimat. Cu codul CSS corect, puteți crea o vizualizare care formatează conținutul eliminând culorile de fundal și imaginile.

În mod similar, puteți formata conținutul site-ului dvs. pentru a fi ușor de citit pe ecran.

Acest lucru îmbunătățește scorul de accesibilitate al site-ului dvs. și permite vizitatorilor cu deficiențe de vedere să vă consume conținutul cu ușurință.

Cod de site ușor

Un site web este o combinație de mai multe tehnologii, inclusiv HTML și CSS. Ca rezultat, dezvoltatorii împart codul site-ului web în fișiere separate.

Când deschideți o pagină web în browser, serverul selectează numai fișierele necesare pentru a reda pagina în browser. Ca rezultat, pachetul general de descărcare necesar pentru a reda o pagină web în browser este destul de mic.

Cu cache-urile de browser moderne, CSS este în general descărcat o dată și apoi este stocat local, accelerând și mai mult experiența utilizatorului.

Beneficii de optimizare pentru motoarele de căutare

CSS este o modalitate excelentă de a construi site-uri web structurate. Deoarece designul (CSS) este separat de structură (HTML), puteți modifica cu ușurință și aduce ordine în paginile web.

Acest lucru vă permite să configurați pagini care sunt bine construite și le permite roboților Google să înțeleagă mai bine intenția paginilor.

Un alt beneficiu important al utilizării CSS în designul site-ului dvs. este reducerea raportului cod/conținut al paginilor web.

Acest lucru ajută atât oamenii, cât și roboții să parcurgă rapid și ușor conținutul dvs. Acest lucru reduce timpul necesar pentru încărcarea și afișarea paginilor web în browserele vizitatorilor.

După cum știți, Google consideră timpul de încărcare a paginii un semnal important de clasare care este folosit pentru a-și construi indexul de căutare.

Site-urile web cu încărcare mai rapidă sunt plasate în partea de sus a rezultatelor căutării, deoarece oferă o experiență mai bună vizitatorilor.

Dezavantajul CSS

Toate beneficiile utilizării CSS vin la un dezavantaj important – CSS este acum o colecție de tehnologii conexe care au o curbă de învățare semnificativă pentru cei care nu au dezvoltat.

Trebuie să începeți cu elementele de bază și apoi să înțelegeți cum funcționează cadrul CSS preferat.

Acest lucru ar putea fi o mână pentru un utilizator obișnuit de WordPress care este interesat de schimbări minore de stil.

Nu vă faceți griji, totuși – în acest articol, veți învăța câteva trucuri pentru adăugarea unui cod CSS personalizat pe site-ul dvs. WordPress fără a fi nevoie să știți cum funcționează.

Important: faceți copii de rezervă ale site-ului dvs. înainte de a încerca orice

CSS este o parte importantă a site-ului dvs. WordPress. Indiferent dacă sunteți un dezvoltator cu experiență sau un începător în dezvoltarea WordPress, este important să faceți backup site-ului dvs. înainte de a adăuga CSS personalizat.

Copierea de rezervă a site-ului dvs. salvează o copie a fișierelor site-ului dvs. într-o locație separată.

Dacă ceva nu merge bine, vă puteți restabili site-ul în câteva clicuri.

Dacă trebuie să citiți mai multe despre crearea de rezervă a site-ului dvs. WordPress, iată o bucată grozavă care acoperă backup-urile mult mai detaliat.

Adăugarea CSS personalizat pe site-ul dvs. WordPress

Acum că înțelegeți rolul CSS în WordPress, vom intra acum în detaliile modalităților în care puteți adăuga CSS personalizat pe site-ul dvs.

Ca orice altceva, veți descoperi că există mai multe moduri de a adăuga CSS pe site-ul dvs. web.

Vă recomandăm să parcurgeți toate căile și apoi să o alegeți pe cea care se potrivește nivelului dvs. de calificare.

Adăugați CSS personalizat direct la fișierele site-ului web

Dacă aveți cunoștințe bune despre CSS și design web, puteți adăuga direct codul CSS personalizat la fișierele cu tema site-ului.

În teorie, acest lucru necesită să deschideți fișierul style.css al temei și să adăugați codul CSS personalizat acolo.

Odată terminat, nu uitați să salvați sau să actualizați fișierul.

Acum, pentru multe teme, style.css este principala resursă de stil, iar codul personalizat va fi aplicat întregului site web. Așa că trebuie să te gândești cu atenție înainte de a te angaja la schimbări.

Nu recomandăm această metodă nici măcar experților, deoarece este ușor să greșiți și să vă lăsați site-ul inutilizabil.

Unele teme pot avea fișiere suplimentare pentru stilarea anumitor pagini sau părți ale site-ului web. În acest caz, este posibil ca codul personalizat să nu se aplice.

Un alt lucru important de reținut atunci când adăugați CSS personalizat direct în fișierele site-ului web este că modificările vor fi suprascrise atunci când actualizați tema.

Aceasta înseamnă că trebuie să adăugați codul CSS personalizat după fiecare actualizare a temei.

Adăugați CSS personalizat folosind Personalizatorul de teme WordPress

Toate temele WordPress au un panou de personalizare a temei unde puteți modifica diferitele setări legate de design și funcționalitate.

Pentru a accesa Personalizatorul, accesați Aspect > Personalizare .

Aproape de sfârșitul panoului din stânga, veți vedea câmpul CSS suplimentar . Faceți clic pentru a-l extinde.

Puteți adăuga fragmentul CSS personalizat aici.

Puteți vedea o previzualizare a modificărilor în panoul de previzualizare. Faceți clic pe Publicare pentru a salva modificările.

Aceste modificări sunt globale și vizibile pe site-ul dvs.

Lucrul bun despre această metodă este că modificările rezultate din adăugarea CSS-ului personalizat nu vor dispărea odată cu actualizările temei.

Adăugați CSS personalizat la blocurile Gutenberg

Cu ultima versiune WordPress 5.9, beneficiați de capacitatea completă de editare a site-ului. Această abordare bazată pe blocuri pentru proiectarea (și editarea) site-ului web simplifică, de asemenea, procesul de adăugare a CSS personalizate la formatarea blocurilor individuale.

Procesul are două etape.

În primul pas, accesați Aspect > Editor de fișiere temă .

Aceasta deschide secțiunea Editați teme . În general, style.css, foaia de stil implicită, este deschisă în editor.

Dacă nu este cazul, selectați fișierul din bara laterală din dreapta intitulat Theme Files .

Derulați până în partea de jos a fișierului și adăugați fragmentul de cod personalizat. Trebuie să vă asigurați că fragmentul dvs. este conținut într-un selector de clasă.

În al doilea pas, adăugați un bloc la postare. În acest exemplu, puteți vedea, am adăugat un bloc de paragraf.

Pentru a adăuga CSS personalizat la blocul de paragraf, selectați blocul și apoi accesați bara laterală din stânga. Sub fila Blocare , derulați în jos la secțiunea Avansat și extindeți-o.

În câmpul CSS suplimentar , adăugați clasa CSS personalizată.

Aici este „înainte”, unde blocul de paragraf nu are CSS personalizat.

După adăugarea CSS-ului personalizat în câmpul CSS suplimentar al blocului de paragraf, puteți vedea modificarea în bloc.

Adăugați CSS personalizat la Creatorii de pagini

La fel ca Gutenberg, toți generatorii de pagini populare vă permit să adăugați CSS personalizat la blocuri individuale. Procesul este similar cu cel descris mai sus.

Rețineți că este posibil să aveți nevoie de versiunea premium a generatorilor de pagini pentru a obține opțiunea CSS personalizată.

Vom folosi Elementor Pro pentru a demonstra ideea de a adăuga CSS personalizat la blocurile Elementor.

Adăugați un bloc și accesați secțiunea Editare .

Apoi, accesați Avansat > CSS personalizat . Lipiți CSS-ul dvs. personalizat în câmp.

Cu modificări minore, acest proces este aplicabil tuturor creatorilor de pagini populare.

Adăugați CSS personalizat folosind un plugin

Adăugarea codului CSS personalizat direct la fișierele de temă este o afacere riscantă. Trebuie să fiți atenți când adăugați codul CSS personalizat la fișierele de stil de temă și apoi să îl apelați acolo unde este necesar.

Chiar și după aceasta, există șansa ca modificările dvs. să dispară odată cu următoarea actualizare a temei.

De aceea, dezvoltatorii WordPress au creat mai multe plugin-uri care se ocupă de adăugarea CSS personalizat pe site-ul tău.

Aceste plugin-uri de obicei nu modifică fișierele de bază în mod direct. În schimb, codul dvs. CSS personalizat este salvat în fișierul plugin.

Ca urmare, modificările dvs. rămân disponibile chiar și atunci când schimbați tema site-ului.

Pentru a aplica din nou modificările personalizate, tot ce trebuie să faceți este să accesați pluginul și să selectați codul personalizat.

Problema principală aici este alegerea dintre mai multe opțiuni grozave.

Pentru a vă ajuta să luați decizia corectă, vă vom descrie pe scurt cinci plugin-uri care, în opinia noastră, duc la bun sfârșit!

Editor de stil vizual CSS

Dacă nu aveți cunoștințe extinse de cod CSS, Visual CSS Style Editor este pentru dvs. Acest plugin freemium vine cu un editor vizual în care puteți adăuga vizual modificări elementelor site-ului.

Editorul drag-and-drop vă permite să reglați fin plasarea elementelor și să modificați marginile și umplutura. Editorul păstrează un istoric al editărilor, astfel încât să puteți reveni pentru a anula cu ușurință o modificare.

Puteți edita toate paginile și postările site-ului web, inclusiv pagina de conectare. Aveți până la 60 de opțiuni de stil pe care le puteți aplica site-ului dvs. web.

În timp ce versiunea plătită aduce capacități suplimentare, versiunea gratuită este destul de capabilă în sine.

CSS personalizat simplu

Deși este destinat administratorilor de site-uri web, acest plugin este destul de prietenos pentru începători, cu o previzualizare live încorporată și o interfață simplă care este construită folosind elementele implicite de UI WordPress. Plugin-ul este foarte ușor și nu adaugă nicio rezistență la performanța site-ului.

Pentru a vă ajuta să scrieți cod CSS fără erori, CSS personalizat simplu vine cu un evidențiator de sintaxă și verificarea erorilor (cod listing). Acest lucru accelerează adăugarea codului CSS personalizat prin reducerea timpului necesar pentru a adăuga codul perfect pe site-ul dvs. web.

Cel mai bun lucru despre plugin este că modificările dvs. rămân păstrate chiar și atunci când schimbați teme.

Erou CSS

CSS Hero este o soluție premium de editare a temelor pentru site-uri web care simplifică modul în care editați site-urile WordPress.

Soluția este ideală pentru începătorii care au nevoie de o soluție simplă de tip point-and-click pentru editarea aspectului site-ului.

Cu toate acestea, nu lăsați simplul aspect al editorului să vă păcălească – CSS Hero este o soluție puternică care vine cu un istoric extins al editării, fragmente de cod și posibilitatea de a adăuga reguli CSS personalizate.

Pluginul este foarte sigur de utilizat pe orice site web, deoarece nu modifică fișierele teme native WordPress.

Drept urmare, puteți face toate modificările dorite și, totuși, puteți fi sigur că fișierele de bază vor rămâne neschimbate și protejate.

Creion galben

Dacă aveți nevoie de o soluție fără cod pentru editarea aspectului site-ului, YellowPencil s-ar putea potrivit. Acest plugin premium se adresează atât începătorilor, cât și experților datorită caracteristicilor sale extinse.

Obțineți control deplin asupra aspectului site-ului dvs. prin modificarea a peste șaizeci de proprietăți în editorul drag-and-drop.

Tot ce trebuie să faceți este să schimbați vizual elementele din editor, iar YellowPencil va genera cod CSS personalizat pentru modificările dvs. Puteți chiar să aplicați modificări pentru a aborda diferite dimensiuni de ecran și dispozitive. Pluginul vă păstrează modificările CSS și puteți aplica din nou modificările atunci când schimbați temele.

SiteOrigin CSS

SiteOrigin CSS este o soluție de editare CSS foarte populară pentru site-urile web WordPress, deoarece se potrivește perfect, indiferent de abilitățile tale.

Obțineți control precis asupra culorilor, umpluturii, stilului și plasării elementelor site-ului în editorul vizual. Pluginul vine, de asemenea, cu completarea codului care elimină presupunerile din codarea CSS.

Inspectorul inclus simplifică selecția selectoarelor adecvate, astfel încât să puteți alege atributele potrivite pentru elementele dvs. de design.

Pluginul este gratuit de utilizat și vine cu funcții interesante, cum ar fi completarea codului, listingul codului (verificări ale erorilor) și protecția fișierelor de bază.

Creați o temă pentru copii pentru a testa (și păstra) modificările

Temele pentru copii își obțin funcționalitatea și stilul de la alte teme (cunoscute ca teme părinte).

În esență, acestea sunt copii ale temelor părinte și „moștenesc” codul și activele acestora. Cu toate acestea, temele copil sunt izolate de temele părinte.

În teorie, crearea unei teme pentru copil este simplă. Trebuie pur și simplu să creați un nou folder, să copiați fișierele style.css (pentru stil și elemente vizuale) și functions.php (pentru funcționalitatea temei).

În practică, totuși, trebuie să verificați documentația temei pentru a găsi fișierele critice pe care trebuie să le copiați în folderul temei copil.

După ce aveți toate fișierele necesare în folder, îl puteți activa ca temă implicită a site-ului web. Acum, puteți urma una dintre metodele de mai sus pentru a adăuga CSS personalizat.

Astra Child Theme Generator

După cum puteți vedea, aveți nevoie de o temă parentală grozavă dacă doriți o temă de copil funcțională. Deoarece tema copil moștenește toate funcționalitățile și stilul din tema părinte, trebuie să fii atent în alegerea temei părinte.

Dacă utilizați Astra, aveți noroc, deoarece Astra oferă un generator grozav de teme pentru copii, care se ocupă de procesul de creare a temei pentru copii.

Puteți fie să descărcați tema copil ca atare, fie să faceți clic pe Opțiuni avansate pentru a modifica diferiți parametri, cum ar fi autorul, descrierea și capturile de ecran.

Instrumentul descarcă un fișier zip care conține pachetul complet de teme pentru copii.

Concluzie

Sperăm că acest articol v-a ajutat să înțelegeți ideea de a adăuga CSS personalizat pe site-ul dvs. WordPress.

După cum ați văzut, WordPress oferă mai multe modalități de a adăuga fragmente CSS personalizate direct în fișierele de bază sau prin pluginuri. Vă recomandăm metoda pluginului deoarece este mai sigură și vă permite să păstrați modificările CSS chiar și atunci când schimbați teme.

S-ar putea să fie nevoie să vă perfecționați cunoștințele CSS (sau să începeți să învățați din mai multe resurse excelente), deoarece CSS evoluează constant și veți găsi modalități mai bune de a vă stiliza paginile web atunci când efectuați o simplă căutare pe Google.

De asemenea, ar trebui să vă uitați la crearea de teme copii ca o opțiune excelentă pentru testarea fragmentelor CSS. Veți descoperi că multe teme populare oferă un proces simplu de creare a temelor copil din fișierele lor de bază.

Acum este rândul tău – spune-ne ce metodă preferi pentru a adăuga CSS personalizat pe site-urile WordPress.