Cum să editați CSS în WordPress (Editați, adăugați și personalizați cum arată site-ul dvs.)

Doriți să încercați să editați CSS WordPress, dar nu aveți idee de unde să începeți? Cu stilul CSS, puteți edita aspectul site-ului dvs. la nivel global sau pe anumite pagini. Adăugați culori, distanțați anumite elemente, proiectați un aspect și, practic, schimbați exact cum arată orice din tema dvs. WordPress.

Dacă doriți să vă familiarizați mai bine cu mediul de dezvoltare WordPress sau pur și simplu să aveți un control mai fin asupra aspectului site-ului dvs., va trebui să știți cum să adăugați CSS în WordPress (plus cum să schimbați ceea ce există deja).

Editând tema și incluzând CSS-ul dvs. suplimentar, veți putea optimiza fiecare element vizual de pe site-ul dvs. Astăzi, îl vom arunca o privire mai atentă.

Sunteți gata să începeți? S-o facem!

Preferiți să vizionați versiunea video?

Ce este editarea CSS?

CSS înseamnă Cascading Style Sheets și este cel mai popular limbaj web pe lângă HTML. Cele două merg mână în mână, deoarece CSS este folosit pentru a stila elementele HTML. HTML pune bazele aspectului unui site web, iar CSS este folosit pentru a-l stila în continuare.

CSS vă oferă posibilitatea de a face un site web receptiv, de a adăuga culori, de a schimba fonturile, de a modifica aspectul și, în general, de a ajusta prezentarea vizuală a unui site web. La fel ca HTML și JavaScript, CSS este un limbaj frontend pe partea clientului, ceea ce înseamnă că se execută la sfârșitul utilizatorului, mai degrabă decât pe serverul backend.

Când vă scufundați în dezvoltarea WordPress, HTML, CSS, JavaScript și PHP sunt limbile pe care trebuie să le cunoașteți. Acesta este ceea ce este încorporat CMS-ul de bază, precum și numeroasele sale teme și pluginuri.

Dar chiar dacă nu sunteți web designer sau dezvoltator, este bine să alegeți puțin CSS, deoarece îl puteți folosi pentru a muta sau a stila elemente de pe site-ul dvs. sau pentru a face mici modificări estetice temei dvs. pentru a vă potrivi mai bine.

WordPress și CSS

În WordPress, CSS este puțin diferit. Este controlat de teme, care sunt alcătuite din fișiere șablon, etichete șablon și, desigur, foaia de stil CSS. Deși sunt generate de tema dvs., toate acestea sunt editabile de dvs.

Fișierele șablon împart părți ale site-ului dvs. în secțiuni (cum ar fi header.php sau archive.php), iar etichetele șablon sunt folosite pentru a apela la acestea și la alt conținut din baza de date. Aceste fișiere sunt de fapt compuse în principal din PHP și HTML, deși puteți adăuga CSS dacă este necesar.

Ceea ce cauți cu adevărat este foaia de stil sau style.css. Pentru a schimba modul în care arată site-ul dvs. web, va trebui să învățați cum să adăugați și să editați codul în acest fișier.

Cum să vă personalizați tema WordPress cu CSS

Dacă doriți să vă personalizați tema și să schimbați modul în care arată site-ul dvs. cu CSS, va trebui fie să adăugați propriul cod, fie să editați ceea ce există deja. Există modalități de a adăuga CSS fără a fi nevoie să atingeți vreun fișier temă, dar pentru a modifica codul de temă existent, va trebui să accesați foaia de stil a site-ului dvs.

Pe măsură ce faceți aceste modificări, ar trebui să știți un lucru: atunci când tema se actualizează, orice modificări pe care le-ați făcut la style.css , functions.php sau alte fișiere șablon de temă vor fi șterse. În general, nu ar trebui să faceți modificări directe site-ului dvs. în editor fără a utiliza o temă copil.

Foaia de stil este ca o „listă de instrucțiuni” pentru site-ul dvs., stabilind exact modul în care este stilată și cum este gestionat codul CSS. Aici veți face cea mai mare parte a editării, dar vă vom arăta și cum să accesați alte fișiere șablon de temă, cum ar fi header.php și footer.php.

Există două moduri de a accesa foaia de stil a site-ului dvs. WordPress: prin tabloul de bord WordPress sau printr-un client FTP. Le vom acoperi pe amândouă.

Nu e confortabil să faci asta singur? Luați în considerare angajarea unui dezvoltator WordPress care să se ocupe de acest pas pentru dvs.

Editarea CSS WordPress în tabloul de bord

Cel mai simplu și mai convenabil mod de a accesa foaia de stil CSS este chiar în tabloul de bord WordPress. Nu este nevoie să instalați programe FTP sau editori de cod. Puteți edita direct orice fișier cu evidențiere de sintaxă și documentație pentru funcții încorporate.

Înainte de a face modificări majore la fișierele de bază, ar trebui să faceți întotdeauna backup pentru site-ul dvs. WordPress. Este foarte ușor să faci accidental o greșeală care ar putea distruge aspectul site-ului tău dacă ești nou în CSS și ar putea fi dificil să îți dai seama cum să anulezi modificările.

După ce ați făcut o copie de rezervă și o temă copil, conectați-vă la backend. Puteți găsi editorul accesând meniul și făcând clic pe Aspect > Editor de teme .

Ar trebui să vedeți o fereastră pop-up care vă avertizează împotriva modificărilor directe ale acestor fișiere. Nu vă faceți griji, faceți clic pe „Am înțeles”. Este doar un avertisment să utilizați o temă secundară și să faceți backup pentru site-ul dvs. înainte de a face modificări majore. Urmați acești pași și puteți edita în siguranță.

Și acum ești înăuntru! Ar trebui să fiți în foaia de stil în mod implicit, dar uitați-vă la meniul din dreapta pentru a vizualiza fișierele tematice, dacă nu.

Pe lângă style.css, veți avea și acces la fișiere șablon precum functions.php, header.php și single.php. Toate acestea afectează modul în care anumite pagini de pe site-ul dvs. acționează.

Dar ar trebui să vă familiarizați cu PHP înainte de a vă scufunda în aceste fișiere specifice.

Nu uitați: majoritatea modificărilor CSS pe care le faceți aici vor fi globale. De exemplu, dacă schimbați anteturile H1 cu un anumit font, acesta va intra în vigoare pentru fiecare pagină de pe site-ul dvs. Va trebui să utilizați o sintaxă specială pentru a personaliza stilul anumitor pagini.

Editați fișierele cu teme direct

Ce se întâmplă dacă nu puteți accesa Editorul de teme sau preferați să vă faceți munca prin FTP? Este mai ușor să utilizați editorul backend, dar unele teme sau pluginuri îl pot dezactiva. Dacă acesta este cazul, va trebui să vă conectați la site-ul dvs. prin FTP.

FTP, sau File Transfer Protocol, vă permite să accesați și să modificați de la distanță fișierele unui site web. Primul lucru pe care trebuie să-l faceți este să descărcați FileZilla sau orice alt client FTP.

Apoi, ar trebui să vă contactați gazda și să cereți acreditările dvs. FTP (gazdă, portul și numele de utilizator/parola, dacă este cazul). Dacă gazda dvs. are un tablou de bord, este posibil să le puteți găsi conectându-vă.

Acreditările utilizatorilor Kinsta se află în tabloul de bord MyKinsta, sub Site-uri > SFTP/SSH .

Odată ce le aveți, lansați clientul FTP și introduceți acele informații. Dacă nu funcționează, încercați să puneți „sftp://” înainte de adresa URL în secțiunea Gazdă .

Odată ce ați ajuns, puteți găsi fișierul style.css făcând clic pe folderul wp-content pentru a-l deschide, apoi pe folderul temei dvs. (cum ar fi tema T wenty Twenty ), apoi derulând până când vedeți style.css.

Faceți dublu clic pentru a-l deschide (sau faceți clic dreapta și selectați Vizualizare/Editare ) și efectuați modificările. Nu uitați să salvați și să încărcați înapoi pe server.

Dacă trebuie să editați alte fișiere șablon precum home.php, single.php, archive.php, le puteți găsi în același folder ca style.css.

Editarea fișierelor cu tema, fie prin FTP sau prin tabloul de bord, nu este întotdeauna necesară. De fapt, este mai bine să evitați să o faceți dacă doar adăugați niște cod suplimentar.

Pentru adăugări mici, iată cea mai bună modalitate de a adăuga CSS pe site-ul dvs. WordPress.

Cum să adăugați CSS personalizat în WordPress

Dacă nu doriți să editați codul CSS existent și doriți doar să adăugați propriul stil, este recomandat să utilizați una dintre următoarele metode: personalizare WordPress sau folosirea unui plugin dedicat.

În primul rând, codul CSS adăugat printr-una dintre aceste metode este mult mai ușor de accesat și utilizat. Nu trebuie să vă faceți griji cu privire la plasarea noului dvs. CSS în locul greșit sau pentru a uita unde l-ați adăugat dacă doriți să faceți modificări mai târziu.

Înscrieți-vă pentru Newsletter

Vrei să știi cum ne-am crescut traficul peste 1000%?

Alăturați-vă celor peste 20.000 de persoane care primesc buletinul nostru de știri săptămânal cu sfaturi despre WordPress!

Abonează-te acum

De asemenea, CSS adăugat prin una dintre aceste metode nu se va pierde atunci când tema se actualizează (deși poate dispărea dacă schimbați teme).

Aceasta înseamnă că nu trebuie să utilizați o temă copil și, dacă ceva se rupe, tot ce trebuie să faceți este să eliminați CSS-ul pe care tocmai l-ați adăugat.

Rețineți că ar trebui să păstrați în continuare o copie de rezervă a site-ului dvs., deoarece unii oameni au raportat că și-au pierdut ocazional CSS-ul în timpul actualizărilor majore. Cu toate acestea, această metodă este mult mai fiabilă decât editarea directă a fișierelor cu teme.

Deși poți doar să adaugi cod la style.css și să-l numești o zi, dacă nu vrei să creezi o temă secundară, să faci modificări majore la CSS existent în tema ta și, eventual, să ajungi cu toată munca ștearsă, cel mai bine este fie să utilizați opțiunea CSS suplimentară din personalizarea WordPress, fie să instalați un plugin.

1. Editarea CSS prin intermediul WordPress Customizer

În loc să utilizați Editorul de teme, încercați acest lucru. Conectați-vă la backend-ul WordPress și faceți clic pe Aspect > Personalizare pentru a deschide ecranul de personalizare a temei. Veți vedea o previzualizare live a site-ului dvs., cu opțiuni în partea stângă pentru a personaliza elemente precum culorile, meniurile sau alte widget-uri.

În partea de jos a acestui meniu, ar trebui să găsiți caseta CSS suplimentară .

Faceți clic pentru a-l deschide. Veți fi dus la un nou ecran cu o casetă de introducere a codului și câteva instrucțiuni. Ecranul CSS suplimentar include evidențierea sintaxei, la fel ca Editorul de teme, împreună cu validarea care vă informează dacă codul este greșit.

Orice cod pe care îl scrieți apare automat în zona de previzualizare din dreapta, cu excepția cazului în care are o eroare (deși puteți alege să îl publicați oricum).

Când ați terminat de lucrat, puteți să publicați codul, să programați când va intra în vigoare sau să îl salvați ca schiță pentru a lucra mai târziu. Puteți chiar să obțineți un link de previzualizare pe care să îl distribuiți altora.

După cum puteți vedea, pagina CSS suplimentară este în multe privințe mai puternică decât Editorul de teme și mult mai potrivită pentru adăugarea de cod decât pentru a încurca fișierele de bază.

Codul CSS pe care îl scrieți aici suprascrie stilul implicit al temei și nu dispare atunci când tema se actualizează. Dacă nu îl puteți vedea „în direct” în previzualizare, verificați din nou dacă utilizați selectoarele corecte în codul dvs. CSS.

La fel ca în cazul Editorului de teme, CSS este global în mod implicit, dar puteți scrie cod care vizează anumite pagini.

Singurul dezavantaj este că, dacă schimbați teme, orice ați scris va fi șters. Asigurați-vă că faceți copii de rezervă pentru CSS înainte de a trece la o temă nouă, altfel s-ar putea să pierdeți multă muncă.

Dacă vă străduiți să utilizați această opțiune sau doriți o soluție care să funcționeze pe diferite teme și să vizeze mai ușor anumite pagini, ar trebui să încercați un plugin.

2. Adăugarea CSS personalizat la WordPress folosind pluginuri

Există câteva motive pentru care ați putea dori să utilizați un plugin pentru a adăuga CSS la WordPress. În timp ce funcția este similară cu meniul CSS suplimentar, stilurile vor rămâne, de obicei, chiar dacă comutați/actualizați teme.

De asemenea, vă puteți bucura mai mult de interfața lor de utilizare sau vă pot plăcea funcțiile suplimentare, cum ar fi completarea automată. Unele plugin-uri vă permit chiar să construiți CSS prin meniuri drop-down, mai degrabă decât să trebuiască să le scrieți singur.

CSS personalizat simplu

Simple Custom CSS este cel mai popular plugin de editor CSS, datorită ușurinței sale de utilizare, interfeței minime și backend-ului ușor. Pe scurt, este un plugin WordPress foarte mic, care are un impact mare.

Configurarea este simplă și nu veți observa niciun impact negativ asupra performanței. Funcționează pe orice temă și include evidențierea sintaxei și verificarea erorilor.

CSS și JS personalizat simplu

CSS și JS personalizat simplu este o alternativă bună. De asemenea, vă permite să vizați antetul, subsolul, interfața sau chiar backend-ul admin.

SiteOrigin CSS

SiteOrigin CSS este o altă opțiune care include și un editor CSS tradițional. Puteți comuta oricând între acesta și editorul vizual.

WP Adăugați CSS personalizat

Dacă vă străduiți să adăugați CSS în anumite pagini, WP Add Custom CSS adaugă o casetă CSS personalizată la ecranul de editare și vine, de asemenea, cu stil global.

Erou CSS

De asemenea, vă recomandăm să încercați un editor CSS vizual. Acestea preiau toate codurile complicate și o transformă într-o serie de câmpuri de introducere și meniuri derulante ușor de utilizat, care se ocupă de toată programarea pentru tine.

CSS Hero este un plugin de editare vizuală premium cu câteva funcții foarte puternice (animație, editări specifice dispozitivului și editare nedistructivă, pentru a numi câteva).

Unde să înveți CSS

Sunteți gata să vă scufundați în CSS pentru dvs.? Aceste tutoriale pentru începători vor stabili elementele de bază și vă vor învăța sintaxa pe care trebuie să o cunoașteți pentru a vă scrie propriul cod CSS funcțional.

Poate fi descurajantă, dar dacă nu încerci să faci ceva cu adevărat avansat, CSS nu este prea greu! Lucrurile simple precum schimbarea culorii de fundal sau setarea stilului fontului sunt destul de ușoare și există o mulțime de exemple online.

(Lectură sugerată: peste 50 de fonturi moderne de folosit pe site-ul dvs. WordPress)

Majoritatea tutorialelor de programare pe care le veți găsi pe internet sunt și ele complet gratuite. Există o mulțime de informații acolo fără costuri reduse.

Iată câteva exemple care acoperă cele mai bune tutoriale CSS pentru începători.

• Tutorial CSS W3Schools: Există o mulțime de informații care pot fi găsite aici: tutoriale aprofundate, exemple și referințe cu care să lucrați. Tutorialele W3Schools sunt cât se poate de simplu și ușor de urmat, așa că, chiar dacă sunteți un începător total, acesta este un loc grozav de început.
• Codeacademy Învață CSS: Prin șase lecții practice gratuite, vei învăța elementele de bază ale CSS. Acesta nu este un simplu tutorial video, ci o lecție interactivă care vă face să lucrați cu cod real. Cu versiunea pro, aveți, de asemenea, chestionare și proiecte libere la care să lucrați.
• Învață CSS într-o oră: mulți oameni doresc să învețe un nou limbaj de programare, dar pur și simplu nu au timp să-l dedice. Dar dacă puteți rezerva doar o oră, puteți învăța CSS cu acest curs gratuit din 20 de părți. Chiar dacă nu ești un maestru până la sfârșit, ar trebui să ai o bună înțelegere a elementelor de bază.
• Introducere în HTML și CSS de bază pentru utilizatorii WordPress: Căutați ceva specific pentru WordPress? Dacă te-ai luptat mereu cu scrierea HTML și CSS, acest curs este perfect pentru tine. Este plătit, dar vine cu 52 de prelegeri și cinci ore de videoclipuri din care să înveți.

rezumat

Ca utilizator WordPress, săritul în CSS ar putea fi confuz la început. Dar odată ce știți cum să editați fișierele cu tema și unde să adăugați stil, nu ar trebui să mai aveți probleme.

Fișierele cu teme pot fi editate fie din backend, fie prin FTP pentru a schimba aspectul site-ului, dar acest lucru ar trebui de obicei evitat, cu excepția cazului în care trebuie să editați codul existent.

Dacă doriți doar să adăugați propriul dvs. CSS, utilizați pagina CSS suplimentară sub Aspect > Personalizare sau încercați un plugin dacă aveți nevoie de ceva mai puternic.

Modificările aduse foii de stil se vor pierde la actualizarea temei, cu excepția cazului în care utilizați o temă secundară. Nu același lucru este valabil și pentru CSS suplimentar. Codul dvs. este protejat de actualizări, dar nu uitați: numai un plugin va păstra CSS atunci când schimbați teme.

Indiferent de metoda pe care o alegeți, ar trebui să păstrați întotdeauna copii de rezervă regulate ale site-ului dvs., inclusiv foaia de stil și codul personalizat pe care le-ați adăugat. Acum este timpul să vă perfecționați elementele de bază CSS folosind resursele pe care vi le-am oferit.

Styling fericit!

Lectură recomandată: Cele mai bune cursuri online de design web