Ați dorit vreodată să schimbați temporar o pagină web pentru a vedea cum ar arăta cu anumite culori, fonturi, stil? Acest lucru este posibil cu un instrument care există deja în browserul dvs. numit „ Inspectați elementul “. Acesta este un vis devenit realitate pentru toți utilizatorii cărora le place să manipuleze CSS.
În acest tutorial, vă vom prezenta elementele de bază ale inspecției articolelor și cum să îl utilizați cu site-ul dvs. WordPress.
Ce este un instrument de inspecție a articolelor?
Browser-urile moderne, cum ar fi Google Chrome și Mozilla Firefox, au construit instrumente care permit dezvoltatorilor web să depaneze erori. Aceste instrumente afișează HTML, CSS și JavaScript pentru o pagină și arată cum rulează codul.
Utilizarea instrumentului " Inspectați elementul Puteți edita codul HTML, CSS sau JavaScript pentru orice pagină web și puteți vedea modificările în direct (numai pe calculatorul dvs.).
Pentru un proprietar de a site-ul web, aceste instrumente vă pot ajuta să previzualizați cum va arăta un anumit stil fără a aplica efectiv modificările pentru toată lumea.
Pentru scriitori, aceste instrumente sunt minunate, deoarece puteți schimba cu ușurință informații de identificare personală în timp ce faceți capturi de ecran, eliminând necesitatea de a estompa elementele.
Pentru agenții de asistență, acesta este un mod excelent de a identifica eroarea care ar putea cauza galeriile dvs. să nu se încarce sau să le împiedice să funcționeze corect.
Zgâriem doar suprafața cazurilor de utilizare, deoarece instrumentul " Inspectați elementul Este cu adevărat puternic.
În acest articol, ne vom concentra asupra instrumentului " Inspectați elementul De la Google Chrome, pentru că este browserul nostru la alegere. Firefox are propriile instrumente de dezvoltare care pot fi invocate și selectând meniul " inspectați elementul ".
Lansarea instrumentului „Inspectează elementul” și localizarea codului
Puteți lansa acest instrument apăsând tastele CTRL + Shift + I pe tastatură. Alternativ, puteți să faceți clic oriunde pe o pagină web și apoi să selectați Verificați elementul din meniul browserului.
Fereastra browserului dvs. se va împărți în două, iar fereastra de jos va afișa codul sursă al paginii web.
Fereastra instrumentului pentru dezvoltatori este împărțită în continuare în două ferestre. În stânga dvs., veți vedea codul HTML pentru pagină. În panoul din dreapta, veți vedea regulile CSS.
Pe măsură ce treceți mouse-ul peste sursa codului HTML, veți vedea zona evidențiată evidențiată pe pagina web. Veți observa, de asemenea, regulile CSS pentru acest element în cauză.
Puteți, de asemenea, să luați indicatorul mouse-ului peste un element de pe pagina web, faceți clic dreapta și selectați " inspectați elementul ". Elementul pe care ați făcut clic va fi evidențiat în codul sursă.
Cod dezvoltator și Debugger pentru dezvoltatori
HTML și CSS din fereastra de inspecție a elementelor pot fi modificate. Puteți face dublu clic în codul sursă HTML și puteți edita codul după cum doriți.
Puteți, de asemenea, faceți dublu clic și editați atributele stilurilor din panoul CSS. Pentru a adăuga o regulă, faceți clic pe pictograma plus în panoul de stil din partea de sus.
Când efectuați modificări CSS sau cod HTML, aceste modificări vor fi reflectate instantaneu în browser.
Rețineți că nu toate modificările făcute aici nu sunt salvate nicăieri. Instrumentul Inspectați elementul Este un instrument de depanare și nu vă salvează modificările la un fișier de pe serverul dvs. Acest lucru înseamnă că, dacă actualizați pagina, toate modificările dvs. vor fi pierdute.
Pentru a face modificările, va trebui să modificați stilul dvs WordPress temă sau un șablon pentru a adăuga modificările pe care doriți să le salvați.
Înainte de a începe editarea dvs WordPress temă existent folosind instrumentul " Inspectați elementul Asigurați-vă că salvați toate modificările prin crearea unei teme pentru copii.
Cum de a găsi cu ușurință erori pe WordPress
Instrumentul Inspectați elementul Are o zonă numită " Consoleze Ceea ce arată toate erorile care există pe site-ul dvs. Înainte de a încerca să depanați o eroare sau să solicitați ajutor autorilor unei teme sau plugin-uri, merită întotdeauna să căutați aici pentru a vedea ce nu este în regulă.
De exemplu, dacă ai fi client OptinMonster Cine se întreabă de ce nu se încarcă optinul său, atunci puteți găsi cu ușurință problema care indică faptul că „ Pagina de pornire a paginii dvs. nu se potrivește ".
Dacă bara de partajare nu a funcționat corect, puteți vedea că există o eroare JavaScript care o provoacă.
Asta e tot pentru acest tutorial, sper că vă puteți personaliza mai bine WordPress blog. Simțiți-vă liber să împărtășiți acest tutorial cu prietenii dvs.
