Cum să vă personalizați site-ul WordPress cu CSS: 3 metode simple

WordPress a evoluat de-a lungul anilor, iar astăzi este o platformă destul de flexibilă și ușor de personalizat prin editorul său de blocuri, Gutenberg. Cu toate acestea, vor exista momente când aveți nevoie de puțin mai multă acoperire decât vă oferă editorul Gutenberg.

Aici este locul în care CSS personalizat este util. Stilul CSS vă permite să editați culorile, spațierea, fonturile, machetele și, practic, orice alt element vizual al site-ului dvs. WordPress, permițându-vă să îl faceți exact așa cum doriți.

În acest articol, vă vom prezenta elementele esențiale ale personalizării site-ului dvs. WordPress cu CSS.

De ce să vă personalizați site-ul web cu CSS?

Adăugarea de CSS personalizat este doar una dintre metodele pe care le puteți utiliza pentru a regla aspectul site-ului dvs. Alte metode includ utilizarea a temă WordPress premium bine prezentată, sau instalarea unui generator de pagini.

În timp ce aceste două metode sunt puțin mai ușor de utilizat pentru începători și nu necesită cunoștințe de codare, utilizarea CSS personalizat este mai avantajoasă în două moduri principale:

Cost zero

Temele premium și creatorii de pagini WordPress pot fi la îndemână, dar au un cost - în dolari și cenți. Înarmat cu cunoștințele despre cum să scrieți CSS personalizat, pe de altă parte, puteți obține aceleași efecte fără a suporta cheltuieli suplimentare.

Balonare minimă

Creatorii de pagini și temele bine prezentate sunt concepute pentru a oferi utilizatorilor mai multă flexibilitate și o gamă largă de opțiuni pentru personalizarea site-urilor web. Din această cauză, au tendința de a adăuga umflare site-urilor web, potențial încetinindu-le.

Când scrieți CSS personalizat, pe de altă parte, veți adăuga doar caracteristicile necesare, rezultând, în general, site-uri web mai ușoare și viteze de încărcare mai mari.

3 Metode ușoare de a vă personaliza site-ul WordPress cu CSS

Sper că știi deja cum se scrie CSS. După ce vă familiarizați cu elementele de bază, puteți utiliza oricare dintre următoarele metode pentru a adăuga CSS personalizat pe site-ul dvs. WordPress:

Metoda 1: Utilizați Personalizatorul WordPress

Cu WordPress 4.7 sau orice versiune ulterioară, puteți adăuga CSS personalizat direct din zona de administrare. Aceasta este metoda cea mai simplă și, deoarece există o previzualizare live disponibilă, puteți vedea orice modificări pe care le faceți în timp real.

Este, de asemenea, cel mai recomandat, deoarece toate modificările pe care le veți face sunt salvate chiar în WordPress. Aceasta înseamnă că, chiar dacă vă schimbați sau actualizați tema, nu vă veți pierde CSS-ul personalizat.

Iată pașii de urmat:

Pasul 1: Navigheaza catre Aspect > Personalizare.

Aceasta va deschide personalizarea temei WordPress, care vă arată o previzualizare live a site-ului dvs. în dreapta, împreună cu câteva opțiuni de personalizare în partea stângă. Derulați în jos în partea de jos a panoului din stânga și veți găsi un CSS suplimentar fila.

Pasul 2: Faceți clic pe CSS suplimentar Tab.

Aceasta va deschide o casetă mică în panoul din stânga unde puteți adăuga CSS-ul dvs. personalizat. Puteți introduce câte rânduri de cod CSS doriți. Lucrul grozav la acest editor este că vă validează codul, avertizându-vă dacă există erori.

Pasul 3: publicați modificările dvs.

Orice regulă CSS validă pe care o adăugați va apărea în zona de previzualizare live din dreapta. Pentru a aplica modificările site-ului dvs., faceți clic pe Publica butonul din partea de sus a panoului din stânga după ce sunteți mulțumit. Dacă nu doriți ca modificările să intre în vigoare imediat, puteți, de asemenea, să programați publicarea mai târziu sau să vă salvați munca ca schiță.

Este important să rețineți că orice modificări pe care le faceți folosind elementul de personalizare sunt legate de tema dvs. curentă. Dacă treceți vreodată la o altă temă, modificările se vor pierde dacă nu copiați CSS-ul personalizat și îl adăugați la noua temă. Este o practică bună să salvați toate CSS-urile personalizate pe care le adăugați la o temă pe un notepad. În acest fel, puteți pur și simplu să copiați codul și să-l lipiți în secțiunea „CSS suplimentar” pentru o altă temă.

Dacă vi se pare prea multă muncă și preferați o soluție care vă permite să aplicați CSS-ul personalizat la orice temă WordPress pe care o utilizați, următoarea metodă este pentru dvs.

Metoda 2. Utilizați un plugin

Pluginurile CSS personalizate stochează CSS-ul personalizat separat de tema, permițând aplicarea modificărilor indiferent de tema pe care o utilizați. Aceste plugin-uri vin și cu funcții suplimentare, cum ar fi completarea automată, care pot facilita adăugarea CSS.

Singurul dezavantaj este că sunt software de la terți, ceea ce înseamnă că pot încetini site-ul dvs. Cele mai multe dintre aceste plugin-uri sunt totuși ușoare, așa că, în general, au un impact redus asupra performanței site-ului dvs. Iată câteva dintre cele mai bune pluginuri CSS personalizate pe care le puteți folosi:

• CSS personalizat simplu

CSS personalizat simplu este unul dintre cele mai populare plugin-uri CSS personalizate. Este ușor, ușor de utilizat și oferă caracteristici excelente. Configurarea este ușoară. Tot ce trebuie să faceți este să instalați și să activați pluginul. Apoi, navigați la Aspect secțiunea din panoul din stânga al tabloului de bord.

Veți vedea o nouă opțiune numită CSS personalizat. Făcând clic pe el, se va deschide un editor în care puteți adăuga CSS-ul dvs. personalizat. Apasă pe Actualizați CSS personalizat butonul pentru a salva modificările. Pentru a vedea modificările, trebuie doar să vă reîmprospătați site-ul.

• CSS și JS personalizat simplu

Dacă doriți și mai multe funcții, Plugin CSS și JS personalizat simplu este o opțiune grozavă. Pe lângă adăugarea CSS, vă permite să adăugați intrări JavaScript.

• Erou CSS

Dacă nu doriți să scrieți o singură linie de cod, aplicația Pluginul CSS Hero este perfect pentru tine. Acest plugin oferă un editor CSS vizual cu meniuri drop-down și câmpuri de introducere care vă permit să editați aproape orice stil CSS de pe site-ul dvs. fără a fi nevoie să scrieți niciun cod.

Metoda 3. Editați codul brut

Cele două metode pe care le-am descris mai sus vă permit să adăugați CSS personalizat pe site-ul dvs. fără a fi nevoie să atingeți niciunul dintre fișierele tematice. Dar, în unele cazuri, este posibil să doriți să editați CSS-ul temei sau să adăugați direct CSS personalizat la codul temei.

Pentru a face acest lucru, va trebui să accesați foaia de stil a site-ului dvs. web. O modalitate ușoară de a accesa această foaie de stil este prin intermediul Editor de teme pe tabloul de bord WordPress.

Înainte de a merge mai departe, totuși, există câteva măsuri de protecție pe care trebuie să le puneți în aplicare. Primul, faceți copii de rezervă pentru site-ul dvs. În timp ce editați fișierele cu tema, este ușor să faceți greșeli care ar putea să vă blocheze site-ul.

O copie de rezervă vă asigură că aveți un site web funcțional la care să vă întoarceți. Următorul, creați o temă copil. Dacă faceți modificări directe temei părinte, modificările se vor pierde de fiecare dată când tema este actualizată.

Odată ce aceste măsuri de siguranță sunt aplicate, conectați-vă la backend-ul dvs. WordPress. Mergi la Aspect > Editor de teme. Când faceți clic pe opțiunea editor de teme, veți vedea o casetă pop-up care vă avertizează să nu faceți modificări directe la fișierele teme. Dacă urmați pașii de mai sus, sunteți gata.

Clic Am înțeles a inainta, a merge mai departe.

După ce faceți clic, ar trebui să vedeți foaia de stil a site-ului dvs. în mod implicit. Dacă nu, priviți pur și simplu în panoul din dreapta și faceți clic pe stil.css sub Foaia de stil opțiune.

De aici, puteți face modificări directe fișierelor teme. Doar nu uitați să faceți clic Salvați și actualizați odată ce ai terminat.

Preluați controlul asupra aspectului site-ului dvs. cu CSS personalizat

Învățarea cum să scrieți CSS personalizat pe WordPress poate dura ceva timp pentru începători, dar vă va oferi un control real asupra aspectului site-ului dvs. Și asta cu costuri zero și cu impact minim asupra performanței site-ului dvs.

Dacă preferați să nu faceți nicio proiectare manuală, totuși, există și alte modalități de a face treaba, cum ar fi folosind unul dintre cei mai buni generatori de pagini pentru WordPress.

5 Creatori de pagini WordPress care vă pot ajuta să construiți site-uri web uimitoare

Doriți să faceți site-ul dvs. WordPress să arate uimitor, dar nu vă puteți permite un dezvoltator? Încercați în schimb acești creatori de pagini WordPress.

Citiți în continuare

Despre autor