Gå till innehållet

Grunderna i att anpassa en Wordpress webbplats

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Har du någonsin velat redigera en webbsida tillfälligt för att se hur den skulle se ut med specifika färger, teckensnitt, stil? Detta är möjligt med ett verktyg som redan finns i din webbläsare som heter " Inspektera elementet ". Detta är en dröm som går i uppfyllelse för alla användare som gillar att manipulera CSS.

I den här guiden går vi igenom grunderna för artikelinspektion och hur du använder den med din WordPress-webbplats.

WordPress-elementinspektion

Vad är ett objektinspektionsverktyg?

Moderna webbläsare som Google Chrome och Mozilla Firefox har byggt verktyg som gör det möjligt för webbutvecklare att felsöka fel. Dessa verktyg visar HTML, CSS och JavaScript för en sida och visar hur koden körs.

Användningen av verktyget " inspektera Element Du kan redigera HTML-, CSS- eller JavaScript-koden för vilken webbsida som helst och se dina förändringar live (enbart på din dator).

För en webbplatsägare kan dessa verktyg hjälpa dig att förhandsgranska hur en viss stil kommer att se ut utan att faktiskt implementera ändringarna för alla.

För författare är dessa verktyg fantastiska eftersom du enkelt kan ändra personlig identifieringsinformation medan du tar dina skärmdumpar, vilket eliminerar behovet av att suddiga element.

För supportagenter är detta ett utmärkt sätt att identifiera felet som kan orsaka att dina gallerier inte laddas eller hindrar dem från att fungera korrekt.

Vi kliar bara ytan på användningsfall eftersom verktyget " Inspektera elementet Är verkligen kraftfull.

I den här artikeln kommer vi att fokusera på verktyget " Inspektera elementet Från Google Chrome, eftersom det är vår webbläsare du väljer. Firefox har sina egna utvecklingsverktyg som också kan åberopas genom att välja menyn " inspektera elementet ".

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Start av verktyget "Inspektera elementet" och lokalisering av koden

Du kan köra det här verktyget genom att trycka CTRL + Shift + I på tangentbordet. Alternativt kan du klicka var som helst på en webbsida och sedan välja Inspektera webbläsarens menyalternativ.

BESIKTNING av blogpascher kod

Din webbläsarfönster delas upp i två, och det nedre fönstret visar källkoden för webbsidan.

Utvecklarens verktygsfönster är vidare uppdelat i två fönster. Till vänster ser du HTML-koden för sidan. I den högra rutan ser du CSS-reglerna.

HTML-CSS-kod inspektion

När du flyttar musen över källan till HTML-koden ser du det markerade området markerat på webbsidan. Du kommer också att märka CSS-reglerna för detta ifrågavarande element.

CSS-regler för HTML-elementet

Du kan också ta muspekaren över ett objekt på webbsidan, högerklicka och välja " inspektera elementet ". Objektet du klickade på kommer att markeras i källkoden.

Kodutvecklare och utvecklarfelsökare

HTML och CSS i elementinspektionsfönstret kan redigeras. Du kan dubbelklicka på HTML-källkoden och redigera koden som du vill.

modifiera HTML-källa

Du kan också dubbelklicka och redigera attributen för stilarna i CSS-fönstret. Om du vill lägga till en regel klickar du på plusikonen i stilfönstret längst upp.

lägg till en ny regel css

När du gör ändringar i CSS eller HTML-koden kommer dessa ändringar att återspeglas direkt i din webbläsare.

kodförändringar lever

Observera att inte alla ändringar som görs här sparas var som helst. Verktyget Inspektera elementet Är ett felsökningsverktyg och det sparar inte dina ändringar i en fil på din server. Detta innebär att om du uppdaterar sidan kommer alla dina ändringar att gå förlorade.

För att faktiskt göra ändringarna måste du ändra stilen för ditt WordPress-tema eller mall för att lägga till de ändringar du vill spara.

Innan du börjar redigera ditt befintliga WordPress-tema med hjälp av verktyget " Inspektera elementet Se till att spara alla dina ändringar genom att skapa ett barntema.

Hur man hittar fel på Wordpress

Verktyget Inspektera elementet Har ett område som heter " Konsol Som visar alla fel som finns på din webbplats. Innan du försöker felsöka ett fel eller be om hjälp från författarna till ett tema eller plugin är det alltid värt att titta här för att se vad som är fel.

JavaScript-konsol

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

Till exempel om du var kund OptinMonster Vem undrar varför hans optin inte laddas, då kan du enkelt hitta problemet som indikerar att " snigel på sidan matchar inte ".

Om din delningsfält inte fungerade ordentligt kan du se att det finns ett JavaScript-fel som orsakar det.

Det här är allt för den här tutorialen, jag hoppas att du bättre kan anpassa din WordPress-blogg. Dela gärna denna tutorial med dina vänner.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
2 aktier
del
tweet
Enregistrer2