Cum să vă personalizați tema WordPress folosind CSS personalizat

Adăugarea CSS personalizat la site-ul dvs. WordPress ajută la modificarea aspectului site-ului dvs. Pentru început, fiecare temă WordPress este dezvoltată folosind componente specifice ale limbajului primar. Acestea includ PHP, HTML, CSS și JavaScript. PHP este folosit pentru codul de backend, în timp ce HTML, CSS și JavaScript sunt folosite pentru frontend. În rezumat, ultimele trei sunt folosite în redarea a ceea ce utilizatorul vede în browserul său.

Uneori, în timp ce vă proiectați site-ul WordPress cu o temă pe care ați instalat-o, este posibil să doriți să modificați aspectul anumitor secțiuni sau elemente din site. De asemenea, este posibil să doriți să aveți un site web cu aspect diferit față de cel al altor utilizatori de temă. Oricare ar fi cazul, modificarea aspectului site-ului ar implica CSS.

Adăugarea de CSS personalizat poate părea ușoară pentru utilizatorii și dezvoltatorii WordPress obișnuiți, dar poate să nu fie un proces destul de ușor și simplu, mai ales pentru dezvoltatorii web pentru prima dată.

În acest articol, vom analiza ce este CSS, precum și câteva dintre modalitățile pe care le puteți utiliza pentru a adăuga CSS personalizat pe site-ul dvs.

Cuprins

Ce este CSS

Cum să identifici CSS-ul de personalizat

Cum să adăugați CSS personalizat

• Printr-o temă pentru copii
• Prin personalizarea WordPress
• Utilizarea unui plugin terță parte

Motive comune pentru care modificările CSS nu au efect

Concluzie

Ce este CSS

CSS înseamnă Cascading Style Sheet. Este un limbaj web care este folosit în stilarea elementelor HTML din site-ul dvs. web. Practic, componentele front-end din site-ul dvs. pe care le vedeți în browser sunt construite folosind HTML. Pentru a stila aceste elemente pentru o afișare vizuală adecvată pentru utilizatori, va trebui să utilizați CSS pentru aceasta. Prin urmare, CSS funcționează mână în mână cu HTML pentru a reda corect elementele din front-end.

Un exemplu de aplicație CSS poate fi văzut pe site-ul nostru staxwp.com. Pe prima pagină, avem un titlu în care o parte din textul din acesta este evidențiat, așa cum se vede mai jos:

CSS este folosit pentru a modifica culoarea textului evidențiat, motiv pentru care afișajul pare diferit de restul textului.

Acesta este doar unul dintre multele moduri prin care CSS poate fi aplicat în diferite elemente. De asemenea, puteți avea CSS pentru a modifica culoarea link-urilor, dimensiunea fontului în text, pentru a adăuga contururi la diferite elemente și multe alte proprietăți.

În majoritatea temelor WordPress care urmează standardele de codare WordPress, codul CSS al temei este stocat în fișierul style.css. Acest fișier se află în rădăcina fișierelor cu tema.

Cum să identifici CSS-ul de personalizat

Pentru a identifica CSS-ul de personalizat, va trebui mai întâi să identificați elementul sau conținutul căruia trebuie să aplicați stilul. Să spunem că, de exemplu, am dori să modificăm culorile textului butoanelor din pagina noastră de produs aici sau textul din butoanele ilustrate de mai jos:

Pentru a face acest lucru, va trebui să utilizați instrumente pentru dezvoltatori. Vă recomandăm să utilizați un browser precum Google Chrome sau Firefox pentru a utiliza ușor și corect aceste instrumente. În cazul nostru aici, vom folosi browserul Google Chrome.

Pentru a utiliza aceste instrumente, va trebui mai întâi să „inspectați elementul”. Pentru a realiza acest lucru pentru textul butonului nostru, faceți clic dreapta pe unul dintre textul din elementele butonului și selectați opțiunea „inspectați”. Mai jos este un exemplu de captură de ecran despre asta:

Va fi apoi redat un panou Instrumente de dezvoltare cu un număr de file.

În cadrul capturii de ecran, veți observa că există două file care sunt redate în prima vizualizare. Acestea sunt „Elemente” și „Stiluri”. În alte browsere, acestea pot fi denumite diferit.

Dacă ați inspectat corect elementul, veți avea o vizualizare a textului butonului a cărui proprietate text am dori să o modificăm, în fila Elemente.

Deoarece în cazul nostru aici suntem interesați doar de modificarea proprietății de culoare a textului la butoane, putem fie efectua următoarele:

1. Faceți clic pe pictograma „New Style Rule” ilustrată mai jos:

După ce faceți clic pe el, va fi redată o foaie de stil inspector. În acest caz, va fi generată o clasă CSS pentru buton, așa cum este ilustrat mai jos.

Codul nostru real în acest caz va fi, prin urmare:

 .stx-btn-text { }

Acum, pentru a modifica culoarea textelor butoanelor, va trebui să adăugăm codul de culoare. Pentru aceasta, vom folosi proprietatea color, îi vom specifica o culoare și o vom adăuga la codul nostru original. Aceasta va fi:

 color: #ff0000;

În cazul de mai sus, #ff0000 este codul de culoare pe care intenționăm să-l folosim. Puteți seta orice alt cod de culoare după preferința dvs.

Codul nostru final va fi acum:

 .stx-btn-text { color: #ff0000; }

2. Alternativ, la inspectarea unui element, puteți utiliza primul cod pentru elementul redat sau codul folosit pentru a stila elementul, în scopul stilizării. Mai jos este o ilustrare a acestui cod:

În cadrul codului, adăugați proprietatea de culoare și codul de culoare la acesta, precum și eliminați celelalte proprietăți specificate în acesta, deoarece în cazul nostru aici nu este nevoie să le suprascriem:

 color: #ff0000;

Codul final se va citi acum ca:

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

Oricare dintre abordările de mai sus poate fi utilizată pentru identificarea și determinarea CSS de personalizat sau adăugat.

La specificarea codului, este posibil să observați că schimbarea culorii intră în vigoare, dar aceasta nu se întâmplă până când pagina nu este reîmprospătată. Prin urmare, trebuie să salvăm CSS-ul, astfel încât CSS-ul să aibă întotdeauna efect. Acest lucru ne duce acum la următorul nostru pas.

Cum să adăugați CSS personalizat

Acum că am studiat cum să identificăm și să venim cu CSS personalizat. Acum avem nevoie de o modalitate de a adăuga și salva CSS-ul pe site-ul nostru.

Există diverse abordări pe care le putem folosi pentru a adăuga CSS personalizat pe site-ul nostru. Acestea includ:

1. Printr-o temă pentru copii
2. Prin intermediul WordPress Customizer
3. Utilizarea unui plugin terță parte

Printr-o temă pentru copii

O temă copil vă permite să vă personalizați tema părinte, eliminând astfel probabilitatea de a vă pierde personalizările în timpul actualizărilor temei. Pentru mai multe detalii despre temele pentru copii și despre cum să le configurați, puteți consulta subiectul Teme pentru copii aici: Teme pentru copii.

O temă copil conține un fișier style.css. Acesta este fișierul în care puteți adăuga CSS personalizat. Pentru a-l accesa, acest lucru poate fi realizat accesând fișierele site-ului dvs. prin FTP, utilizând un software FTP, cum ar fi Filezilla. Alternativ, îl puteți accesa din Aspect > Editorul de fișiere tematice și puteți selecta tema copilului dvs. din meniul derulant de teme, după cum este ilustrat mai jos:

După identificarea fișierului style.css, adăugați codul personalizat la ultima linie din fișier și salvați modificările. În cazul nostru aici, vom adăuga codul în linia 12, așa cum este ilustrat mai jos:

Prin intermediul WordPress Customizer

Adăugarea de CSS personalizat prin intermediul WordPress Customizer este o altă opțiune excelentă de luat în considerare. În această metodă, va trebui să:

Navigați la secțiunea Aspect > Personalizare din tabloul de bord WordPress.

Pe ecranul următor, o serie de opțiuni, cum ar fi meniuri, widget-uri și multe altele, în funcție de tema dvs., vor fi redate în panoul din stânga. Derulați în jos până când găsiți opțiunea „CSS suplimentar”.

După ce faceți clic pe secțiunea „CSS suplimentar”, veți avea o secțiune de introducere a codului în care puteți adăuga CSS-ul dvs. personalizat. Acum adăugați CSS-ul dvs. personalizat la secțiune:

După adăugarea codului dvs. CSS, îl puteți salva ca schiță pentru a fi publicat într-o etapă ulterioară sau îl puteți publica imediat.

De asemenea, este important să rețineți că această secțiune oferă validare și evidențierea sintaxei codului. Dacă, prin urmare, există erori în codul dvs., la adăugarea acestuia, veți avea câteva evidențieri în acest sens.

Utilizarea unui plugin terță parte

Adăugarea de CSS personalizat cu ajutorul unui plugin este o altă considerație. Acest lucru este de fapt mai aplicabil dacă se întâmplă să comutați temele mai târziu și doriți ca CSS-ul pe care l-ați adăugat să fie folosit și în noua temă.

Există o serie de pluginuri terță parte care pot fi utilizate în adăugarea de CSS personalizat pe site-ul dvs. WordPress. Aici vom acoperi cel puțin trei dintre aceste plugin-uri și puteți alege să utilizați oricare dintre ele pe site-ul dvs. web.

CSS Pro personalizat

Pluginul CSS personalizat Pro oferă o interfață ușor de utilizat cu o experiență de editare live pentru utilizatorii care trebuie să adauge CSS personalizat pe site-urile lor web.

După instalarea pluginului, puteți continua cu adăugarea CSS-ului dvs. personalizat accesând secțiunea Setări > CSS personalizat Pro din tabloul de bord WordPress.

În editorul live furnizat, puteți adăuga CSS personalizat și puteți salva modificările. Mai jos este o mostră despre asta:

SiteOrigin CSS

Pluginul CSS SiteOrigin oferă capabilități puternice de editare CSS. O completare cheie la plugin este că vă permite să identificați un selector pe care îl puteți utiliza pentru a aplica CSS personalizat unui element.

După ce ați instalat și activat pluginul, va trebui să navigați la secțiunea Aspect > CSS personalizat, așa cum este ilustrat mai jos:

Apoi, adăugați CSS-ul dvs. personalizat în editorul CSS personalizat redat așa cum se vede mai jos:

Dacă doriți să utilizați și editorul vizual, va trebui să faceți clic pe pictograma ochiului evidențiată mai jos:

CSS personalizat simplu

Pluginul CSS personalizat simplu este un plugin ușor și ușor de utilizat, care permite administratorilor de site-uri web să adauge CSS personalizat pe site-urile lor.

După instalarea pluginului, va trebui să navigați la secțiunea Aspect > CSS personalizat.

Apoi, în editorul redat, adăugați CSS-ul dvs. personalizat. Mai jos este un exemplu de ilustrare în acest sens:

După ce ați făcut acest lucru, salvați modificările făcând clic pe butonul „Actualizați CSS personalizat”.

Motive comune pentru care modificările CSS nu au efect

În unele cazuri, este posibil ca CSS-ul personalizat pe care îl adăugați în site-ul dvs. web să nu aibă efect întotdeauna. Acest lucru poate fi cauzat de o serie de motive, printre acestea fiind:

1. Memorarea în cache

Dacă aveți instalat un plugin de cache, acest lucru poate duce la stocarea în cache a diferitelor active de pe site-ul dvs. Prin urmare, este vital să ștergeți memoria cache a site-ului după ce salvați CSS-ul personalizat sau să dezactivați pluginul de cache pe care l-ați putea folosi.

Uneori este posibil să aveți și stocarea în cache la nivel de server dacă furnizorul dvs. de găzduire oferă suport pentru stocarea în cache a serverului. În astfel de cazuri, este important ca gazda să dezactiveze memorarea în cache pentru dvs. sau să efectuați acest lucru din panoul dvs. de găzduire, dacă este furnizată o opțiune pentru aceasta.

2. Erori de sintaxă

O eroare de sintaxă CSS este, în general, o greșeală în codul dvs. CSS. Ar putea fi, de exemplu, două puncte lipsă, punct și virgulă sau chiar o ortografie incorectă a proprietății.

Este important să verificați dacă codul dvs. CSS nu are astfel de erori. Puteți utiliza un validator CSS, cum ar fi Serviciul de validare CSS, pentru a efectua validarea CSS.

3. Specificitatea CSS

Specificitatea CSS determină practic care CSS are prioritate dacă aveți reguli CSS care vizează același element.

Să spunem de exemplu în cazul nostru dacă am avut două coduri CSS pentru a modifica culoarea butoanelor, unde unul dintre coduri folosește un ID pentru a specifica stilul, iar celălalt folosește o clasă.

 #stx-btn-text { color: #000000; }

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000; }

Codul CSS cu selectorul ID este ceea ce va fi folosit. Acest lucru se datorează faptului că selectoarele de ID au o specificitate mai mare decât clasele. În cazul de mai sus, culoarea care s-ar aplica ar fi negru (#000000).

Cu toate acestea, puteți utiliza regula !important după valoarea proprietății pentru a suprascrie specificul CSS. De exemplu, în cazul nostru de aici, dacă aplicăm regula !important codului cu o clasă, atunci acel cod CSS este cel care va fi aplicat și într-un astfel de caz culoarea ar fi roșie (#ff0000).

 .stx-btn-wrapper .stx-btn .stx-btn-content-wrapper .stx-btn-text { color: #ff0000 !important; }

Regula !important ar trebui totuși folosită cu moderație (doar atunci când este cu adevărat necesar). Unul dintre motivele acestui lucru este că, dacă regula este aplicată pe un element în mai multe cazuri, poate provoca confuzie la aplicarea stilurilor și poate fi destul de dificil să depanați problema.

Concluzie

Înțelegerea modului de a identifica și adăuga CSS personalizat în site-ul dvs. WordPress poate fi destul de utilă proprietarilor de site-uri. Unul dintre avantajele acestui lucru este reducerea timpului necesar pentru a vă proiecta site-ul. În plus, ajută și la eliminarea necesității de a externaliza un dezvoltator pentru personalizări minore CSS.

Sperăm că acest ghid a fost informativ atunci când vine vorba de adăugarea CSS personalizat. Puteți afla mai multe despre CSS aici. Dacă aveți sugestii, întrebări sau comentarii, nu ezitați să le adresați în secțiunea de comentarii de mai jos.