Jeste li ikada poželjeli privremeno urediti web stranicu kako biste vidjeli kako će izgledati s određenim bojama, fontovima i stilom? To je moguće pomoću alata koji već postoji u vašem pregledniku pod nazivom " Pregledajte element ". Ovo je san koji dolazi za sve korisnike koji vole manipulirati CSS-om.
U ovom vodiču provest ćemo vas kroz osnove pregleda predmeta i kako ga koristiti na vašoj WordPress web lokaciji.
Šta je alat za pregled predmeta?
Moderni preglednici kao što su Google Chrome i Mozilla Firefox ugradili su alate koji omogućuju web programerima da otklone pogreške. Ovi alati prikazuju HTML, CSS i JavaScript za stranicu i prikazuju kako se kôd pokreće.
Upotreba alata " Inspect Element Možete urediti HTML, CSS ili JavaScript kôd za bilo koju web stranicu i uživo vidjeti svoje promjene (samo na računaru).
Za vlasnika a site Web, ovi alati vam mogu pomoći da pregledate kako će određeni stil izgledati bez da se promjene zapravo primjenjuju za sve.
Za pisce su ovi alati sjajni jer lako možete promijeniti podatke koji mogu identificirati dok pravite snimke zaslona uklanjajući potrebu za stvarno zamućivanjem elemenata.
Za agente za podršku, ovo je sjajan način da identificiraju grešku koja bi mogla uzrokovati da se vaše galerije ne učitavaju ili spriječiti da rade ispravno.
Samo grebemo površinu slučajeva upotrebe jer alat " Pregledajte element Zaista je moćan.
U ovom članku ćemo se fokusirati na alat " Pregledajte element Iz Google Chromea, jer je to naš odabrani preglednik. Firefox ima vlastite razvojne alate na koje se također može pozvati odabirom izbornika " pregledati element ".
Pokretanje alata "Pregledaj element" i lokalizacija koda
Ovu alatku možete pokrenuti pritiskom na tastere CTRL + Shift + I na vašoj tastaturi. Možete i kliknuti bilo gdje na web stranici, a zatim odabrati Pregled stavke izbornika pregledača.
Prozor vašeg preglednika podijelit će se na dva dijela, a na dnu će se prikazati izvorni kôd web stranice.
Prozor alata za programere dalje je podijeljen u dva prozora. S vaše lijeve strane vidjet ćete HTML kôd stranice. U desnom oknu vidjet ćete CSS pravila.
Dok pomičete miš preko izvora HTML koda, vidjet ćete označeno područje označeno na web stranici. Također ćete primijetiti CSS pravila za ovaj element u pitanju.
Također možete preći pokazivač miša preko stavke na web stranici, desnim klikom i odaberite " pregledati element ". Stavka koju ste kliknuli bit će istaknuta u izvornom kodu.
Programer koda i program za otklanjanje grešaka
HTML i CSS u prozoru za pregled elemenata mogu se uređivati. Možete dvostruko kliknuti u izvorni HTML kôd i urediti ga po želji.
Možete i dvokliknite i urediti atribute stilova u oknu CSS. Da biste dodali pravilo, kliknite ikonu plus na oknu sa stilom pri vrhu.
Kada unesete izmjene u CSS ili HTML kod, ove promjene će se odmah odraziti u vašem pretraživaču.
Imajte na umu da nisu sve ovdje napravljene promjene spremljene nigdje. Alat Pregledajte element Alat za uklanjanje pogrešaka i ne sprema vaše promjene u datoteku na vašem poslužitelju. To znači da ako osvježite stranicu, sve vaše promjene će biti izgubljene.
Da biste zaista izvršili promjene, morat ćete izmijeniti svoj stil WordPress tema ili šablon za dodavanje promjena koje želite sačuvati.
Prije nego počnete uređivati svoj WordPress tema postojeći koristeći alat " Pregledajte element Obavezno spremite sve promjene kreiranjem dječije teme.
Kako lako pronaći greške na WordPressu
Alat Pregledajte element Je li područje nazvano " konzola Što pokazuje sve greške koje postoje na vašoj web lokaciji. Prije nego što pokušate otkloniti pogrešku ili zatražiti pomoć od autora teme ili dodatka, ovdje je uvijek vrijedno pogledati kako biste vidjeli šta nije u redu.
Na primjer, ako ste bili mušterija OptinMonster Ko se pita zašto se njegov optin ne opterećuje, lako možete onda pronaći problem koji pokazuje da je " slag vaše stranice se ne poklapa ".
Ako traka za dijeljenje nije ispravno funkcionirala, možete vidjeti da postoji JavaScript greška koja je uzrokuje.
To je sve za ovaj vodič, nadam se da možete bolje prilagoditi svoj WordPress blog. Slobodno podijelite ovaj vodič sa svojim prijateljima.
