Vill du prova att redigera WordPress CSS, men tvekar på grund av osäkerhet? Med CSS-styling kan du redigera webbplatsens utseende globalt eller endast på vissa webbsidor. Du kan lägga till färger, sprida ut vissa element, designa en layout, och i princip ändra på allt du vill i WordPress-temat.
Vill du bli mer bekant med WordPress utvecklingsmiljö, eller bara få bättre kontroll över din webbplats utseende? Då måste du veta hur man lägger till CSS i WordPress (samt hur man ändrar vad som redan finns där).
Genom att redigera ditt tema och lägga till ytterligare CSS själv, kommer du att kunna optimera varje visuellt element på din webbplats. Idag ska vi titta närmare på detta.
Redo att börja? Nu kör vi igång!
Vad är CSS-redigering?
CSS står för Cascading Style Sheets och det är det mest populära webbspråket förutom HTML. Dessa två språk går hand i hand, eftersom CSS används för att styla HTML-element. HTML lägger grunden för en webbplats utseende och CSS används för att utforma den ytterligare.
CSS ger dig möjligheten att göra en webbplats responsiv, lägga till färger, ändra teckensnitt, ändra layouten och finjustera en webbplats visuella presentation. Precis som HTML och JavaScript, är CSS ett frontend-språk för klientsidan, vilket innebär att det körs hos användaren, snarare än på backend-servern.
När du djupdyker i WordPress-utveckling är HTML, CSS, JavaScript och PHP de språk du behöver känna till. Detta är vad kärnans CMS är byggt av, liksom dess många teman och plugins.
Men även om du inte är en webbdesigner eller utvecklare, är det bra att lära sig lite CSS. Du kan använda detta för att flytta eller styla element på din webbplats, eller för att göra små estetiska förändringar i ditt tema.
WordPress och CSS
Inom WordPress är CSS lite annorlunda. Det styrs av teman, som består av mallfiler, malltaggar och naturligtvis CSS-stylesheet. Men även om det genereras av ditt tema, kan du redigera allt du vill.
Mallfiler delar upp din webbplats i sektioner (exempelvis header.php eller archive.php).Mall-taggar används för att anropa dem och annat innehåll från din databas. Dessa filer består mestadels av PHP och HTML, men du kan lägga till CSS om du vill.
Den viktigaste saken att kolla upp är stylesheet, eller style.css. Om du vill ändra hur webbplatsen ser ut måste du läsa om hur du lägger till och redigerar kod i den här filen.
Hur du kan anpassa ditt WordPress-tema med CSS
Om du vill anpassa ditt tema och ändra hur webbplatsen ser ut med CSS måste du antingen lägga till din egen kod eller redigera det som redan finns där. Det finns sätt att lägga till CSS utan att du någonsin behöver röra några temafiler men för att ändra befintliga temakod, måste du komma åt webbplatsens stylesheet.
När du gör dessa ändringar, finns det en sak som du bör veta: när ditt tema uppdateras, kommer alla redigeringar som du har gjort i style.css, functions.php eller andra tema-mallfiler att raderas. Generellt bör du inte göra direkta ändringar på din webbplats i redigeraren utan att använda ett barntema.
Stylesheet är som en ”lista med instruktioner” för din webbplats, med inställningar exakt för hur den är stylad och hur CSS-koden hanteras. Det är här du ska göra huvuddelen av din redigering, men vi kommer även att visa dig hur du får tillgång till andra tema-mallfiler, såsom header.php och footer.php.
Det finns två sätt att komma åt din WordPress-webbplats stylesheet: via WordPress instrumentpanel eller via en FTP-klient. Vi kommer att gå igenom båda sätten.
Känner du dig inte bekväm med att göra det här själv? Överväg då att anlita en WordPress-utvecklare för att hantera detta åt dig.
Redigera WordPress CSS i instrumentpanelen
Det enklaste och bekvämaste sättet för att komma åt din CSS stylesheet är i WordPress instrumentpanel. Då slipper du installera FTP-program eller kodredigerare. Du kan direkt redigera valfri fil med inbyggd syntaxmarkering och funktionsdokumentation.
Innan du gör några större redigeringar av kärnfiler, bör du alltid säkerhetskopiera din WordPress-webbplats. Det är väldigt lätt hänt att man gör ett misstag som får webbplatsen att krascha om man är nybörjare på CSS. Det kan dessutom vara svårt att räkna ut hur man får allting att fungera igen.
När du har gjort en säkerhetskopia och ett barntema loggar du in i din backend. Du hittar redigeraren genom att gå till menyn och klicka på Utseende > Temaredigerare.
Det bör komma en popup-varning som varnar om faran med att göra direkta redigeringar av dessa filer. Klicka bara på ”Jag förstår”. Detta är bara ett meddelande om att du ska använda ett barntema och säkerhetskopiera din webbplats innan du gör några större ändringar. Om du gör detta, är det säkert att redigera.
Nu är du igång! Du bör vara på stylesheet som standard men titta i menyn till höger för att visa dina temafiler om du mot all förmodan inte är det.
Förutom style.css, har du även tillgång till mallfiler som functions.php, header.php, och single.php. Alla dessa påverkar hur vissa sidor på din webbplats agerar.
Men du bör bekanta dig med PHP innan du mixtrar med dessa filer.
Kom bara ihåg: De flesta CSS-ändringar du gör här kommer att vara globala. Om du exempelvis ändrar dina H1-rubriker till ett visst teckensnitt, gäller detta för varenda sida på webbplatsen. Du måste använda en särskild syntax för att anpassa specifika sidors styling.
Redigera temafiler direkt
Vad händer om du inte kan komma åt Tema-redigeraren eller föredrar att göra ditt arbete över FTP? Det är enklare att använda backend-redigeraren, men vissa teman eller plugins kan inaktivera den. Om så är fallet måste du ansluta till din webbplats via FTP.
FTP, eller File Transfer Protocol, låter dig få fjärråtkomst för att ändra en webbplats filer. Det första du behöver göra är att ladda ner FileZilla eller någon annan FTP-klient.
Därefter bör du kontakta din host och be om dina FTP-autentiseringsuppgifter (host, port och användarnamn/lösenord om tillämpligt). Om din host har en instrumentpanel kanske du kan hitta dessa uppgifter genom att logga in.
Kinsta-användarnas autentiseringsuppgifter finns i mykinsta´s instrumentpanel under Platser > SFTP/SSH.
När du har dessa uppgifter, ska du starta din FTP-klient och ange den informationen. Om det inte fungerar kan du prova att sätta sftp:// ””före webbadressen i avsnittet Host.
När du väl är inne, kan du hitta din style.css-fil genom att klicka på wp-content mappen för att öppna den. Öppna sedan ditt temas mapp (som med Twenty Twenty´s tema), scrolla sedan tills du ser style.css.
Dubbelklicka för att öppna den (eller högerklicka och välj Visa/Redigera) och gör dina modifieringar. Kom ihåg att spara och ladda upp tillbaka till servern.
Om du behöver redigera andra mallfiler som home.php, single.php eller archive.php, kan du hitta dem i samma mapp som style.css.
Det är inte alltid nödvändigt att redigera dina temafiler, vare sig det är via FTP eller instrumentpanelen. I själva verket är det bäst att undvika att göra detta om du bara lägger till lite extra kod.
För små tillägg, är detta det bästa sättet att lägga till CSS till din WordPress- webbplats.
Hur man lägger till egna CSS i WordPress
Du kanske inte är ute efter att redigera den befintliga CSS-koden, utan vill lägga till din egen styling istället? I så fall föreslår vi att du använder en av följande metoder: WordPress-anpassare eller ett dedikerat plugin.
Om CSS-koden läggs till genom en av dessa metoder är det mycket lättare att komma åt och använda den. Du behöver inte oroa dig för att din nya CSS hamnar på fel plats eller att du glömmer var du har lagt till den om du vill göra ändringar senare.
Dessutom kommer CSS som läggs till genom en av dessa metoder inte att försvinna när ditt tema uppdateras (även om det fortfarande kan försvinna om du ändrar teman).
Detta innebär att du inte behöver använda ett barntema. Om något kraschar, är allt du behöver göra att ta bort den CSS du just har lagt till.
Notera att du fortfarande bör ha en säkerhetskopia av din webbplats. Vissa människor har nämligen rapporterat att de ibland förlorar sina CSS under större uppdateringar. Ändå är denna metod mycket mer tillförlitlig än direkt redigering av temafiler.
Du kan tyvärr bara lägga till kod till style.css, inget mer. Vill du inte skapa ett barntema, göra stora redigeringar till befintlig CSS i ditt tema, med risken för att allt ditt arbete raderas? Då är det bäst att du antingen använder ytterligare CSS-alternativ i WordPress customizer eller installerar en plugin.
1. Redigera CSS genom WordPress Customizer
I stället för att använda Temaredigeraren kan du pröva detta. Logga in på din WordPress-backend och klicka på Utseende > Anpassa för att öppna skärmen för anpassning av temat. Du kommer direkt att se en förhandsvisning av din webbplats, med alternativ till vänster för att anpassa element som färgerna, menyerna eller andra widgetar .
Längst ner på den här menyn bör du hitta rutan Ytterligare CSS.
Klicka för att öppna den. Du kommer då till en ny skärm med en kodinmatningsruta och några instruktioner. På skärmen Ytterligare CSS ingår syntaxmarkering, precis som hos Temaredigeraren, tillsammans med validering som låter dig veta om din kod är fel.
All kod du skriver in visas automatiskt i förhandsgranskningsområdet till höger om den inte innehåller fel ( du kan dock välja att publicera ändå).
När du har arbetat klart kan du publicera koden, schemalägga när den ska börja gälla eller spara den som ett utkast för att arbeta med den senare. Du kan även få en förhandsgransknings-länk som du kan dela med andra.
Som du ser är sidan Ytterligare CSS på många sätt mer kraftfull än Temaredigeraren. Det är mycket bättre att lägga till kod där än att mixtra med kärnfiler.
Den CSS-kod du skriver här skriver över standard-stylingen av ditt tema och försvinner inte när ditt tema uppdateras. Om du inte kan se den ”live” på din förhandsgranskning ska du dubbelkolla att du använder rätt selectors i din CSS-kod.
Precis som med temaredigeraren är CSS globalt som standard, men du kan även skriva kod som riktar sig till specifika sidor.
Nackdelen är att, om du byter teman, kommer allt som du skrivit att raderas. Se till att du säkerhetskopierar din CSS innan du byter till ett nytt tema, annars kan du förlora en hel del arbete.
Om du stöter på problem med det här alternativet, eller vill ha en lösning som fungerar på alla teman och lättare kan rikta vissa sidor, bör du prova en plugin istället.
2. Lägga till anpassad CSS till WordPress genom att använda Plugins
Det finns några anledningar till att du kanske bör använda en plugin för att lägga till CSS till WordPress. Detta liknar visserligen den ytterligare CSS-menyn, men stylingen kommer oftast finnas kvar även om du växlar / uppdaterar teman.
Du kanske även gillar deras UI, eller de extra funktionerna som exempelvis automatisk komplettering. Vissa plugins låter dig även bygga CSS genom rullgardins- menyer, istället för att du behöver skriva en sådan själv.
Simple Custom CSS
Simple Custom CSS är det mest populära pluginet för CSS-redigering. Detta beror på dess användarvänlighet, dess minimala gränssnitt, och enkla backend. Det är me andra ord ett mycket litet WordPress-plugin som klarar mycket.
Inställningen av detta plugin är väldigt enkelt och det uppstår ingen negativ inverkan på prestandan. Det fungerar på vilket tema som helst och inkluderar syntaxmarkering och felkontroll.
Simple Custom CSS och JS
Simple Custom CSS and JS är ett bra alternativ. Det låter dig även rikta sidhuvudet, sidfoten, frontend, och till och med admin-backend.
SiteOrigin CSS
SiteOrigin CSS är ett annat alternativ som även innehåller en traditionell CSS-redigerare. Du kan växla mellan den och den visuella redigeraren när som helst.
WP Add Custom CSS
Om du kämpar för att lägga till CSS på specifika sidor kan du andas ut. WP Add Custom CSS lägger till en anpassad CSS-ruta på redigeringsskärmen, och innefattar även global styling.
CSS Hero
Du kanske även vill överväga att prova en visuell CSS-redigerare. Då slipper du all komplicerad kodning och kan istället jobba med inmatningsfält och rullgardins- menyer som hanterar alla programmering åt dig.
CSS Hero är ett premium visuellt redigerings-plugin med några väldigt kraftfulla funktioner (animation, enhetsspecifika redigeringar, och icke-förstörande redigering för att nämna några).
Var kan man lära sig CSS
Redo att fördjupa dig ännu mer i CSS? Dessa nybörjar-tutorials kommer att fastställa grunderna och lära dig den syntax som du behöver veta för att skriva din egen funktionella CSS-kod.
Detta kan vara skrämmande, men om du inte försöker göra något riktigt avancerat, är CSS inte alltför svårt! Enkla saker som att ändra bakgrundsfärg eller inställning av teckensnitt är ganska simpelt, och det finns gott om exempel på nätet.
(Förslag på läsning: 50 + Moderna teckensnitt att använda på din WordPress-sajt)
De flesta programmering-tutorials som du hittar på internet är även dem helt kostnadsfria. Faktum är att det finns gott om kostnadsfri information där ute.
Här är några exempel som går igenom bäst CSS-tutorials för nybörjare.
- W3Schools CSS Tutorial: Här finns tonvis med information: djupgående tutorials, exempel, och referenser som du kan arbeta med. W3Schools handledning är otroligt enkel att ta till sig, så även om du är en total nybörjare, är detta ett bra ställe att börja på.
- Codeacademy Learn CSS: Genom sex kostnadsfria lektioner, lär du dig grunderna i CSS. Detta är ingen enkel video-tutorial, utan en interaktiv lektion där du arbetar med den faktiska koden. Med pro-versionen får du även frågesporter och freeform-projekt att arbeta med.
- Lär dig CSS in one hour: Många människor vill lära sig ett nytt programmeringsspråk, de hittar bara inte tiden för det. Men om du kan avsätta en timme kan du lära dig CSS med denna kostnadsfria kurs i 20 delar. Även om du inte är en mästare i slutet, bör du ha fått ett bra grepp om grunderna.
- Introduction to Basic HTML & CSS for WordPress Users: Letar du efter något specifikt för WordPress? Om du alltid har kämpat med att skriva HTML och CSS är den här kursen perfekt för dig. Den kostar pengar, men innefattar 52 föreläsningar och fem timmars video.
Sammanfattning
Många WordPress-användare tycker nog att CSS kan vara förvirrande. Men när du vet hur du redigerar dina temafiler och var du ska lägga till styling, bör du inte möta fler problem.
Temafiler kan redigeras antingen från din backend eller via FTP för att ändra webbplatsens utseende, men detta bör vanligtvis undvikas om du inte behöver redigera den befintliga koden.
Om du bara vill lägga till din egen CSS, använd sidan Ytterligare CSS under Utseende > Anpassa, eller prova ett plugin om du behöver något mer kraftfullt.
Redigeringar av ditt stylesheet kommer att gå förlorade vid temauppdateringen om du inte använder ett barntema. Detta gäller inte för Ytterligare CSS. Din kod är säker även efter uppdateringar men kom ihåg: Endast ett plugin kommer att behålla CSS när du ändrar teman.
Oavsett vilken metod du väljer bör du alltid skapa regelbundna säkerhetskopior av din webbplats, inklusive stylesheet och anpassad kod. Nu är det dags att fräscha upp dina CSS-grunder med hjälp av denna artikel.
Glad styling!
Head of Content at Kinsta and Content Marketing Consultant for WordPress plugin developers. Connect with Matteo on Twitter.
Lämna ett svar