Grunderna i Inspektera element: Anpassa WordPress för gör-det-självare-användare

Många av oss är nyfikna på att förstå en webbplats design utan risk att göra permanenta ändringar. Inspektera element fungerar som ett ovärderligt verktyg för detta ändamål, vilket gör att du kan göra tillfälliga ändringar direkt i din webbläsare.

Många av våra användare på nybörjarnivå berättade för oss att de tycker att det är svårt att redigera HTML/CSS. Vi rekommenderar alltid att dessa användare experimenterar med Inspektera-verktyget.

Det är enkelt och lätt att använda, och du kan se resultaten av dina justeringar omedelbart. Vi använder det hela tiden för att förhandsgranska ändringar som sträcker sig från mindre textredigeringar till fullständiga ombyggnader av layouten.

Den här guiden guidar dig genom stegen för att effektivt använda Inspektera element på din WordPress-webbplats, vilket hjälper dig att förverkliga dina designidéer säkert och effektivt.

Vad är Inspektera-verktyget?

Vi har förlitat oss på webbläsarens utvecklarverktyg otaliga gånger för att felsöka och experimentera med webbplatsändringar. Moderna webbläsare som Google Chrome, Firefox, Safari och Microsoft Edge är utrustade med inbyggda verktyg som är utformade för att hjälpa webbutvecklare att enkelt felsöka fel.

Dessa verktyg visar en sidans HTML-, CSS- och JavaScript-kod samtidigt som de visar hur webbläsaren bearbetar den. För oss är det som att använda våra fusk-koder utan att påverka den faktiska webbplatsen.

Du kan komma åt dessa utvecklarverktyg på vilken sida som helst genom att högerklicka och välja 'Inspektera' från menyn. Det är en av våra favoritåtgärder när vi testar designjusteringar eller felsöker ett problem.

Med Inspektera-verktyget kan du tillfälligt redigera HTML, CSS eller JavaScript-kod och se ändringarna live på din skärm. Vi har använt det för att förhandsgranska allt från mindre stiljusteringar till kompletta layoutidéer. (Vi visar dig hur senare i den här artikeln.)

Det bästa? Dessa ändringar påverkar inte den faktiska webbsidan. När du laddar om sidan eller stänger webbläsaren återgår allt till det normala. Detta gör det till ett säkert och pålitligt verktyg för att testa idéer.

Vi har funnit det särskilt hjälpsamt för DIY-webbplatsägare och utvecklare som behöver ett snabbt sätt att testa eller felsöka. Här är bara några användningsfall:

• Applicera nya CSS-stilar och se omedelbart hur de ser ut på din webbplats.
• Tekniska skribenter kan redigera HTML för skärmdumpar, dölja känslig information eller anpassa synlig text.
• Utvecklare använder det ofta för att identifiera vanliga WordPress-fel, felsöka JavaScript-problem eller lösa 404-fel.

Och det är bara toppen av isberget. Dessa verktyg är otroligt mångsidiga, vilket gör dem till en favorit för alla som arbetar med webbplatser.

I den här guiden fokuserar vi på Inspektera-verktyget i Google Chrome, eftersom det är den mest populära webbläsaren bland våra läsare. Firefox, Safari och Microsoft Edge har dock liknande verktyg som kan nås via deras Inspektera-alternativ.

Redo att börja? Använd länkarna nedan för att hoppa till valfri sektion i artikeln och följa med:

• Starta verktyget Inspektera och lokalisera koden
• Redigera och felsöka kod i Inspektera element
• Hitta enkelt fel på din webbplats
• Hur använder man inspektionsverktyget på mobilen (iOS eller Android)?
• Hur man tillämpar inspektionselementsändringar permanent i WordPress
• Bästa praxis vid användning av Inspektera element
• Vanliga frågor om inspektion av element
• Videohandledning
• Lär dig mer om WordPress-anpassning

Starta verktyget Inspektera och lokalisera koden

Du kan starta inspektionsverktyget genom att trycka på CTRL + Shift + I (Command + Options + I för MacOS) på ditt tangentbord.

Du kan också klicka var som helst på en webbsida och välja 'Inspektera' från webbläsarmenyn.

Du kan också komma åt verktyget från webbläsarens huvudmeny.

I Google Chrome, klicka på menyn med tre punkter längst upp till höger och rulla sedan ner till Fler verktyg » Utvecklarverktyg.

Ditt webbläsarfönster delas i två.

På ena sidan ser du sidan du tittade på. På andra sidan ser du HTML-koden och CSS-reglerna.

Positionen för Inspektera-dockan varierar, men du kan ändra den genom att klicka på menyn med tre punkter och välja positionen 'Docka sida'. Du kan se ikonen att klicka på i bilden ovan.

Att föra musen över HTML-källan kommer att markera det berörda området på webbsidan.

Du kommer också att märka att CSS-regler ändras när du klickar på ett element inuti HTML-koden.

Du kan också föra muspekaren över ett element på webbsidan, högerklicka och välja verktyget 'Inspektera'.

Elementet kommer att markeras i källkoden.

Redigera och felsöka kod i Inspektera element

Både HTML och CSS i Inspektera element-fönstret är redigerbara. Du kan dubbelklicka var som helst i HTML-källkoden och redigera koden som du vill.

Du kan också dubbelklicka och redigera attribut och stilar i CSS-panelen.

För att lägga till en anpassad stilregel, klicka bara på + ikonen högst upp i CSS-rutan.

När du gör ändringar i CSS eller HTML kommer dessa ändringar att återspeglas i webbläsaren omedelbart.

Dessa ändringar sparas i webbläsarens temporära minne och påverkar inte din webbplats.

För att göra ändringarna måste du lägga till anpassad CSS till ditt tema eller redigera relevant mall för att lägga till de ändringar du vill spara.

Innan du börjar redigera ditt befintliga WordPress-tema med verktyget Inspektera element, se till att du skapar en WordPress-säkerhetskopia.

Hitta enkelt fel på din webbplats

Verktyget Inspektera har ett område som kallas Konsol, som visar fel som inträffade under sidladdningen.

När du försöker felsöka ett fel eller begära support från plugin-författare, är det alltid bra att titta här för att se om det finns några fel eller varningar.

Med fliken Konsol kan du felsöka flera vanliga problem. Till exempel är detta bara några av de saker du kan göra med Inspect-konsolen:

• Ta reda på varför en bild du lade till inte visas
• Varför ett plugin eller tema inte beter sig korrekt
• Vilket plugin eller webbläsartillägg kan orsaka konflikten

Även icke-tekniska användare kan titta på det för att hitta ledtrådar om var ett problem kommer ifrån.

Om du till exempel är en OptinMonster-kund och undrar varför din optin inte laddas, kan du enkelt hitta problemet "Din sid-slug matchar inte."

Genom att använda verktyg som konsolen för att inspektera element kan du samla användbar teknisk information när något inte fungerar som det ska på din webbplats. Att dela denna information – som felmeddelanden eller saknade resurser – kan göra det lättare för supportteam för plugins eller teman att förstå och lösa problemet snabbare.

Hur använder man inspektionsverktyget på mobilen (iOS eller Android)?

Utvecklaralternativ är inte aktiverade som standard i mobilwebbläsare, eftersom tillverkare antar att de flesta mobilanvändare inte skulle använda dem.

Det enklaste sättet att felsöka och använda inspektera-verktyget för mobilproblem är att använda mobil-emuleringsfunktionen i din stationära webbläsare.

Du kan sedan välja en enhet högst upp eller skärmdimensioner. Chrome kommer då att emulera den skärmstorleken åt dig.

Hur man tillämpar inspektionselementsändringar permanent i WordPress

När du arbetar med Inspektera element kan du undra hur du kan göra de ändringar du har testat permanenta. I det här avsnittet förklarar vi hur du gör detta på din WordPress-webbplats.

Identifiera först de ändringar du vill behålla och kopiera dem till en textfil med hjälp av en app som Anteckningar eller TextEdit. Sedan kan du prova en av metoderna nedan.

1. Lägg till CSS-ändringar på din WordPress-webbplats med hjälp av webbplatsredigeraren

När du har kopierat, gå till din WordPress-instrumentpanel och navigera till Utseende » Redigerare för att starta webbplatsredigeraren.

Klicka på förhandsgranskningsfönstret för att börja redigera din webbplats.

Klicka i redigeraren på knappen Stil högst upp och klicka sedan på menyn med tre punkter och välj "Ytterligare CSS".

Detta öppnar panelen Ytterligare CSS, där du helt enkelt kan klistra in CSS du vill spara.

Du kan se dina ändringar tillämpas omedelbart i förhandsgranskningsfönstret. Glöm inte att klicka på 'Spara' för att publicera dina ändringar.

2. Lägg till anpassad CSS på din webbplats med WPCode

Om du behöver ett enklare sätt att lägga till anpassad CSS på din webbplats, då är den här metoden för dig.

För den här metoden använder vi WPCode. Det är den bästa hanteraren för WordPress-kodsnuttar och låter dig lägga till anpassad kod, HTML och CSS på din webbplats utan att redigera ditt tema.

Obs: Det finns också en gratis version av WPCode som du kan använda. Vi rekommenderar dock att uppgradera till en betald plan för att låsa upp dess fulla potential.

Vi använder WPCode på våra egna webbplatser eftersom det gör det enklare att hantera kod. Ännu viktigare är att det har en inbyggd säkerhetsfunktion som inaktiverar din kod om den returnerar ett fel. För detaljer, se vår fullständiga WPCode-recension.

Först måste du installera och aktivera pluginet WPCode. Om du behöver hjälp, se vår handledning om hur man installerar ett WordPress-plugin för instruktioner.

Efter aktivering, gå helt enkelt till Kodavsnitt » + Lägg till nytt från WordPress admin-instrumentpanelen.

Sedan kan du sväva över alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)' i biblioteket med kodavsnitt och klicka på '+ Lägg till anpassat kodavsnitt'.

Därefter behöver du välja 'CSS-utdrag' som kodtyp från listan med alternativ som visas på skärmen.

Därefter, högst upp på sidan, kan du lägga till en titel för ditt anpassade CSS-avsnitt. Detta kan vara vad som helst som hjälper dig att identifiera koden.

När du har angett en titel kan du skriva ner eller klistra in din anpassade CSS i rutan ‘Kodförhandsgranskning’.

Efter att ha lagt till din anpassade CSS-kod, klicka på knappen ‘Spara kodsnutt’ och växla statusen till ‘Aktiv’.

3. Lägg till HTML-kodavsnitt på din WordPress-webbplats

För att lägga till HTML-ändringar på din webbplats måste du klistra in dem i rätt mallfil i ditt tema.

För att ta reda på vilken temafil du ska redigera, se vår guide om hur du hittar vilka filer du ska redigera i WordPress-tema.

Du behöver använda en FTP-klient eller filhanteraren under ditt hostingkonto för att redigera dina temafiler.

Alternativt kan du också använda WPCode för att lägga till anpassade HTML-snuttar. Lägg helt enkelt till en ny kodsnutt och välj HTML som din snutt-typ.

Därefter, ange en titel för din HTML-kodsnutt som hjälper dig att identifiera den.

Nedanför det, lägg till din anpassade HTML-kod i förhandsgranskningsrutan.

WPCode låter dig välja var du vill infoga ett kodavsnitt.

Bläddra ner till området 'Infogning' och klicka på 'Plats' för att se tillgängliga alternativ.

Efter att ha valt en plats, glöm inte att klicka på ‘Spara’ och växla kodsnuttens status till Aktiv.

Du kan nu besöka din webbplats för att se den i aktion.

Bästa praxis vid användning av Inspektera element

Att använda inspektionsverktyget kan kännas som att öppna ett hemligt fönster in i webbdesign. Men för att få ut mesta möjliga av det, här är några bästa metoder, särskilt användbara om du precis har börjat:

• Börja med att utforska säkert: Alla ändringar du gör i Inspektera element är tillfälliga. Så experimentera fritt utan rädsla – inget går sönder permanent.
• Prova olika stilar och layouter: Testa färger, typsnitt, avstånd eller placering för att se vad som ser bra ut innan du tillämpar ändringar på ditt faktiska tema eller din stilmall.
• Anteckna vad som fungerar: Om du gillar en ändring, kopiera CSS:en och klistra in den i en textfil eller anteckningsapp så att du inte tappar bort den.
• Testa i olika webbläsare: En designjustering som ser bra ut i Chrome kanske ser konstig ut i Firefox eller Safari, så dubbelkolla alltid.
• Håll ordning: Föra en logg över alla ändringar du har gjort och varför. Detta hjälper om du någonsin behöver ångra något eller felsöka problem senare.
• Redigera inte live-webbplatser hur som helst: Om du lär dig är det bättre att öva på en staging-webbplats eller en testmiljö för att undvika oavsiktliga problem på din live-webbplats.

Vanliga frågor om inspektion av element

Följande är några av de vanligaste frågorna som våra användare ställer om användningen av verktyget för att inspektera element.

1. Kan jag använda Inspektera-verktyget på vilken webbplats som helst eller bara min egen?

Ja, du kan använda inspektionsverktyget på vilken webbplats som helst. Högerklicka helt enkelt och välj verktyget Inspektera från webbläsarens meny för att se koden bakom vilken webbplats som helst. Att studera koden på andra webbplatser är ett snabbt sätt att lära sig och förbättra dina egna CSS/HTML-färdigheter.

2. Varför kan jag inte hitta Inspektera-verktyget i min webbläsare?

Google Chrome kan dölja Inspektera-alternativet i högerklicksmenyn, särskilt när flera tillägg lägger till sina egna alternativ i högerklicksmenyn.

Dessutom kan högerklicksfunktionen vara inaktiverad med JavaScript, vilket kan dölja alternativet 'Inspektera'. I sådana fall kan du fortfarande öppna Utvecklarverktyg genom att använda kortkommandot Ctrl + Shift + I (eller Cmd + Option + I på Mac) eller genom att navigera till Meny » Fler verktyg » Utvecklarverktyg.

3. Kan jag se ändringar i olika webbläsare?

Ja, Inspektera element är tillgängligt i de flesta webbläsare, vilket gör att du kan testa och observera ändringar i Chrome, Firefox, Safari och Edge.

4. Hur kan Inspect Element hjälpa till med JavaScript-felsökning?

Inspektera element inkluderar en Konsol-flik där du kan se JavaScript-fel och varningar. Detta verktyg är otroligt användbart när du behöver förstå vad som går fel med skript på din webbplats. Det är som att ha en direktlinje till webbläsarens tankeprocess, vilket gör att du snabbt kan identifiera problem.

5. Kan Inspektera element påverka min webbplats säkerhet?

Nej, att använda Inspektera element påverkar inte din webbplats säkerhet. Det är ett webbläsarverktyg som tillfälligt ändrar hur webbplatsen visas eller beter sig på din lokala maskin utan att ändra backend-data eller dess integritet.

Videohandledning

Prenumerera på WPBeginner

Lär dig mer om WordPress-anpassning

Om du vill utforska mer hur du kan använda Inspektera-verktyget för att göra fler saker på din WordPress-webbplats, kommer följande resurser att vara en bra utgångspunkt:

• Hur du anpassar ditt WordPress-tema – Den här nybörjarguiden visar hur du anpassar ditt WordPress-tema steg för steg.
• Hur man lägger till anpassad CSS i WordPress på rätt sätt – Den här handledningen visar flera sätt att enkelt lägga till din anpassade CSS i WordPress.
• Hur man optimerar CSS-leverans i WordPress – För många enskilda CSS-filer kan försämra prestandan. Den här handledningen visar hur man optimerar CSS-leverans för att öka WordPress-hastigheten.
• Standard CSS-referensblad genererat av WordPress – Den här praktiska guiden visar dig många CSS-klasser som WordPress lägger till olika element som standard. Du kan sedan använda dessa CSS-klasser i din anpassade CSS-kod för att ändra utseendet på dessa element.

Vi hoppas att den här artikeln hjälpte dig att lära dig grunderna i Inspektera element och hur du använder det med din WordPress-webbplats. Du kanske också vill se vårt standard-CSS-fuskblad genererat av WordPress för att snabba upp dina färdigheter i temautveckling eller vår ultimata WordPress-verktygslåda för proffs.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.