Cum să adăugați CSS la WordPress: 5 metode

Doriți să aplicați CSS și să editați stilul site-ului dvs.? Dacă da, această postare este pentru tine. În acest ghid, vă vom arăta diferite moduri de a adăuga CSS la WordPress , astfel încât să vă puteți personaliza site-ul web și să faceți o impresie asupra vizitatorilor dvs.

Chiar dacă WordPress are o mulțime de teme și șabloane pe care le poți folosi, dacă vrei să schimbi aspectul site-ului tău, vei ajunge să adaugi cod CSS mai devreme sau mai târziu.

Adăugarea CSS pe un site web este destul de ușoară. Am văzut anterior cum să aplicăm CSS folosind instrumentul pentru dezvoltatori de browser, dar există și alte moduri. Toate aceste metode diferite au argumente pro și contra, așa că poate fi greu pentru începători să înțeleagă care este cea mai bună modalitate de a adăuga CSS pentru situația lor specifică. De aceea, în acest ghid, vă vom arăta diferite moduri de a adăuga stil CSS la un site web WordPress .

Cum să adăugați CSS la WordPress

Există mai multe moduri de a aplica stilul CSS unui site WordPress:

1. Prin personalizarea temei
2. Editarea fișierelor cu temă copil
3. Încărcarea propriului fișier CSS
4. Aplicați CSS la antet cu cârlige
5. Adăugați CSS la backend

Să aruncăm o privire asupra fiecărei metode, astfel încât să o poți alege pe cea mai potrivită pentru tine.

NOTĂ : Nu vom explica în detaliu structura CSS în această postare, așa că vă recomandăm să aveți o înțelegere de bază a CSS pentru a putea urma acest ghid fără probleme.

Ca pas anterior pentru aplicarea CSS, vă recomandăm să utilizați instrumentul de dezvoltare a browserului pentru a găsi anumite elemente HTML pe care doriți să le modificați. Dacă nu sunteți sigur cum să faceți acest lucru, aruncați o privire la ghidul nostru despre cum să aplicați CSS folosind instrumentul de dezvoltare a browserului.

1) Aplicați CSS cu personalizarea temei

Cea mai simplă și rapidă modalitate de a adăuga cod CSS personalizat la WordPress este inserarea acestuia în editorul CSS suplimentar al personalizării temei. Acesta este editorul CSS WordPress încorporat și este prezent implicit pe toate site-urile web. Cu toate acestea, rețineți că unele teme și pluginuri ar putea dezactiva această funcție.

Pentru a vă aplica CSS utilizând elementul de personalizare a temei, accesați tabloul de bord și accesați Aspect > Personalizare > CSS suplimentar pentru a deschide editorul CSS . Acolo, veți vedea codul CSS al site-ului dvs. și veți putea adăuga codul dvs.

Unul dintre cele mai mari avantaje ale acestei metode este că puteți previzualiza rezultatul personalizării CSS în timp real în partea dreaptă a ecranului.

Odată ce ați adăugat codul, acesta va fi salvat în baza de date în tabelul *_posts , sub tipul de postare custom_css . Chiar dacă aici puteți aplica tot felul de personalizare, nu este o practică recomandată pentru o listă mare de reguli CSS din cauza performanței.

2) Editarea fișierelor cu teme Child

O altă modalitate de a adăuga stil CSS la WordPress este editarea fișierelor CSS ale temei copil. Această metodă are performanțe mai bune decât aplicarea codului direct din Customizer, deoarece se încarcă fără a fi nevoie de a-l prelua din baza de date.

Majoritatea temelor pentru copii au un fișier style.css , așa că puteți adăuga pur și simplu CSS-ul dvs. personalizat acolo. Pentru a găsi fișierul style.css al temei copilului, în tabloul de bord WordPress, accesați Aspect > Editor de teme . Apoi apăsați meniul drop-down din dreapta sus, selectați tema copilului și faceți clic pe fișierul style.css , așa cum se arată mai jos.

Dacă tema copilului dvs. nu are un fișier style.css sau orice alt fișier cu o extensie .css , îl puteți crea și aplica așa cum este descris în secțiunea următoare.

Alternativ, unele teme copii au un folder CSS cu mai multe fișiere în el. Dacă acesta este cazul dvs., asigurați-vă că editați fișierul style.css corect.

3) Încărcați propriul fișier CSS

Dacă doriți să adăugați cod CSS mare personalizat la WordPress, este o practică bună să îl aveți într-un fișier separat și să îl încărcați în fișierele site-ului dvs. de pe server. Să vedem cum să o facem pas cu pas.

3.1) Creați fișierul CSS folosind un editor de cod

Pentru a face acest lucru, trebuie să utilizați un editor de cod precum Visual Studio Code, Sublime text sau orice altul care acceptă fișiere CSS.

Creați un fișier nou cu extensia CSS și inserați codul acolo. În acest exemplu, am denumit fișierul my-styles.css .

După ce inserați codul, salvați fișierul și continuați cu pasul următor.

3.2) Încărcați fișierul în folderul Child Theme

Dacă tema copilului dvs. are un director CSS, doar copiați și lipiți fișierul acolo. Alternativ, îl puteți încărca chiar în directorul principal al temei secundare. Nu vă faceți griji cu privire la locația din folderul cu tema copil, vom viza calea fișierului în pasul următor.

Acum utilizați cPanel sau un client FTP precum FileZilla pentru a încărca fișierul.

Dacă vă aflați pe un server localhost, puteți pur și simplu să copiați și să lipiți fișierul în folderul cu tema copil aflat în folderul public al serverului localhost.

Urmând exemplul nostru, vom lipi fișierul my-styles.css în tema copil.

3.3) Puneți în coadă fișierul .CSS personalizat

Acum trebuie să puneți în coadă fișierul CSS personalizat în fișierul functions.php al temei copilului pentru a-l face să funcționeze. Lipiți următorul script PHP după orice cod prezent în functions.php fişier.

 function my_styles() {
wp_register_style('my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
wp_enqueue_style( 'stilurile mele');
}
add_action( 'wp_enqueue_scripts', 'my_styles');

Asigurați-vă că fișierul nou creat este apelat corect după calea, în funcție de locul în care se află fișierul în directorul temei. De asemenea, nu uitați să schimbați numele fișierului ( my-styles.css în acest exemplu).

Puteți folosi următorul fragment pentru a verifica dacă calea este corectă sau nu.

 add_action('wp_head',function(){
echo get_stylesheet_directory_uri() . '/my-styles.css';
});

Asta e! Așa puteți aplica CSS la WordPress încărcând propriul fișier CSS.

4) Aplicați CSS la secțiunea antet folosind un cârlig

Dacă aveți niște abilități de codificare, puteți adăuga CSS pe site-ul dvs. folosind cârlige .

wp_head() este foarte util atunci când dezvoltați site-uri web. Deși nu este recomandat să îl utilizați pentru a include un script în eticheta HTML <head> , vă permite să faceți teste rapide și să depanați.

Dacă lucrați cu mai multe foi de stil CSS sau pe site-uri web complexe și ceva nu funcționează conform așteptărilor, puteți adăuga codul CSS chiar în secțiunea <head> folosind acest cârlig.

 add_Action('wp_head','my_head_css');
funcția my_head_css(){
ecou „<stil>
.site-branding{
    fundal: roșu;
    lățime: 200px;
    umplutură: 11px;
    chenar-rază: 23px; }
</stil>
";}

De exemplu, cu acest script, schimbăm dimensiunea titlului, culoarea de fundal, chenarul și umplutura.

În acest fel, vă puteți asigura că scriptul CSS este aplicat pe front-end peste orice alt fișier CSS sau inclus în site-ul web în orice alt mod.

5) Adăugați CSS la backend

În cele din urmă, mai există o modalitate de a adăuga stil CSS la WordPress. Puteți aplica CSS personalizat la backend folosind cârligul admin_head() după cum urmează:

 add_Action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
ecou '<stil>
#adminmenu{
    fundal: #602e93;}
</style>';
}

În acest exemplu, schimbăm culoarea de fundal (#602e93).

Metodele 4 și 5 pot fi foarte utile și vă pot ajuta să economisiți timp inserând un script CSS chiar în secțiunea HTML <head> . Cu toate acestea, nu este o practică recomandată și nu ar trebui să utilizați această metodă pentru aplicarea permanentă a stilurilor.

Concluzie

Una peste alta, cu un pic de CSS poți personaliza aspectul site-ului tău. Adăugarea CSS este ușoară, dar există mai multe moduri de a face acest lucru, așa că poate fi dificil să știi ce metodă ar trebui să folosești.

În acest tutorial, v-am arătat cinci metode diferite de a adăuga CSS pe site-ul dvs. WordPress:

1. Prin personalizarea temei
2. Editarea fișierelor cu temă copil
3. Încărcarea propriului fișier CSS
4. Aplicați CSS la antet cu cârlige
5. Adăugați CSS la backend

Fiecare metodă are avantajele și dezavantajele sale. De exemplu, adăugarea CSS din tema Personalizator este ușoară și vine cu o previzualizare în timp real. Cu toate acestea, nu este o practică recomandată pentru o listă mare de reguli CSS. Alternativ, puteți edita fișierele temei copilului sau puteți încărca propriul fișier CSS pe tema copilului.

Chiar dacă nu este recomandată o practică recomandată, puteți utiliza cârlige pentru a include un script în eticheta HTML <head> pentru a face teste rapide și a vă depana site-ul.

Ai adăugat CSS pe site-ul tău? Ce metoda ai folosit? Știți vreo altă metodă pe care ar trebui să o includem? Spune-ne în comentariile de mai jos!