Bazele elementului Inspect: Personalizarea WordPress pentru utilizatorii DIY

Mulți dintre noi suntem curioși să înțelegem designul unui site web fără riscul de a face modificări permanente. Instrumentul Inspect Element servește ca un instrument de neprețuit în acest scop, permițându-vă să faceți modificări temporare direct în browserul dvs.

Mulți dintre utilizatorii noștri începători ne-au spus că găsesc dificilă editarea HTML/CSS. Întotdeauna recomandăm acestor utilizatori să experimenteze cu instrumentul de Inspecție.

Este simplu și ușor de utilizat, iar rezultatele modificărilor dvs. pot fi văzute instantaneu. Îl folosim tot timpul pentru a previzualiza modificări, de la editări minore de text la transformări complete ale aspectului.

Acest ghid vă va ghida prin pașii pentru a utiliza eficient Elementul de Inspecție pe site-ul dvs. WordPress, ajutându-vă să aduceți acele idei de design la viață în siguranță și eficient.

Ce este instrumentul Inspect?

Ne-am bazat pe instrumentele de dezvoltare ale browserului de nenumărate ori pentru a depana și a experimenta cu modificări ale site-ului web. Browserele web moderne precum Google Chrome, Firefox, Safari și Microsoft Edge sunt echipate cu instrumente încorporate concepute pentru a ajuta dezvoltatorii web să depaneze erorile fără efort.

Aceste instrumente afișează codul HTML, CSS și JavaScript al unei pagini, arătând în același timp cum îl procesează browserul. Pentru noi, este ca și cum am folosi codurile noastre de trișare fără a afecta site-ul web real.

Puteți accesa aceste instrumente pentru dezvoltatori pe orice pagină, făcând clic dreapta și selectând „Inspect” din meniu. Este una dintre acțiunile noastre preferate atunci când testăm modificări de design sau depanăm o problemă.

Cu instrumentul Inspect, puteți edita temporar codul HTML, CSS sau JavaScript și puteți vedea modificările în direct pe ecran. L-am folosit pentru a previzualiza totul, de la mici ajustări de stil la idei complete de aspect. (Vă vom arăta cum mai târziu în acest articol.)

Partea cea mai bună? Aceste modificări nu afectează pagina web reală. Odată ce reîncărcați pagina sau închideți browserul, totul revine la normal. Acest lucru îl face un instrument sigur și fiabil pentru testarea ideilor.

Am considerat că este deosebit de util pentru proprietarii de site-uri web și dezvoltatorii DIY care au nevoie de o modalitate rapidă de a testa sau depana. Iată doar câteva cazuri de utilizare:

• Aplicați noi stiluri CSS și vedeți imediat cum arată pe site-ul dvs.
• Scriitorii tehnici pot edita HTML pentru capturi de ecran, pot ascunde informații sensibile sau pot personaliza textul vizibil.
• Dezvoltatorii îl folosesc adesea pentru a identifica erori comune WordPress, pentru a depana probleme JavaScript sau pentru a rezolva erori 404.

Și asta este doar o mică parte. Aceste instrumente sunt incredibil de versatile, făcându-le un favorit pentru oricine lucrează cu site-uri web.

În acest ghid, ne vom concentra pe instrumentul de inspecție din Google Chrome, deoarece este cel mai popular browser printre cititorii noștri. Cu toate acestea, Firefox, Safari și Microsoft Edge au instrumente similare care pot fi accesate prin opțiunile lor de inspecție.

Gata să începi? Folosește linkurile de mai jos pentru a sări la orice secțiune a articolului și a urmări:

• Lansarea instrumentului Inspect și localizarea codului
• Editarea și depanarea codului în Inspect Element
• Găsiți ușor erori pe site-ul dvs.
• Cum să folosiți instrumentul de inspectare pe mobil (iOS sau Android)?
• Cum să aplici modificările Inspect Element permanent în WordPress
• Bune practici la utilizarea elementului de inspecție
• Întrebări frecvente despre Inspect Element
• Tutorial video
• Aflați mai multe despre personalizarea WordPress

Lansarea instrumentului Inspect și localizarea codului

Puteți lansa instrumentul de inspecție apăsând CTRL + Shift + I (Command + Options + I pentru MacOS) pe tastatură.

De asemenea, puteți face clic oriunde pe o pagină web și selectați „Inspect” din meniul browserului.

Puteți accesa instrumentul și din meniul principal al browserului.

În Google Chrome, faceți clic pe meniul cu trei puncte din colțul din dreapta sus și apoi derulați în jos la Mai multe instrumente » Instrumente pentru dezvoltatori.

Fereastra browserului dvs. se va împărți în două.

Pe o parte, veți vedea pagina pe care o vizualizați. Pe cealaltă parte, veți vedea codul HTML și regulile CSS.

Poziția panoului Inspect variază, dar o puteți schimba făcând clic pe meniul cu trei puncte și selectând poziția „Dock side”. Puteți vedea pictograma pe care să faceți clic în imaginea de mai sus.

Mutarea mouse-ului peste sursa HTML va evidenția zona afectată pe pagina web.

Veți observa, de asemenea, că regulile CSS se modifică pe măsură ce faceți clic pe un element din codul HTML.

Puteți, de asemenea, să mutați indicatorul mouse-ului pe un element de pe pagina web, să faceți clic dreapta și să selectați instrumentul „Inspect”.

Elementul va fi evidențiat în codul sursă.

Editarea și depanarea codului în Inspect Element

Atât HTML-ul, cât și CSS-ul din fereastra Inspect Element sunt editabile. Puteți face dublu clic oriunde în codul sursă HTML și puteți edita codul după cum doriți.

Poți, de asemenea, să dublu-clici și să editezi orice atribute și stiluri în panoul CSS.

Pentru a adăuga o regulă de stil personalizată, faceți clic pe pictograma + din partea de sus a panoului CSS.

Pe măsură ce faceți modificări la CSS sau HTML, acele modificări vor fi reflectate instantaneu în browser.

Aceste modificări vor fi salvate în memoria temporară a browserului dvs. și nu vor afecta site-ul dvs. web.

Pentru a face modificările, va trebui să adăugați CSS personalizat la tema dvs. sau să editați șablonul relevant pentru a adăuga modificările pe care doriți să le salvați.

Înainte de a începe să editați tema WordPress existentă folosind instrumentul Inspect Element, asigurați-vă că creați o copie de rezervă WordPress.

Găsiți ușor erori pe site-ul dvs.

Instrumentul de inspecție are o zonă numită Consola, care afișează erorile apărute în timpul încărcării paginii.

Când încercați să depanați o eroare sau solicitați suport de la autorii de plugin-uri, este întotdeauna util să verificați aici pentru a vedea dacă există erori sau avertismente.

Folosind fila Consola, puteți depana mai multe probleme comune. De exemplu, acestea sunt doar câteva lucruri pe care le puteți face cu consola de inspecție:

• Aflați de ce o imagine pe care ați adăugat-o nu este afișată
• De ce un plugin sau o temă nu se comportă corespunzător
• Ce plugin sau extensie de browser ar putea cauza conflictul

Chiar și utilizatorii non-tehnici îl pot privi pentru a găsi indicii despre sursa unei probleme.

De exemplu, dacă sunteți un client OptinMonster și vă întrebați de ce optin-ul dvs. nu se încarcă, atunci puteți găsi cu ușurință problema „Slug-ul paginii dvs. nu se potrivește.”

Utilizarea unor instrumente precum consola Inspect Element vă poate ajuta să colectați detalii tehnice utile atunci când ceva nu funcționează corect pe site-ul dvs. Partajarea acestor informații – cum ar fi mesajele de eroare sau resursele lipsă – poate facilita echipele de suport pentru plugin-uri sau teme să înțeleagă și să rezolve problema mai rapid.

Cum să folosiți instrumentul de inspectare pe mobil (iOS sau Android)?

Opțiunile pentru dezvoltatori nu sunt activate implicit în browserele mobile, deoarece producătorii presupun că majoritatea utilizatorilor mobili nu le-ar folosi.

Cea mai ușoară modalitate de a depana și de a utiliza instrumentul de inspectare pentru problemele mobile este să utilizați funcția de emulare mobilă din browserul dvs. desktop.

Puteți apoi alege un dispozitiv din partea de sus sau dimensiunile ecranului. Chrome va emula apoi acea dimensiune a ecranului pentru dvs.

Cum să aplici modificările Inspect Element permanent în WordPress

Când lucrați cu Inspect Element, s-ar putea să vă întrebați cum puteți face ca modificările pe care le-ați testat să devină permanente. În această secțiune, vom explica cum să faceți acest lucru pe site-ul dvs. WordPress.

Mai întâi, identificați modificările pe care doriți să le păstrați și copiați-le într-un fișier text folosind o aplicație precum Notepad sau TextEdit. Apoi, puteți încerca una dintre metodele de mai jos.

1. Adăugați modificări CSS pe site-ul dvs. WordPress folosind Editorul de site

Odată copiat, accesați tabloul de bord WordPress și mergeți la Aspect » Editor pentru a lansa editorul de site.

Faceți clic pe fereastra de previzualizare pentru a începe editarea site-ului dvs.

În interiorul editorului, faceți clic pe butonul Stil din partea de sus, apoi faceți clic pe meniul cu trei puncte și selectați „CSS suplimentar”.

Aceasta deschide panoul CSS suplimentar, unde puteți pur și simplu să lipiți CSS-ul pe care doriți să îl salvați.

Este posibil să vedeți modificările aplicate instantaneu în fereastra de previzualizare. Nu uitați să faceți clic pe „Salvare” pentru a publica modificările.

2. Adăugați CSS personalizat pe site-ul dvs. folosind WPCode

Dacă aveți nevoie de o modalitate mai ușoară de a adăuga CSS personalizat pe site-ul dvs., atunci această metodă este pentru dvs.

Pentru această metodă, vom folosi WPCode. Este cel mai bun manager de fragmente de cod WordPress și vă permite să adăugați cod personalizat, HTML și CSS pe site-ul dvs. fără a edita tema.

Notă: Există și o versiune gratuită a WPCode pe care o puteți utiliza. Cu toate acestea, recomandăm actualizarea la un plan plătit pentru a-i debloca întregul potențial.

Folosim WPCode pe propriile noastre site-uri, deoarece facilitează gestionarea codului. Mai important, are o protecție încorporată care dezactivează codul dvs. dacă returnează o eroare. Pentru detalii, consultați recenzia noastră completă despre WPCode.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Dacă aveți nevoie de ajutor, consultați tutorialul nostru despre cum să instalați un plugin WordPress pentru instrucțiuni.

După activare, pur și simplu accesați Fragmente de cod » + Adăugați nou din tabloul de bord de administrare WordPress.

Apoi, puteți trece cu mouse-ul peste opțiunea „Adăugați codul dvs. personalizat (Snippet nou)” din biblioteca de fragmente de cod și faceți clic pe „+ Adăugați un fragment personalizat”.

După aceea, trebuie să selectați „Fragment CSS” ca tip de cod din lista de opțiuni care apar pe ecran.

În continuare, în partea de sus a paginii, puteți adăuga un titlu pentru fragmentul dvs. CSS personalizat. Acesta poate fi orice vă ajută să identificați codul.

După ce ați introdus un titlu, puteți scrie sau lipi CSS-ul personalizat în caseta „Previzualizare cod”.

După ce ați adăugat codul CSS personalizat, faceți clic pe butonul „Salvare fragment” și apoi pe comutatorul de stare la „Activ”.

3. Adăugați un fragment HTML pe site-ul dvs. WordPress

Pentru a adăuga modificări HTML pe site-ul dvs., trebuie să le lipiți în fișierul de șablon corect din tema dvs.

Pentru a afla ce fișier de temă să editați, consultați ghidul nostru despre cum să găsești fișierele de editat în tema WordPress.

Va trebui să folosiți un client FTP sau aplicația de gestionare a fișierelor din contul dvs. de hosting pentru a edita fișierele temei.

Alternativ, puteți folosi și WPCode pentru a adăuga fragmente HTML personalizate. Pur și simplu adăugați un nou fragment de cod și selectați HTML ca tip de fragment.

După aceea, oferiți un titlu pentru fragmentul dvs. HTML care vă ajută să îl identificați.

Sub aceasta, adaugă codul HTML personalizat în caseta de previzualizare.

WPCode vă permite să alegeți unde doriți să inserați orice fragment de cod.

Derulați în jos la zona „Inserare” și faceți clic pe „Locație” pentru a vizualiza opțiunile disponibile.

După selectarea unei locații, nu uitați să faceți clic pe „Salvare” și să comutați starea fragmentului la Activ.

Puteți vizita acum site-ul dvs. pentru a-l vedea în acțiune.

Bune practici la utilizarea elementului de inspecție

Utilizarea instrumentului de inspecție poate părea ca deschiderea unei ferestre secrete în designul web. Dar pentru a profita la maximum de el, iată câteva bune practici, utile în special dacă abia începeți:

• Începeți explorând în siguranță: Orice modificări faceți în Inspect Element sunt temporare. Așa că nu ezitați să experimentați fără teamă – nimic nu se strică permanent.
• Încercați diferite stiluri și aspecte: Testați culorile, fonturile, spațierea sau poziționarea pentru a vedea ce arată bine înainte de a aplica modificări temei sau foii de stil actuale.
• Păstrați notițe despre ce funcționează: Dacă vă place o modificare, copiați CSS-ul și lipiți-l într-un fișier text sau într-o aplicație de notițe, astfel încât să nu-l pierdeți.
• Testați pe browsere: O ajustare de design care arată grozav în Chrome s-ar putea să arate ciudat în Firefox sau Safari, așa că verificați întotdeauna de două ori.
• Păstrați organizarea: Păstrați o evidență a tuturor modificărilor pe care le-ați făcut și de ce. Acest lucru ajută dacă vreodată va trebui să anulați ceva sau să depanați probleme mai târziu.
• Nu editați site-uri live la întâmplare: Dacă învățați, este mai bine să exersați pe un site de staging sau într-un mediu de testare pentru a evita probleme accidentale pe site-ul dvs. live.

Întrebări frecvente despre Inspect Element

Următoarele sunt câteva dintre cele mai frecvente întrebări adresate de utilizatorii noștri despre utilizarea instrumentului Inspect.

1. Pot folosi instrumentul Inspect pe orice site web sau doar pe al meu?

Da, puteți folosi instrumentul de inspectare pe orice site web. Pur și simplu faceți clic dreapta și selectați instrumentul Inspectați din meniul browserului pentru a vedea codul din spatele oricărui site web. Studierea codului de pe alte site-uri web este o modalitate rapidă de a învăța și de a vă îmbunătăți propriile abilități CSS/HTML.

2. De ce nu găsesc instrumentul Inspect în browserul meu?

Google Chrome poate ascunde opțiunea Inspect din meniul clic-dreapta, în special atunci când mai multe extensii adaugă propriile opțiuni la meniul clic-dreapta.

În plus, funcția de clic dreapta poate fi dezactivată folosind JavaScript, ceea ce poate ascunde opțiunea „Inspect”. În astfel de cazuri, puteți deschide în continuare Instrumentele pentru dezvoltatori folosind scurtătura de la tastatură Ctrl + Shift + I (sau Cmd + Option + I pe Mac) sau navigând la Meniu » Mai multe instrumente » Instrumente pentru dezvoltatori.

3. Pot vedea modificările în diferite browsere?

Da, Inspect Element este disponibil în browserele majore, permițându-vă să testați și să observați modificări în Chrome, Firefox, Safari și Edge.

4. Cum poate Inspect Element ajuta la depanarea JavaScript?

Inspect Element include o filă Console unde puteți vedea erori și avertismente JavaScript. Acest instrument este incredibil de util atunci când trebuie să înțelegeți ce nu funcționează corect cu scripturile de pe site-ul dvs. Este ca și cum ați avea o linie directă către procesul de gândire al browserului, permițându-vă să identificați rapid problemele.

5. Poate Inspect Element să afecteze securitatea site-ului meu?

Nu, utilizarea Inspect Element nu va afecta securitatea site-ului dvs. Este un instrument de browser care modifică temporar modul în care site-ul apare sau se comportă pe mașina dvs. locală, fără a altera datele backend sau integritatea acestora.

Tutorial video

Abonează-te la WPBeginner

Aflați mai multe despre personalizarea WordPress

Dacă doriți să explorați mai departe cum puteți utiliza instrumentul Inspect pentru a face mai multe lucruri pe site-ul dvs. WordPress, următoarele resurse vor fi un bun punct de plecare:

• Cum să vă personalizați tema WordPress – Acest ghid pentru începători arată cum să vă personalizați tema WordPress pas cu pas.
• Cum să adăugați corect CSS personalizat în WordPress – Acest tutorial arată multiple moduri de a adăuga cu ușurință CSS personalizat în WordPress.
• Cum să optimizați livrarea CSS în WordPress – Prea multe fișiere CSS individuale pot degrada performanța. Acest tutorial arată cum să optimizați livrarea CSS pentru a crește viteza WordPress.
• Fișă de referință CSS generată implicit de WordPress – Acest ghid util vă va arăta multe clase CSS pe care WordPress le adaugă implicit diferitelor elemente. Puteți apoi să utilizați acele clase CSS în codul CSS personalizat pentru a schimba aspectul acelor elemente.

Sperăm că acest articol v-a ajutat să învățați elementele de bază ale funcției Inspect Element și cum să o utilizați cu site-ul dvs. WordPress. De asemenea, ați putea dori să consultați foaia noastră de referință CSS generată implicit de WordPress pentru începători pentru a vă accelera abilitățile de dezvoltare a temelor sau trusa noastră de instrumente WordPress supremă pentru profesioniști.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.