Så här anpassar du din WordPress-webbplats med CSS: 3 enkla metoder

WordPress har utvecklats genom åren, och idag är det en ganska flexibel och lättanpassad plattform genom sin blockredigerare, Gutenberg. Ändå kommer det att finnas tillfällen då du behöver lite mer räckvidd än vad Gutenberg-redigeraren ger.

Det är här anpassad CSS kommer väl till pass. CSS-styling låter dig redigera färger, avstånd, typsnitt, layouter och i princip alla andra visuella element på din WordPress-webbplats, så att du kan få den att se ut precis som du vill.

I den här artikeln går vi igenom det viktigaste för att anpassa din WordPress-webbplats med CSS.

Varför anpassa din webbplats med CSS?

Att lägga till anpassad CSS är bara en av metoderna du kan använda för att finjustera webbplatsens utseende. Andra metoder inkluderar att använda en välutrustat premium WordPress-tema, eller installera en sidbyggare.

Även om dessa två metoder är lite lättare att använda för nybörjare och inte kräver någon kodningskunskap, är det fördelaktigare att använda anpassad CSS på två huvudsakliga sätt:

Noll kostnad

Premiumteman och WordPress-sidbyggare kan vara praktiska, men de kostar – i dollar och cent. Beväpnad med kunskapen om hur man skriver anpassad CSS, å andra sidan, kan du uppnå samma effekter utan att dra på dig några extra kostnader.

Minimal uppblåsthet

Sidbyggare och välutrustade teman är utformade för att ge användarna mer flexibilitet och ett brett utbud av alternativ för att anpassa sina webbplatser. På grund av detta tenderar de att lägga till uppblåsthet på webbplatser, vilket potentiellt saktar ner dem.

När du skriver anpassad CSS, å andra sidan, kommer du bara att lägga till de nödvändiga funktionerna, vilket i allmänhet resulterar i lättare webbplatser och snabbare laddningshastigheter.

3 enkla metoder för att anpassa din WordPress-webbplats med CSS

Förhoppningsvis vet du redan hur man skriver CSS. När du väl är bekant med grunderna kan du använda någon av följande metoder för att lägga till anpassad CSS till din WordPress-webbplats:

Metod 1: Använd WordPress Customizer

Med WordPress 4.7 eller någon version efter den kan du lägga till anpassad CSS direkt från administratörsområdet. Detta är den enklaste metoden, och eftersom det finns en liveförhandsvisning tillgänglig kan du se alla ändringar du gör i realtid.

Det är också den mest rekommenderade, eftersom alla ändringar du kommer att göra sparas i själva WordPress. Detta innebär att även om du ändrar eller uppdaterar ditt tema, kommer du inte att förlora din anpassade CSS.

Här är stegen att ta:

Steg 1: Navigera till Utseende > Anpassa.

Detta öppnar WordPress-temanpassaren, som visar dig en liveförhandsvisning av din webbplats till höger, tillsammans med några anpassningsalternativ till vänster. Scrolla ner till botten av den vänstra panelen och du hittar en Ytterligare CSS flik.

Steg 2: Klicka på Ytterligare CSS Flik.

Detta öppnar en liten ruta i den vänstra rutan där du kan lägga till din anpassade CSS. Du kan skriva in så många rader med CSS-kod som du vill. Det fina med den här redigeraren är att den validerar din kod och varnar dig om det finns några fel.

Steg 3: Publicera dina ändringar.

Alla giltiga CSS-regler du lägger till kommer att dyka upp i liveförhandsgranskningsområdet till höger. För att tillämpa ändringarna på din webbplats, klicka på Publicera knappen överst i den vänstra rutan när du är nöjd. Om du inte vill att ändringarna ska träda i kraft omedelbart kan du också schemalägga publicering vid ett senare tillfälle eller spara ditt arbete som ett utkast.

Det är viktigt att notera att alla ändringar du gör med hjälp av anpassaren är kopplade till ditt nuvarande tema. Om du någonsin byter till ett annat tema kommer ändringarna att gå förlorade om du inte kopierar din anpassade CSS och lägger till den i det nya temat. Det är bra att spara all anpassad CSS du lägger till i ett tema på ett anteckningsblock. På så sätt kan du helt enkelt kopiera koden och klistra in den i avsnittet "Ytterligare CSS" för ett annat tema.

Om det låter som för mycket arbete och du föredrar en lösning som låter dig applicera din anpassade CSS på alla WordPress-tema du använder, är nästa metod för dig.

Metod 2. Använd en plugin

Anpassade CSS-plugins lagrar din anpassade CSS separat från ditt tema, vilket gör att dina ändringar kan tillämpas oavsett vilket tema du använder. Dessa plugins kommer också med extra funktioner som automatisk komplettering som kan göra det enklare att lägga till CSS.

Den enda nackdelen är att de är programvara från tredje part, vilket innebär att de potentiellt kan sakta ner din webbplats. De flesta av dessa plugins är dock lätta, så de har i allmänhet liten inverkan på din webbplats prestanda. Här är några av de bästa anpassade CSS-plugins du kan använda:

• Enkel anpassad CSS

Enkel anpassad CSS är en av de mest populära anpassade CSS-plugins. Den är lätt, enkel att använda och erbjuder fantastiska funktioner. Det är enkelt att ställa in det. Allt du behöver göra är att installera och aktivera plugin-programmet. Navigera sedan till Utseende avsnittet till vänster på din instrumentpanel.

Du kommer att se ett nytt alternativ som heter Anpassad CSS. Genom att klicka på den öppnas en redigerare där du kan lägga till din anpassade CSS. Klicka på Uppdatera anpassad CSS knappen för att spara dina ändringar. För att se ändringarna uppdaterar du bara din webbplats.

• Enkel anpassad CSS och JS

Om du vill ha ännu fler funktioner, Enkel anpassad CSS och JS-plugin är ett utmärkt alternativ. Förutom att lägga till CSS, låter det dig lägga till JavaScript-poster.

• CSS-hjälte

Om du inte vill skriva en enda rad kod, CSS Hero-plugin är perfekt för dig. Detta plugin erbjuder en visuell CSS-redigerare med rullgardinsmenyer och inmatningsfält som låter dig redigera nästan alla CSS-stilar på din webbplats utan att du behöver skriva någon kod.

Metod 3. Redigera råkoden

De två metoderna vi beskrev ovan låter dig lägga till anpassad CSS på din webbplats utan att behöva röra någon av dina temafiler. Men i vissa fall kanske du vill redigera ditt temas CSS eller direkt lägga till anpassad CSS till ditt temas kod.

För att göra detta måste du komma åt din webbplats stilmall. Ett enkelt sätt att komma åt denna stilmall är genom Temaredaktör på din WordPress-instrumentpanel.

Innan vi går vidare finns det dock några säkerhetsåtgärder du måste införa. Först, säkerhetskopiera din webbplats. När du redigerar dina temafiler är det lätt att göra misstag som potentiellt kan krascha din webbplats.

En säkerhetskopia säkerställer att du har en fungerande webbplats att gå tillbaka till. Nästa, skapa ett barntema. Om du gör direktredigeringar i ditt överordnade tema, kommer ändringarna att gå förlorade när temat uppdateras.

När dessa säkerhetsåtgärder är på plats, logga in på din WordPress-backend. Gå till Utseende > Temaredigerare. När du klickar på temaredigeringsalternativet ser du en popup-ruta som varnar dig mot att göra direkta ändringar i dina temafiler. Om du följer stegen ovan är du bra att gå.

Klick jag förstår att fortsätta.

När du har klickat bör du se din webbplats stilmall som standard. Om inte, titta helt enkelt på den högra rutan och klicka på style.css under Stilmall alternativ.

Härifrån kan du göra direkta ändringar i dina temafiler. Glöm bara inte att klicka Spara och uppdatera när du är klar.

Ta kontroll över din webbplats utseende med anpassad CSS

Att lära sig att skriva anpassad CSS på WordPress kan ta lite tid för nybörjare, men det kommer att ge dig verklig kontroll över utseendet på din webbplats. Och det är till noll kostnad och med minimal inverkan på din webbplats prestanda.

Om du hellre inte vill göra någon manuell design, men det finns andra sätt att få jobbet gjort, till exempel genom att använda en av de bästa sidbyggarna för WordPress.

5 WordPress-sidbyggare som kan hjälpa dig att bygga fantastiska webbplatser

Vill du få din WordPress-webbplats att se fantastisk ut men har inte råd med en utvecklare? Prova dessa WordPress-sidbyggare istället.

Läs Nästa

Om författaren