Personalizarea temelor WordPress cu CSS

Temele sunt unul dintre cele mai mari puncte de vânzare ale WordPress. Tema potrivită poate face site-ul dvs. să iasă cu adevărat în evidență. Cu toate acestea, de obicei, veți dori să faceți cel puțin câteva modificări personalizate oricarei teme pe care o utilizați, pentru a face totul corect.

În cele mai multe cazuri, va trebui să utilizați foile de stil în cascadă (CSS) pentru a personaliza stilul temei. Cu WordPress, există mai multe moduri în care puteți face acest lucru. Chiar dacă nu aveți experiență în a vă ocupa de cod, puteți adăuga cu ușurință propriile ajustări CSS la tema WordPress.

În acest ghid, vom arunca o privire la trei metode pe care le puteți utiliza pentru a adăuga și edita CSS personalizat în WordPress. Vă vom ghida prin întregul proces și vom vorbi despre momentul în care are sens să utilizați fiecare tehnică. Să începem!

Adăugați CSS personalizat cu Personalizarea temei

Nivel de experiență: Începător

Personalizatorul WordPress vă permite să modificați designul site-ului dvs. și să le previzualizați în timp real. Pentru a-l accesa, conectați-vă la tabloul de bord WordPress și navigați la fila Aspect > Personalizare :

Există o mulțime de setări cu care te poți juca aici. Cu toate acestea, acum căutați fila CSS suplimentară . Odată ce faceți clic pe el, se va deschide o nouă secțiune, cu un câmp în care puteți adăuga CSS personalizat:

Dacă sunteți nou în CSS, puteți citi mai multe despre cum să îl utilizați cu WordPress în Codexul oficial. Există, de asemenea, o mulțime de alte resurse excelente despre elementele de bază ale CSS și vă recomandăm să consultați câteva dintre ele.

CSS poate deveni puțin complex, dar sunt multe pe care le puteți realiza doar cunoscând elementele de bază. Lucrul minunat despre utilizarea WordPress Customizer este că vă permite să previzualizați instantaneu orice modificări pe care le faceți folosind CSS. Aceasta înseamnă că această abordare este perfectă pentru a afla cum funcționează CSS.

Notă : modificările pe care le faceți folosind Personalizatorul nu vor persista dacă schimbați teme. În plus, actualizarea temei curente poate șterge CSS-ul personalizat. Prin urmare, nu recomandăm această abordare dacă intenționați să faceți multe modificări sau opțiuni de temă între ele.

Adăugați CSS personalizat cu un plugin

Nivel de experiență: Începător până la Intermediar

Metoda de mai sus funcționează bine, dar vă puteți extinde opțiunile utilizând pluginuri. În secțiunile următoare, vom explora trei plugin-uri care vă permit să vă personalizați tema WordPress.

Notă : nivelul de experiență pentru editarea CSS WordPress folosind pluginuri va depinde de instrumentul pe care îl utilizați. Vă recomandăm să le testați pe toate și să vedeți care dintre ele se simte cel mai confortabil.

Editor CSS avansat

Dacă vă place să utilizați WordPress Customizer, dar doriți să ofere mai multe opțiuni, acest plugin merită aruncat o privire. Cu Advanced CSS Editor, veți putea adăuga CSS personalizat pentru desktop-uri, telefoane și tablete. În acest fel, puteți ajusta modul în care arată site-ul dvs. web pe fiecare tip de dispozitiv.

După instalarea pluginului WordPress, navigați la fila Aspect > Personalizator din tabloul de bord. Ar trebui să vedeți o nouă opțiune Advanced CSS Editor , care vă oferă acces la mai multe editoare pentru fiecare tip de dispozitiv:

Tot ce trebuie să faceți este să adăugați CSS-ul personalizat dorit, să testați pentru a vă asigura că funcționează corect și să salvați modificările temei dvs.

Pro:

• Obțineți control deplin asupra modului în care arată site-ul dvs. pe toate dispozitivele.
• Puteți edita în continuare tema prin intermediul Personalizatorului.

Contra:

• Adăugarea de CSS personalizat pentru mai multe tipuri de dispozitive poate fi multă muncă.

Evaluare medie: 4,5/5

Notă: acest plugin include, de asemenea, o opțiune de reducere a CSS-ului, ceea ce poate ajuta la reducerea timpilor de încărcare a site-ului.

CSS personalizat modular

Modular Custom CSS vă permite să adăugați CSS la tema dvs. prin intermediul WordPress Customizer. Cu toate acestea, adaugă și câteva funcții foarte binevenite editorului CSS implicit. Pentru a fi mai precis, acest plugin vă permite să creați CSS personalizat pentru teme individuale și să faceți modificări globale care persistă în orice temă pe care o configurați:

Pentru a accesa aceste câmpuri, trebuie să reveniți la secțiunea Aspect > Personalizator > CSS suplimentar . Odată ce sunteți acolo, puteți începe să faceți modificări.

Pro:

• Puteți adăuga CSS personalizat numai pentru anumite teme și puteți face modificări care vor persista chiar dacă schimbați teme.

Contra:

• S-ar putea ca CSS „global” să nu se joace bine cu fiecare temă, așa că trebuie să fiți atenți când treceți la una nouă.

Evaluare medie: 5/5

SiteOrigin CSS

SiteOrigin CSS este o abatere de la pluginurile despre care am vorbit până acum. În loc să adauge noi funcții la Customizer, acesta oferă un editor CSS WordPress independent. Puteți accesa acest nou editor navigând la fila Aspect > CSS personalizat după instalarea pluginului:

La prima vedere, acest editor CSS nu arată prea mult. Cu toate acestea, dacă dați clic pe pictograma ochiului, veți lansa un editor vizual. Aici, puteți face clic pe orice element al temei și îl puteți edita cu ușurință folosind CSS:

Pluginul CSS SiteOrigin poate fi puțin copleșitor la început. Cu toate acestea, vă poate economisi și mult timp, deoarece nu va trebui să căutați selectoarele corecte. Tot ce trebuie să faceți este să faceți clic pe elementul pe care doriți să îl modificați și apoi să adăugați orice cod CSS doriți.

Pro:

• Puteți edita orice element doriți de pe site-ul dvs. făcând clic pe el.
• Acest plugin vă permite să schimbați unele aspecte simple ale temei dvs. fără a fi nevoie să utilizați CSS, cum ar fi fonturile sale.

Contra:

• Poate fi greu să urmăriți toate CSS-urile personalizate pe care le adăugați la tema dvs. dacă modificați mai multe elemente.

Evaluare medie: 4,9/5

Editați CSS cu foaia de stil pentru tema copil

Nivel de experiență: Avansat

O temă copil este o copie a unei teme existente (cunoscută ca „părinte”). Temele pentru copii vă permit să faceți modificări site-ului dvs. WordPress în siguranță. Acest lucru se datorează faptului că puteți actualiza în continuare tema părinte, fără a pierde niciuna dintre modificările CSS personalizate. În plus, dacă adăugați orice CSS care vă afectează negativ site-ul, puteți pur și simplu să dezactivați tema copil.

Orice CSS personalizat pe care îl adăugați la o temă copil va suprascrie stilurile părintelui acesteia. Cu toate acestea, pentru ca acest lucru să funcționeze, va trebui să știți cum să creați o temă pentru copil în primul rând. Odată ce „copilul” dvs. este gata, puteți accesa fișierele acestuia folosind un client FTP, cum ar fi FileZilla.

După ce vă conectați la site-ul dvs. web prin FTP, veți dori să găsiți folderul rădăcină, care este adesea numit public_html sau www , sau poartă numele site-ului dvs.:

Apoi, navigați la directorul wp-content/themes . Acolo, veți găsi dosare individuale pentru toate temele dvs., inclusiv pentru copilul pe care l-ați configurat. Deschideți folderul temei secundare și căutați fișierul style.css în:

Faceți clic dreapta pe fișierul cu temă și selectați opțiunea Vizualizare/Editare . Acest lucru va deschide fișierul folosind editorul dvs. de text implicit, permițându-vă să îl modificați. Asta înseamnă că poți adăuga CSS personalizat la tema ta, doar că acum folosești un editor de text complet în loc de Personalizatorul WordPress.

Când ați terminat, salvați modificările aduse fișierului și închideți editorul. Apoi, puteți vizita site-ul dvs. web pentru a vedea dacă modificările pe care le-ați făcut au funcționat conform intenției. Dacă nu au făcut-o, vă puteți întoarce la fișierul style.css și puteți continua să-și modificați CSS-ul.

Notă: aceasta este o prezentare generală la nivel înalt și există mult mai multe despre configurarea și utilizarea unei teme pentru copii. Vă recomandăm să continuați cu atenție dacă sunteți nou în acest proces.

CSS personalizat cu Personalizarea temei vs. Pluginuri CSS vs. Foaia de stil tematică pentru copii

După cum puteți vedea, aveți o mulțime de opțiuni atunci când vine vorba de adăugarea CSS personalizat la WordPress. Cu toate acestea, alegerea abordării corecte poate fi o provocare. Să defalcăm opțiunile, în funcție de nivelul de experiență cu platforma și cu CSS în general:

• Sunteți nou în WordPress și nu sunteți obișnuit să utilizați CSS. În acest scenariu, cel mai bun pariu este să rămâneți cu Personalizatorul WordPress. Cu acesta, veți putea previzualiza modificările instantaneu și vă veți obișnui cu utilizarea CSS.
• Ai ceva experiență cu WordPress și CSS. În această etapă, veți dori mai multe opțiuni decât le oferă Personalizatorul implicit. Prin urmare, vă recomandăm să utilizați pluginuri care să-și îmbunătățească funcționalitatea pentru a edita CSS personalizat în WordPress.
• Ești un veteran WordPress care se simte confortabil să folosească CSS. Dacă nu sunteți intimidat de CSS și fragmentele de cod, probabil că veți dori să configurați o temă copil și să editați manual foaia de stil.

Rețineți că acestea sunt doar linii directoare și ar trebui să vă simțiți liber să utilizați orice abordare vi se pare cel mai confortabil.

Îmbunătățiți experiența digitală cu un design excelent și găzduire de top

Designul site-ului tău web joacă un rol important în ceea ce cred vizitatorii despre el. Cu WordPress aveți acces la mii de teme și puteți edita oricare dintre ele folosind CSS personalizat.

Cu toate acestea, conducerea unui site web de succes nu înseamnă doar aspect. De asemenea, veți avea nevoie de găzduire web WordPress care oferă performanță, securitate și asistență excelente. Cu WP Engine, veți avea acces la toate aceste funcții cu fiecare dintre planurile noastre!