Cum să personalizați o temă WordPress cu CSS
când doriți să aflați cum să personalizați o temă WordPress cu CSS, unul dintre primele lucruri pe care trebuie să le știți este cum să editați fișiere în cadrul temei în sine.
procesul de editare a fișierelor tematice este efectiv același, indiferent dacă doriți să personalizați CSS sau HTML, iar în tutorialele anterioare din această serie am acoperit deja acest proces, în scopul modificării HTML.
deci, pentru a evita reșaparea aceluiași motiv, aruncați o privire la „cum să editați HTML într-o temă WordPress” și „cum să instalați WordPress local cu XAMPP” pentru a afla despre:
- editarea fișierelor prin editorul de teme
- descărcarea și încărcarea fișierelor prin FTP sau conexiune la distanță
- de ce ar trebui să luați în considerare efectuarea modificărilor într-o temă copil
- editarea offline prin XAMPP
cu metodele de editare a fișierelor tematice deja acoperite, în acest tutorial vom rămâne concentrați asupra modului de editare css în WordPress învățând despre aceste subiecte:
- cum se adaugă CSS personalizat prin customizer temă
- cum de a identifica foaia de stil(e) o temă este folosind
- cum de a identifica care CSS trebuie să fie schimbat, și în cazul în care, în scopul de a personaliza o anumită parte a unei teme
Notă: Acest articol presupune că aveți cunoștințe de bază pentru a edita CSS în WordPress.
Premium WordPress Teme și plugin-uri
înainte de a începe, nu uitați puteți explora mii de teme WordPress pe ThemeForest și WordPress plugin-uri pe CodeCanyon. Achiziționați aceste teme și pluginuri WordPress de înaltă calitate și îmbunătățiți experiența site-ului dvs. web pentru dvs. și vizitatorii dvs.
cum se editează CSS în WordPress Theme Customizer
WordPress are o zonă dedicată în care puteți adăuga propriul cod CSS personalizat. Acest cod va fi încărcat la momentul potrivit pentru a se asigura că suprascrie stilul implicit al temei, iar utilizarea acestei abordări nu aduce modificări directe fișierelor tematice.
în meniul din stânga bara laterală a panoului de administrare WordPress du-te la aspect > personaliza:
acest lucru vă va duce în zona de personalizare a temei, unde puteți face clic pe elementul de meniu CSS suplimentar:
va apărea un câmp mare, în care puteți adăuga orice CSS personalizat doriți:
Salvați modificările făcând clic pe butonul albastru publicare din partea de sus a barei laterale din stânga când ați terminat de adăugat cod personalizat.
cum să identificați foaia de stil a unei teme
dacă nu doriți să utilizați zona CSS Additonal în personalizatorul temei și, în schimb, doriți să editați direct CSS-ul temei, veți avea nevoie de o modalitate de a afla ce fișiere folosește de fapt o temă pentru styling.
în majoritatea cazurilor, temele vor folosi structura standard pentru WordPress și vor avea un fișier numit „stil.css ” în directorul rădăcină al temei. De fapt, acesta este un fișier tematic esențial, astfel încât îl veți găsi întotdeauna în orice temă.
cu toate acestea, atunci când îl deschideți pentru editare, puteți găsi că este gol de cod, iar dezvoltatorul încarcă stilul de la altceva în temă. Sau, s-ar putea găsi chiar se încarcă în mai multe fișiere stylesheet.
există două moduri de a verifica ce foi de stil sunt utilizate de o temă.
inspectarea Codului capului
prima metodă este de a inspecta codul <head> al temei. Puteți face acest lucru făcând clic dreapta oriunde pe pagină și alegând Vizualizare sursă pagină, apoi localizând etichetele <head>...</head>.
între aceste etichete, căutați <link>elemente care au și rel='stylesheet'. Apoi uita-te pentru a vedea care dintre acestea provin din Directorul tema ta. Adresele URL ale foilor de stil vă vor spune unde să le găsiți în structura temei.
rețineți că, dacă executați un plugin care combină și minimizează toate foile de stil ale site-ului dvs. într-un singur fișier, această tehnică nu va funcționa, deoarece tot ce veți vedea este adresa URL a acelui fișier unic. În schimb, utilizați tehnica doi, verificând fișierul funcții.
verificarea fișierului funcțiilor
ori de câte ori o temă folosește o foaie de stil, trebuie să spună WordPress ce fișier dorește să folosească, printr-o funcție numită wp_enqueue_style(). Astfel, putem vedea exact ce foaie de stil(E) Tema se încarcă găsind utilizarea acestei funcții.
fiecare temă are un fișier numit „funcții.php ” situat în directorul său rădăcină. Utilizarea funcției wp_enqueue_style() este de obicei în acest fișier, deci deschideți-l și începeți să căutați numele funcției.
când localizați instanțe ale funcției wp_enqueue_style(), căutați între paranteze al doilea parametru, adică bitul de text după prima virgulă. Acest text vă arată locația foii de stil. De exemplu:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
în codul de mai sus, al doilea parametru este:
get_template_directory_uri() . '/css/mainstyle.css')
acest lucru ne spune că foaia de stil se află într-un sub-director tematic numit „css” și că numele fișierului său este „mainstyle.css”.
cum să identificați ce CSS să schimbați
odată ce știți cum să adăugați sau să editați tema CSS, următorul lucru de învățat este cum să aflați ce Cod trebuie să schimbați de fapt.
cel mai bun mod de a face acest lucru este utilizarea instrumentelor pentru dezvoltatori din browserul dvs., în mod ideal fie Chrome, fie Firefox, datorită calității instrumentelor lor.
să presupunem, de exemplu, că doriți să modificați dimensiunea fontului titlurilor postării. Faceți clic dreapta pe unul dintre titlurile postării și selectați opțiunea inspectați:
aceasta va deschide panoul Instrumente pentru dezvoltatori. Căutați în fila stiluri o proprietate font-size.
dacă nu vedeți unul, este posibil ca browserul să vă afișeze un element părinte sau copil, așa că în fila Elemente încercați să faceți clic pe elemente din apropiere până când găsiți un element care evidențiază cu exactitate forma textului titlului postării și are o proprietate font-size :
acum, în fila stiluri, încercați să modificați valoarea pentru proprietatea font-size. Dacă vedeți dimensiunea modificării textului în fereastra browserului, știți că ați găsit CSS-ul corect.
pentru a afla unde se află în foaia de stil acest CSS, priviți în partea dreaptă sus a locului în care tocmai ați editat valoarea font-size. Ar trebui să vedeți un nume de fișier, apoi două puncte, apoi un număr.
numele fișierului vă spune în ce foaie de stil se află codul, iar numărul de după două puncte vă spune pe ce linie veți găsi acel cod. De exemplu, imaginea de mai sus arată codul din „stil.fișier css ” pe linia 4054. Dacă editați direct foaia de stil a temei, acum o puteți deschide, accesați numărul liniei în cauză și schimbați CSS.
dacă lucrați în câmpul CSS suplimentar al personalizatorului de teme sau într-o temă copil, va trebui, de asemenea, să vizați același selector ca și CSS-ul original, astfel încât să îl puteți suprascrie cu propriul stil.
înapoi în instrumentele de dezvoltare a browserului, căutați selectorul care se află deasupra proprietății font-size pe care tocmai ați schimbat-o. Este în stânga fișei de stil și a specificației numărului de linie la care tocmai ne-am uitat.
Copiați întregul selector și lipiți-l în codul personalizat, apoi utilizați-l pentru a viza corect valoarea font-size modificată.
verificați întotdeauna opțiunile tematice coapte
înainte de a merge la probleme de personalizare CSS, verificați întotdeauna în tema Customizer pentru opțiuni dezvoltatorul poate fi deja coapte în tema.
temele au adesea opțiuni de personalizare destul de cuprinzătoare, care nu necesită cod personalizat. Deci, înainte de a edita orice CSS, vă puteți economisi mult timp văzând dacă există deja o modalitate de buton pentru a face schimbarea de care aveți nevoie.
cum să personalizați o temă WordPress pas cu pas
acum că am vorbit despre cum să personalizați CSS și HTML-ul unei teme WordPress, S-ar putea să vă simțiți puțin nesigur de unde să începeți. Deci, să fierbem lucrurile la o listă de bază a pașilor de urmat:
- verificați personalizatorul temei pentru a vedea dacă există deja o opțiune disponibilă care poate facilita modificarea pe care doriți să o faceți
- dacă nu și trebuie să adăugați câteva CSS personalizate simple, utilizați câmpul CSS suplimentar din personalizatorul temei
- dacă trebuie să faceți personalizări mai extinse la HTML sau CSS, luați în considerare efectuarea acestora într-o temă copil
- pentru a face mici modificări direct la tema, utilizați WordPress în editor temă construit
- pentru mai multe modificări în profunzime direct la o temă, utilizați fie FTP, o conexiune la distanță, sau de lucru complet offline cu XAMPP
- după ce ați selectat metoda de editare, identificați foaia de stil a temei inspectând codul
<head>al site-ului dvs. sau căutați în „funcțiile temei”.php ” pentru utilizarea funcțieiwp_enqueue_style() - localizați liniile specifice ale CSS pe care trebuie să le modificați și selectorii aferenți acestora, utilizând funcția inspectați a Chrome sau Firefox developer tools
când săpați în toate cele de mai sus și vă familiarizați, veți începe să vedeți cât de personalizabil este WordPress.
înainte să-ți dai seama, îți vei crea propriile teme pentru copii complet originale și vei crea modele proprii.
și se întâmplă că învățarea „cum să faci o temă pentru copii în WordPress” este următorul tutorial care apare în această serie. Stay tuned!