A keni dashur ndonjëherë të modifikoni përkohësisht një faqe në internet për të parë se si do të dukej me ngjyra specifike, gërma, stil? Kjo është e mundur me një mjet që ekziston tashmë në shfletuesin tuaj të quajtur " Inspektoni elementin ". Kjo është një ëndërr e realizuar për të gjithë përdoruesit që duan të manipulojnë CSS.

Në këtë manual, ne do t'ju përshkruajmë bazat e inspektimit të artikullit dhe si ta përdorni atë me faqen tuaj WordPress.

Inspektimi i elementeve të WordPress

Çfarë është një mjet i inspektimit të artikullit?

Shfletuesit modernë si Google Chrome dhe Mozilla Firefox kanë ndërtuar mjete që lejojnë zhvilluesit e uebit të gabojnë. Këto mjete shfaqin HTML, CSS dhe JavaScript për një faqe dhe tregojnë se si funksionon kodi.

Përdorimi i mjetit " Inspect Element Ju mund të redaktoni kodin HTML, CSS, ose JavaScript për çdo faqe në internet dhe të shihni ndryshimet tuaja live (vetëm në kompjuterin tuaj).

Për një pronar të një Site Web, këto mjete mund t'ju ndihmojnë të shikoni paraprakisht se si do të duket një stil i caktuar pa aplikuar në të vërtetë ndryshimet për të gjithë.

Për shkrimtarët, këto mjete janë të mrekullueshme, sepse ju lehtë mund të ndryshoni informacion personalisht të identifikueshëm ndërsa bëni fotografitë tuaja duke eleminuar nevojën për të zbehur elementët.

Për agjentët mbështetës, kjo është një mënyrë e shkëlqyeshme për të identifikuar gabimin që mund të shkaktojë që galeritë tuaja të mos ngarkohen ose t'i parandalojë ato të punojnë siç duhet.

Ne jemi vetëm duke gërvishtur sipërfaqen e rasteve të përdorimit, sepse mjeti " Inspektoni elementin Reallyshtë vërtet i fuqishëm.

Në këtë artikull, ne do të përqendrohemi në mjetin " Inspektoni elementin Nga Google Chrome, sepse është shfletuesi ynë i zgjedhur. Firefox ka mjetet e veta të zhvillimit të cilat gjithashtu mund të thirren duke zgjedhur menunë " element inspektimi '.

Lëshimi i mjetit "Kontrollo elementin" dhe lokalizimi i kodit

Ju mund të nisni këtë mjet duke shtypur tastet CTRL + Shift + I në tastierën tuaj. Përndryshe, mund të klikoni kudo në një faqe në internet dhe më pas zgjidhni Inspect the menu menu browser.

inspektimi i kodit codepascher

Dritarja juaj e shfletuesit do të ndahet në dysh dhe dritarja e poshtme do të tregojë kodin burimor të faqes në internet.

Dritarja e mjetit zhvillues ndahet më tej në dy dritare. Në të majtë, do të shihni kodin HTML për faqen. Në panelin e djathtë, do të shihni rregullat e CSS.

Inspektimi i kodit HTML-CSS

Ndërsa zhvendosni miun mbi burimin e kodit HTML, do të shihni zonën e theksuar në faqen e internetit. Do të vini re gjithashtu rregullat CSS për këtë element në fjalë.

Rregullat CSS të elementit HTML

Ju gjithashtu mund të merrni treguesin e miut mbi një artikull në faqen e internetit, klikoni me të djathtën dhe zgjidhni " inspektoni elementin ". Artikulli që klikuat do të theksohet në kodin burimor.

Zhvilluesi i Kodit dhe Debitori i Zhvilluesve

HTML dhe CSS në dritaren e inspektimit të elementeve janë të redaktueshme. Ju mund të klikoni dy herë në kodin burimor HTML dhe të ndryshoni kodin ashtu si ju pëlqen.

Modifikimi i kodit burimor HTML

Ju gjithashtu mund të klikoni dy herë dhe të ndryshoni atributet e stileve në panelin CSS. Për të shtuar një rregull, klikoni në ikonën plus në panelin e stilit në krye.

shtoni një rregull të ri css

Kur bëni ndryshime në kodin CSS ose HTML, këto ndryshime do të reflektohen menjëherë në shfletuesin tuaj.

ndryshoni kodin live

Vini re se jo të gjitha ndryshimet e bëra këtu ruhen kudo. Mjeti Inspektoni elementin Shtë një mjet për rregullimin e gabimeve dhe nuk kursen ndryshimet tuaja në një skedar në serverin tuaj. Kjo do të thotë që nëse rifreskoni faqen, të gjitha ndryshimet tuaja do të humbasin.

Për të bërë ndryshimet, do t'ju duhet të modifikoni stilin tuaj WordPress theme ose një shabllon për të shtuar ndryshimet që dëshironi të ruani.

Përpara se të filloni të redaktoni tuajin WordPress theme ekzistuese duke përdorur mjetin " Inspektoni elementin Sigurohuni që të ruani të gjitha ndryshimet tuaja duke krijuar një temë për fëmijë.

Si të gjeni lehtësisht gabime në WordPress

Mjeti Inspektoni elementin Ka një zonë të quajtur " Konsol E cila tregon të gjitha gabimet që ekzistojnë në faqen tuaj. Para se të provoni të korrigjoni një gabim ose të kërkoni ndihmë nga autorët e një teme ose shtese, gjithmonë ia vlen të shikoni këtu për të parë se çfarë nuk është në rregull.

javascript console

Për shembull, nëse do të ishit klient OptinMonster Kush pyes veten pse optina e tij nuk ngarkon, atëherë mund ta gjesh me lehtësi problemin që tregon se " slug e faqes tuaj nuk përputhet '.

Nëse shiriti juaj i ndarjes nuk po funksiononte siç duhet, atëherë mund të shihni se ekziston një gabim JavaScript që e shkakton atë.

Kjo është e gjitha për këtë tutorial, shpresoj se mund ta personalizoni më mirë tuajin blog WordPress. Mos ngurroni ta ndani këtë tutorial me miqtë tuaj.