Lägg till anpassad CSS

Även om de flesta ändringar kan göras med inställningar i WordPress-redigeraren kanske du föredrar att använda CSS för att anpassa din webbplats om du har erfarenhet av att skriva CSS-kod. Den här guiden visar hur du redigerar din webbplats med CSS.

Den här funktionen är tillgänglig för webbplatser med våra WordPress.com Premium-, Business- och Commerce-paket samt det äldre Pro-paketet. För webbplatser med Gratis- och Starter-paketet, uppgradera ditt paket för att komma åt den här funktionen.

CSS står för Cascading Style Sheets. Det är ett markup-språk som kontrollerar utseendet på HTML-element på en webbsida. WordPress inkluderar en CSS-redigerare där du kan lägga till dina egna CSS-stilar och åsidosätta standardstilarna för ditt tema.

Möjligheterna för vad du kan göra med CSS för att ändra designen på en webbplats är i stort sett oändliga. Det kräver dock kunskap om hur CSS och HTML fungerar (eller åtminstone en vilja att lära sig). CSS-guiden från MDN Web Docs är en bra plats att börja lära sig CSS på.

Om du inte är intresserad av att lära dig CSS väljer du ett blocktema för din webbplats. Dessa teman tillhandahåller de mest flexibla alternativen för att anpassa olika aspekter av din webbplats design utan någon kunskap om datorkod.

Det finns två sätt att komma åt din webbplats CSS-redigerare, beroende på ditt tema du använder. Dessa metoder beskrivs nedan.

Om din webbplats använder ett tema som stöder webbplatsredigeraren kan du anpassa webbplatsen med CSS med denna metod. Ett snabbt sätt att avgöra om din webbplats använder webbplatsredigeraren är att kolla under Utseende i din adminpanel. Om du ser alternativet Redigerare här kan du komma åt CSS-redigeraren genom att följa dessa steg:

1. Gå till adminpanelen för din webbplats.
2. Gå till Utseende → Redigerare.
3. Klicka på Stilar i menyn Design till vänster.
   • Om ditt tema inkluderar Stilvariationer måste du klicka på pennikonen för att öppna alternativen för Stilar:

4. Klicka på de tre punkterna till höger om rubriken ”Stilar” och välj ”Ytterligare CSS”:

5. Skriv eller klistra in din CSS-kod i den tillhandahållna textrutan.
6. Klicka på knappen ”Spara” längst upp till höger på skärmen för att spara CSS-koden till din webbplats.

Du kan förhandsgranska effekten av dina CSS-ändringar på valfri blocktyp genom att läsa in alternativet Stilbok. Klicka på ögonikonen för att öppna stilboken.

I webbplatsredigerarteman kan du tillämpa CSS-kod på specifika block över hela webbplatsen genom att följa stegen nedan.

1. Gå till adminpanelen för din webbplats.
2. Gå till Utseende → Redigerare.
3. Klicka på Stilar i menyn Design till vänster.
   • Om ditt tema inkluderar Stilvariationer måste du klicka på pennikonen för att öppna alternativen för Stilar.
4. Den här gången väljer du sektionen ”Block” för att komma åt inställningar som gör det möjligt att anpassa utseendet på specifika block för hela webbplatsen.
5. Klicka på namnet på det block som du vill lägga till CSS för. Du kan också hitta önskad blocktyp med hjälp av sökrutan.
6. Bläddra längst ner och klicka på ”Avancerat”.
7. I rutan märkt ”Ytterligare CSS” anger du CSS-kod som ska tillämpas på alla instanser av den aktuella blocktypen. När du lägger till CSS per block behöver du inte inkludera en CSS-väljare – det är bara att lägga till egenskapen och värdet. Ett exempel ingår i videoklippet ovan.
8. Klicka på knappen ”Spara” längst upp till höger på skärmen för att spara CSS-koden till din webbplats.

För teman som inte använder webbplatsredigeraren, inklusive klassiska teman och många tredjepartsteman, kan du lägga till CSS-kod genom att följa dessa steg:

1. Gå till adminpanelen för din webbplats.
2. Gå till Utseende → Anpassa → Ytterligare CSS.
3. Skriv eller klistra in din CSS-kod i den tillhandahållna textrutan. Förhandsgranskningsfönstret till höger visar dina ändringar.
4. Klicka på knappen ”Spara ändringar” för att spara CSS-koden till din webbplats.

De senaste 25 versionerna av dina CSS-redigeringar sparas och du kan komma åt dem genom att klicka på ”Se fullständig historik” längst ner i CSS-redigeraren. Du kan återställa tidigare versioner av din CSS här.

Om alternativet inte visas finns det ingen CSS-historik att återställa.

Alternativet ”Mediabredd” bör användas om du har ändrat bredden på det primära innehållsområdet med anpassad CSS. Inställningen ”Mediabredd” används som standardstorlek för bilder i full storlek när de infogas på din webbplats.

Observera att den inte påverkar storleken på vissa bilder som lades till innan du ändrade inställningen, beroende på hur de infogades, och att du kanske måste infoga vissa av dem igen efter att du har ändrat inställningen.

Som standard kommer den anpassade CSS som du lägger till i CSS-redigeraren att läsas in efter temats ursprungliga CSS, vilket innebär att dina regler kan få företräde och åsidosätta temats stilar.

Du kan stänga av temats ursprungliga CSS helt genom att markera kryssrutan ”Använd inte temats ursprungliga CSS”. Detta gör det möjligt att använda valfritt WordPress.com-tema som en tom duk för design med CSS.Detta är ett avancerat alternativ och bör endast användas om du vill börja om och designa CSS-koden för ditt tema från grunden.

Om du vill bygga vidare utifrån de befintliga CSS-reglerna, vilket är den vanligaste och rekommenderade metoden, kan du lämna det här alternativet inaktiverat.

WordPress.com har stöd för CSS-förbearbetningarna LESS och Sass (SCSS Syntax). Detta är ett avancerat alternativ för användare som vill dra nytta av CSS-utökningar som variabler och mixins. Se LESS– och Sass-webbplatserna för mer information.

Sidfotskrediten bör inte ändras med CSS. Du kan ta bort eller ändra sidfotskrediten med inställningar, beroende på vilken typ av tema webbplatsen använder:

• Om din webbplats använder ett blocktema kan du redigera eller ta bort sidfotskrediten med hjälp av webbplatsredigeraren – ingen CSS krävs.
• Om din webbplats använder ett klassiskt tema kan du ändra sidfotskrediten till en minimalistisk WordPress-logotyp. Du kan dölja krediten om webbplatsen har en Business- eller Commerce-paketprenumeration.

Ja, men endast på webbplatser med tillägg aktiverade.

Du kan välja dina webbplatstypsnitt med hjälp av alternativen i ditt tema. När du arbetar med CSS är du begränsad till dessa två webbtypsnitt i front-end. Du kan dock lägga till ytterligare typsnitt genom att använda typsnittstillägg från tredje part.

Ja. Du kan ladda upp en bild till ditt mediabibliotek och sedan hänvisa till den med dess direkt-URL från din CSS-stilmall. Här är ett exempel på hur du använder en bakgrundsbild i din stilmall:

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

Vi rekommenderar att du gör CSS-redigeringar med hjälp av CSS-redigeraren, såsom beskrivs ovan i denna guide. När du lägger till CSS med den här metoden åsidosätter det CSS-reglerna från ditt temas stilmall. Detta är en säker metod som gör det enklare att felsöka CSS-konflikter och återställa tidigare versioner av CSS som du har lagt till.

Om du är skicklig på att redigera temafiler direkt kan du göra det via SFTP eller genom att skapa ett underordnat tema. Vi rekommenderar att du testar ändringar på en utvecklingswebbplats innan du tillämpar dem på din live-webbplats.

Alla uppgraderingar på WordPress.com förnyas årligen. Om du väljer att avsluta din prenumeration kommer din anpassade CSS fortfarande att sparas, men den kommer inte längre att tillämpas på din webbplats så att andra kan se den. Om du vill att stilarna ska tillämpas på din webbplats igen kan du köpa paketet ännu en gång. De kommer då att tillämpas automatiskt, förutsatt att du inte har bytt tema. Om du har bytt tema hittar du din tidigare CSS via länken CSS-versioner.