Heeft u ooit een webpagina tijdelijk willen bewerken om te zien hoe deze eruit zou zien met specifieke kleuren, lettertypen, stijl? Dit is mogelijk met een tool die al in uw browser bestaat met de naam " Inspecteer het element ". Dit is een droom die uitkomt voor alle gebruikers die CSS willen manipuleren.

In deze tutorial zullen we je door de basisprincipes van iteminspectie leiden en hoe je deze kunt gebruiken met je WordPress-site.

WordPress elementinspectie

Wat is een artikelinspectie-tool?

Moderne browsers zoals Google Chrome en Mozilla Firefox hebben hulpmiddelen gebouwd waarmee webontwikkelaars fouten kunnen opsporen. Deze tools geven de HTML, CSS en JavaScript voor een pagina weer en laten zien hoe de code wordt uitgevoerd.

Het gebruik van de tool " Inspecteer Element U kunt de HTML-, CSS- of JavaScript-code voor elke webpagina bewerken en uw wijzigingen live bekijken (alleen op uw computer).

Voor een eigenaar van een Site web, kunnen deze tools u helpen een voorbeeld te zien van hoe een bepaalde stijl eruit zal zien zonder de wijzigingen voor iedereen toe te passen.

Voor schrijvers zijn deze tools geweldig omdat je gemakkelijk persoonlijk identificeerbare informatie kunt wijzigen terwijl je je schermafbeeldingen maakt, waardoor je de elementen niet echt hoeft te vervagen.

Voor ondersteuningsmedewerkers is dit een uitstekende manier om de fout te identificeren die ertoe kan leiden dat uw galerijen niet worden geladen of waardoor ze niet correct werken.

We krabben alleen maar aan de oppervlakte van use cases, omdat de tool " Inspecteer het element Is echt krachtig.

In dit artikel zullen we ons concentreren op de tool ' Inspecteer het element Van Google Chrome, omdat dit onze favoriete browser is. Firefox heeft zijn eigen ontwikkeltools die ook kunnen worden opgeroepen door het menu " inspecteer element .

Lancering van de tool "Inspect the element" en de lokalisatie van de code

U kunt dit gereedschap starten door op de knop te drukken CTRL + SHIFT + I op je toetsenbord. U kunt ook ergens op een webpagina klikken en vervolgens Het browsermenu-item inspecteren selecteren.

inpection van blogpascher code

Uw browservenster splitst zich in tweeën en het onderste venster toont de broncode van de webpagina.

Het venster van de ontwikkelaarstool is verder onderverdeeld in twee vensters. Aan uw linkerhand ziet u de HTML-code voor de pagina. In het rechterdeelvenster ziet u de CSS-regels.

HTML-CSS-code inspectie

Terwijl u met uw muis over de bron van de HTML-code beweegt, ziet u het gemarkeerde gebied op de webpagina gemarkeerd. U zult ook de CSS-regels voor dit element in kwestie opmerken.

CSS-regels van het HTML-element

U kunt ook met de muisaanwijzer over een item op de webpagina gaan, met de rechtermuisknop klikken en ' inspecteer het element ". Het item waarop u hebt geklikt, wordt gemarkeerd in de broncode.

Code Developer en Developer Debugger

HTML en CSS in het elementinspectievenster kunnen worden bewerkt. U kunt dubbelklikken in de HTML-broncode en de code bewerken zoals u wilt.

HTML broncode bewerking

U kunt ook dubbelklikken en de attributen van de stijlen in het CSS-paneel bewerken. Om een ​​regel toe te voegen, klikt u op het pluspictogram in het stijlvenster bovenaan.

voeg een nieuwe regel css toe

Wanneer u wijzigingen aanbrengt in de CSS of HTML-code, worden deze wijzigingen onmiddellijk doorgevoerd in uw browser.

Live code wijziging

Merk op dat niet alle hier gemaakte wijzigingen overal worden opgeslagen. De tool Inspecteer het element Is een foutopsporingsprogramma en slaat uw wijzigingen niet op in een bestand op uw server. Dit betekent dat als u de pagina vernieuwt, al uw wijzigingen verloren gaan.

Om de wijzigingen daadwerkelijk aan te brengen, moet u de stijl van uw WordPress theme of een sjabloon om de wijzigingen toe te voegen die u wilt opslaan.

Voordat u begint met het bewerken van uw WordPress theme bestaande met behulp van de tool " Inspecteer het element Zorg ervoor dat u al uw wijzigingen opslaat door een kindthema te maken.

Hoe kunt u WordPress fouten gemakkelijk vinden

De tool Inspecteer het element Heeft een gebied met de naam ' troosten Die alle fouten op uw site toont. Voordat u een fout probeert te debuggen of om hulp van de auteurs van een thema of plug-in vraagt, is het altijd de moeite waard om hier te kijken wat er mis is.

javascript console

Bijvoorbeeld als u klant was OptinMonster Wie vraagt ​​zich af waarom zijn optin niet wordt geladen, dan kunt u gemakkelijk het probleem vinden dat aangeeft dat de ' slak van uw pagina komt niet overeen .

Als uw deelbalk niet correct functioneerde, kunt u zien dat er een JavaScript-fout is die dit veroorzaakt.

Dat is alles voor deze tutorial, ik hoop dat je je . beter kunt aanpassen WordPress blog. Voel je vrij om deze tutorial met je vrienden te delen.