Cum să utilizați Editorul de aspect în WordPress

wordpress-aspect-editor.png


Până acum, ați avut șansa de a personaliza CMS WordPress prin diverși editori ușor de utilizat. Personalizatorul v-a permis să pedepsiți prin diferite opțiuni de aspect pe care a acceptat-o ​​tema dvs. Dar când decideți să vă personalizați site-ul dincolo de opțiunile date, ar trebui să știți despre Editorul de aparențe WordPress.

Printre multe fișiere din WordPress care pot fi modificate, există două dintre cele mai interesante. Vorbim despre șablonul temelor și fișierele de stiluri pe care le puteți edita direct de pe WordPress.

Înainte de a începe chiar să luați în considerare schimbarea codului de unul singur, ar trebui să vă avertizăm că WordPress nu creează copii de rezervă din fișierele afectate. Deci, orice schimbare este permanentă.

Cum să editați teme cu Editorul de aspect

Când sunteți gata să aflați mai multe despre WordPress și să vă murdăriți mâinile tastând un cod personalizat, navigați la Aspect -> Editor. Acest editor încorporat vă permite să modificați codul păstrat în fișierele șablon și foile de stil ale temei. După ce îl deschizi, fișierul style.css pe care îl folosește tema curentă va fi afișat automat în fața ta.

Editorul aspectului WordPress

În funcție de configurarea site-ului dvs., este posibil să nu puteți accesa anumite fișiere. Dacă da, WordPress va afișa un mesaj de avertizare pentru a vă spune că trebuie să schimbați permisiunile de fișiere pentru acel fișier special. Pentru a afla mai multe, consultați cum să schimbați permisiunile de fișiere în WordPress.

Cum să selectați fișierele pentru editare

De îndată ce deschideți Editorul, WordPress vă va arăta toate fișierele de șabloane și foi de stil disponibile ale temei active. Dacă doriți să editați o temă inactivă, mergeți în partea de sus a listei, alegeți un element din meniul derulant și faceți clic pe butonul „Selectați”. WordPress va încărca apoi toate fișierele asociate cu tema aleasă.

Template-uri

Pentru a selecta un fișier, parcurgeți lista din partea dreaptă a ferestrei. Fiecare are un nume și un nume de fișier afișate între paranteze. Pentru a edita oricare dintre fișiere, trebuie doar să faceți clic pe el iar codul va apărea în editorul din partea stângă.

Ai grija

Deși editarea fișierelor cu foi de stil este relativ sigură, editarea fișierelor PHP poate provoca erori care pot face ca site-ul dvs. să fie inutilizabil. Fiți foarte atenți dacă decideți să editați fișiere PHP din Editorul de aparențe.

Exemplu: Cum puteți schimba dimensiunea fontului prin intermediul Editorului de aspect

Pentru a vă arăta cum funcționează editorul, suntem pe cale să schimbăm dimensiunea fontului textului în postările din tema Douăzeci și șaptesprezece.

Înainte de a continua, am dori să vă deranjăm atenția pentru un moment scurt. În versiunea 4.7, WordPress a fost introdus o caracteristică nouă care vă permite să adăugați CSS personalizate mai repede. În loc să editați codul prin intermediul Editorului de aspect, vă sugerăm să deschideți Aspect -> Personalizare -> CSS suplimentar unde ajungeți să scrieți orice cod CSS personalizat dorit, fără a afecta direct fișa de stil.

Inspectați elementele

Inspectați elementele din Google Chrome

Dacă totuși doriți să editați fișa de stil direct prin Editorul de aspect, iată ce trebuie să faceți:

  1. Deschide orice postare de pe blogul tău
  2. Selectați textul unei postări
  3. Faceți clic dreapta pe selecție și alegeți „Inspectați” sau „Inspectați elementul” (în funcție de browserul pe care îl utilizați)
  4. În noua secțiune sau fereastră care s-a deschis, găsiți evidențiată

    element

Inspectați paragraful elementelor

Clasa trebuie să fie vizibilă și în fila „Stiluri”. Dacă faceți clic pe stil, browserul dvs. ar trebui să deschidă foaia de stil și să vă permită să editați CSS direct din browser. Puteți utiliza această funcție pentru a testa codul CSS personalizat înainte de a aplica efectiv modificări pe site-ul dvs. Întrucât am dorit să modificăm dimensiunea fontului textului în postări, este în interesul nostru următorul cod CSS:

p {
font-size: 50px;
}

Aplica schimbarile

După ce ați testat câteva dimensiuni de font din browser, nu uitați de cel care v-a plăcut cel mai bine. Apoi puteți continua la Editor și modifica fontul:

  1. Navigheaza catre Aspect -> Editor
  2. Dacă nu ați fost deja selectat, alegeți Fișă de stil (style.css) fișier din listă din partea dreaptă
  3. Găsiți clasa „p”
  4. Adăugați „font-size: 50px;” (întregul cod ar trebui să arate ca cel pe care l-am scris mai sus)
  5. Faceți clic pe butonul „Actualizare fișier”

Modifica dimensiunea fontului paragrafului

Noul stil este salvat și sunteți gata să reîncărcați site-ul. Deschideți orice postare pentru a vedea modificarea dimensiunii textului. Dacă nu puteți vedea diferența și sunteți sigur că ați ajustat corect codul, asigurați-vă că ștergeți memoria cache a browserului sau apăsați CTRL + F5 pentru a reîmprospăta pagina.

Aveți grijă când lucrați cu Editorul de aspecte

Editorul de aparențe este un instrument uimitor pentru a face schimbări rapide la fișierele de șabloane și foi de stil. Dar pentru a profita din plin, este important să fiți complet siguri de modificările pe care le faceți. Orice modificare a fișierelor PHP poate bloca site-ul dvs. până la remedierea acestora prin FTP. Deci, atunci când lucrați cu fișiere PHP, vă sugerăm să lucrați la un fișier local pe care îl puteți transfera prin FTP, păstrând în permanență backup original. Dacă faceți modificări la foile de stil, nu uitați de funcțiile CSS adiționale introduse în urmă cu câteva luni.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Liked Liked