Vill du ändra färgerna eller typsnitten på din WordPress-webbplats, men är orolig för att förstöra något? Många nybörjare antar att det kräver redigering av temafiler, där även ett litet misstag kan orsaka stora problem.
I början av WordPress var det enda sättet att lägga till anpassad CSS att redigera dessa filer direkt. Vi minns hur stressigt det var, och hur en felplacerad tecken kunde krascha en hel webbplats.
Lyckligtvis är det inte längre fallet. WordPress erbjuder nu säkra, nybörjarvänliga sätt att lägga till anpassad CSS med hjälp av Temaanpassaren, Full Site Editor (FSE) eller ett plugin som WPCode.
I den här guiden går vi igenom tre enkla metoder för att lägga till anpassad CSS på din WordPress-webbplats, steg för steg. 🙌
Varför lägga till anpassad CSS i WordPress?
Du lägger till anpassad CSS i WordPress för att få mer kontroll över din webbplats design än vad dina temainställningar tillåter. Du kan till exempel justera teckenstorlekar, ändra knappfärger eller lägga till extra avstånd till specifika sektioner.
CSS (Cascading Style Sheets) är språket som stylar din webbplats och hanterar saker som färger, typsnitt, avstånd och layouter. Genom att skriva din egen CSS kan du finjustera din webbplats utseende utan att byta tema eller installera extra plugins.
Denna flexibilitet innebär att du kan anpassa enskilda inlägg, styla produktkategorier i din butik, eller till och med optimera hur din webbplats ser ut på mobilen jämfört med datorn.
I den här guiden visar vi dig de olika sätten att lägga till anpassad CSS på din WordPress-webbplats.
Du kan klicka på länken nedan för att hoppa till valfri sektion du är intresserad av:
- Metod 1: Lägga till anpassad CSS med hjälp av temaanpassaren (klassiska teman)
- Metod 2: Lägga till anpassad CSS med WPCode-pluginet (alla teman)
- Metod 3: Lägga till ytterligare CSS med Full Site Editor (Blockteman)
- Bonustips: Använda ett anpassat CSS-plugin jämfört med att lägga till CSS i temaanpassaren
- Vanliga frågor: Lägga till anpassad CSS till din WordPress-webbplats
- Fler CSS-tips och tricks för din WordPress-webbplats
Redo? Låt oss börja.
Metod 1: Lägga till anpassad CSS med hjälp av temaanpassaren (klassiska teman)
Sedan WordPress 4.7 kan användare nu lägga till anpassad CSS direkt från WordPress-administrationsområdet. Detta är superenkelt, och du kan se dina ändringar omedelbart med en liveförhandsgranskning.
Notera: Den här metoden är endast för klassiska teman. Om du använder ett blocktema måste du välja en av de andra metoderna.
Först måste du gå till sidan Utseende » Anpassa från din WordPress-instrumentpanel.
Detta startar WordPress temaanpassningsgränssnitt.
På den här sidan kan du se en liveförhandsgranskning av din webbplats med en mängd anpassningsalternativ i den vänstra panelen. Beroende på ditt WordPress-tema kan layouten för den här menyn variera något. I vårt exempel använder vi Sydney-temat.
Hitta helt enkelt fliken 'Ytterligare CSS' för att börja redigera.
Fliken glider för att visa en enkel ruta där du kan lägga till din anpassade CSS.
Så snart du lägger till en giltig CSS-regel kommer du att kunna se den tillämpad i din webbplats liveförhandsgranskningspanel.
Du kan fortsätta att lägga till anpassad CSS-kod tills du är nöjd med hur ändringarna ser ut på din webbplats.
Glöm inte att klicka på knappen 'Publicera' högst upp när du är klar.
ℹ️ Obs: All anpassad CSS du lägger till med hjälp av temaanpassaren är endast tillgänglig med det specifika temat. Om du vill använda den med andra teman måste du kopiera och klistra in den i ditt nya tema med samma metod.
Metod 2: Lägga till anpassad CSS med WPCode-pluginet (alla teman)
Den första metoden tillåter dig bara att spara anpassad CSS för det för närvarande aktiva temat. Om du byter tema, kan du behöva kopiera och klistra in din anpassade CSS till det nya temat.
Om du vill att din anpassade CSS ska tillämpas oavsett vilket WordPress-tema du använder, är den här metoden för dig.
WPCode är det bästa pluginet för anpassade kodavsnitt på marknaden, med över 2 miljoner användare. Förutom att göra det enkelt att lägga till anpassad kod i WordPress, kommer det med funktioner som ett inbyggt bibliotek för kodavsnitt, villkorlig logik, konverteringspixlar och mer.
Vi använder WPCode för att lägga till och hantera kodavsnitt för vissa partnervarumärken. För en djupgående titt på dess funktioner och fördelar, kolla in vår kompletta WPCode-recension.
Nu är det första du behöver göra att installera och aktivera WPCode-pluginet. Om du behöver hjälp, se vår guide om hur man installerar ett WordPress-plugin.
ℹ️ Notera: Den här handledningen fungerar med den kostnadsfria versionen av WPCode-pluginet, så du kan komma igång direkt. Om du bestämmer dig för att uppgradera till WPCode Pro, låser du upp användbara funktioner som schemalagda kodavsnitt, fullständig revisionshistorik och tillgång till det kompletta biblioteket med färdiga, av utvecklare godkända kodavsnitt.
Efter aktivering, gå helt enkelt till Kodavsnitt » + Lägg till nytt från WordPress adminområde.
Sedan kan du sväva över alternativet 'Lägg till din anpassade kod (nytt kodavsnitt)' i biblioteket med kodavsnitt och klicka på 'Använd kodavsnitt'.
På nästa skärm väljer du kodtyp för ditt anpassade CSS-utdrag.
Klicka på 'CSS Snippet' som kodtyp.
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’.
Låt oss nu skrolla ner till sektionen 'Infogning' och välja metoden 'Automatisk infogning' om du vill köra koden över hela din WordPress-webbplats.
Om du bara vill köra koden på vissa sidor eller inlägg kan du välja metoden 'Kortkod'.
Nu vill du gå tillbaka till toppen av sidan.
Växla sedan helt enkelt omkopplaren till 'Aktiv' och klicka sedan på knappen 'Spara kodavsnitt'.
Det är allt! Du kan besöka din WordPress-webbplats för att se den anpassade CSS:en i praktiken.
Metod 3: Lägga till ytterligare CSS med Full Site Editor (Blockteman)
Om du använder ett modernt blocktema, är den bästa platsen att lägga till din anpassade CSS direkt i Full Site Editor. Den här metoden behåller din CSS med ditt temas stilinställningar och låter dig se en liveförhandsgranskning.
Först måste du navigera till Utseende » Redigerare från din WordPress-instrumentpanel.
Detta öppnar Full Site Editor.
I menyn till vänster, klicka på fliken 'Stilar'.
Du bör nu se panelen 'Stilar' för din webbplats samt din sidförhandsgranskning.
Härifrån klickar vi på förhandsgranskningen för att öppna blockredigeraren.
I innehållsredigeraren, klicka på ikonen 'Styles'. Den ser ut som en cirkel som är halvt svart och halvt vit.
Gå sedan vidare och välj 'Ytterligare CSS'.
I CSS-utdraget hittar du fältet 'Ytterligare CSS'.
Du kan ange din CSS här, och du kommer att se ändringarna omedelbart i liveförhandsgranskningen.
När du är nöjd med allt, glöm inte att klicka på 'Spara' längst upp till höger för att publicera dina ändringar.
Bonustips: Använda ett anpassat CSS-plugin jämfört med att lägga till CSS i temaanpassaren
Alla metoder som beskrivs ovan rekommenderas för nybörjare. Avancerade användare kan också lägga till anpassad CSS direkt i sina teman.
Det rekommenderas dock inte att lägga till anpassade CSS-avsnitt i ditt föräldratema. Dina CSS-ändringar kommer att gå förlorade om du av misstag uppdaterar temat utan att spara dina anpassade ändringar.
Det bästa tillvägagångssättet är att använda ett barn-tema istället. Många nybörjare undviker dock att skapa ett barn-tema eftersom de tycker att processen är skrämmande. Dessutom saknar nybörjare ofta förståelse för hur de kommer att använda barn-temat utöver att bara lägga till anpassad CSS.
Att använda ett anpassat CSS-plugin låter dig lagra din anpassade CSS oberoende av ditt tema. På så sätt kan du enkelt byta teman, och din anpassade CSS kommer att finnas kvar.
Ett annat bra sätt att lägga till anpassad CSS på din WordPress-webbplats är att använda pluginet CSS Hero. Detta underbara plugin låter dig redigera nästan alla CSS-stilar på din WordPress-webbplats utan att skriva en enda kodrad.
Du kan också lägga till anpassad CSS med pluginet SeedProd, den bästa dra-och-släpp WordPress sidbyggaren.
Med SeedProd kan du skapa anpassade WordPress-teman och landningssidor för din WordPress-webbplats. Du kan enkelt redigera de globala CSS-inställningarna; ingen kod krävs.
Några av våra partner varumärken har designat hela sina webbplatser med SeedProd. Var noga med att läsa vår detaljerade recension av SeedProd för att se varför det är ett toppval för att bygga fantastiska webbplatser.
Vanliga frågor: Lägga till anpassad CSS till din WordPress-webbplats
Vill du göra din WordPress-webbplats verkligen din egen med anpassade stilar? Här är några vanliga frågor om att säkert lägga till anpassad CSS och hur du gör det utan att förstöra din webbplats:
Är det riskabelt att lägga till anpassad CSS för min webbplats?
Inte om du gör det på rätt sätt. Verktyg som WordPress Theme Customizer, WPCode, eller SeedProd låter dig förhandsgranska dina ändringar innan du publicerar dem. Detta hjälper dig att undvika misstag och hålla din webbplats säker.
Kommer mina CSS-ändringar att försvinna om jag byter tema?
Om du lade till CSS via Temanpassaren är dina ändringar knutna till det specifika temat. I det här fallet, ja, din ytterligare CSS kommer att försvinna om du byter ditt WordPress-tema.
För att hålla din CSS konsekvent över alla teman kan du använda ett kodavsnitt-plugin som WPCode. Det lagrar din kod separat, så den förblir aktiv även om du byter teman.
Kan jag återställa ändringar om något går fel?
Ja, särskilt om du använder ett plugin för kodavsnitt som WPCode. Du kan enkelt inaktivera eller ta bort alla avsnitt du har lagt till. Det är alltid en bra idé att förhandsgranska dina ändringar först eller testa dem på en staging-webbplats om du är osäker.
Tänk om jag vill ha ännu mer kontroll över min CSS?
För mer avancerade redigeringar kan du skapa ett barn-tema. Detta ger dig full kontroll och håller dina ändringar säkra under temauppdateringar. Men det kräver viss grundläggande förståelse för hur WordPress-teman fungerar.
Behöver jag kodningskunskaper för att lägga till anpassad CSS?
Du behöver inte vara utvecklare, men du måste kunna lite CSS, åtminstone tillräckligt för att kopiera och klistra in rätt kod eller följa en handledning.
De goda nyheterna är att det finns gott om nybörjarvänliga resurser (som WPBeginner!) som hjälper dig att lära dig enkla CSS-justeringar steg för steg. Med rätt verktyg kan det fortfarande kännas hanterbart att lägga till CSS – mer som att möblera om än att bygga om huset.
Fler CSS-tips och tricks för din WordPress-webbplats
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du lägger till anpassad CSS på din WordPress-webbplats. Om du tyckte att detta var hjälpsamt, kanske du också vill se våra guider om:
- Hur man minifierar CSS/JavaScript-filer i WordPress
- Hur man enkelt optimerar leveransen av WordPress CSS
- Hur man tillämpar CSS för specifika användarroller i WordPress
- Hur man lägger till första och sista CSS till WordPress-menyobjekt
- Hur man tar bort oanvänd CSS i WordPress (på rätt sätt)
- Hur du fixar trasig CSS i WordPress Admin-instrumentpanelen
- Standardgenererat CSS-fuskblad för WordPress för nybörjare
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.
Mrteesurez
Baserat på metoden du använde när du lade till anpassad CSS i en blockbaserad webbplats, märker jag att webbplatsen fortfarande använder någon del av den klassiska anpassaren via länken du delade?
Jag vill fråga om man bara kan installera ett klassiskt widget-plugin på ett blockbaserat tema för att enkelt få tillgång till anpassaren för att lägga till CSS och annat utan att använda någon anpassad länk?
WPBeginner Support
Det skulle i hög grad bero på ditt specifika tema. Om ditt tema inte har alternativet i anpassaren, rekommenderar vi att du använder ett av alternativen från den här artikeln.
Admin
Mrteesurez
Tja, de flesta teman har alternativet i anpassaren, jag känner inte till blockteman. Tack.
Men jag skulle rekommendera att använda en sidbyggare istället för fullständiga anpassningsfunktioner. När jag väl har lärt mig att använda sidbyggare använder jag sällan anpassad CSS på sidor.
Dennis Muthomi
Bara för att förtydliga – när du nämner (i METOD 1) att CSS som läggs till via Customizer endast är tillgänglig för det specifika temat, betyder det att den anpassade CSS-koden faktiskt läggs till i det aktuella temats filer?
Jag är inte så tekniskt kunnig, så jag vill vara säker på att jag förstår rätt innan jag sätter igång.
WPBeginner Kommentarer
Istället för att läggas till i temafiler lagrar anpassaren CSS i databasen och associerar den med temat.
Mrteesurez
Det vet jag inte, tack. Det betyder att den tillagda anpassade CSS:en inte sparas i temafiler utan i databasen, så varför behöver vi kopiera och klistra in den anpassade CSS-koden igen när vi byter tema om den faktiskt finns i databasen?
WPBeginner Support
När du lägger till CSS-koden är den kopplad till själva temat när du sparar. När du laddar ett nytt tema laddas all CSS som är kopplad till det temat.
Jiří Vaněk
Tack, mrteesurez, för att du frågade eftersom jag var lika förvirrad som du, och tack till WPBeginner för förklaringen som hjälpte mig att förstå hur den tillagda CSS:en fungerar med temat. Jag trodde också att CSS-koderna bara lagrades i temat, men nu förstår jag äntligen hur det fungerar i bakgrunden.
Qasim Saeed
Hej, om jag vill lägga till anpassad CSS på en specifik sida utan något plugin, vad gör jag då? Jag tror att vi lägger till detta via funktioner? Kan du snälla berätta hur jag lägger till CSS via functions.php och vad som är det bästa och säkraste sättet att lägga till CSS för en specifik sida?
WPBeginner Support
Du behöver inte använda funktioner för att lägga till CSS på specifika sidor, du skulle rikta in dig på den specifika sidan i din CSS-väljare för att den bara ska påverka en enda sida på din webbplats.
Admin
Jiří Vaněk
Är det bättre att infoga din egen CSS i WordPress med en mall eller med WPCode?
WPBeginner Support
Båda alternativen är giltiga val, det beror på personlig preferens och om temat har alternativet i redigeraren.
Admin
Jiří Vaněk
Tack för förtydligandet, jag var inte säker på om till exempel ett kodavsnitt som använder WPCode skulle vara snabbare för webbplatsens svarstid än att integrera det i själva mallen. Så om det inte spelar någon roll, kommer jag förmodligen att hålla mig till bästa praxis och behålla det integrerat i mallen.
Bavi
Är CSS-tillägg inte längre tillgängligt för gratisplanen, finns det några alternativ??
WPBeginner Support
Våra handledningar är för WordPress.org-webbplatser, vi har inga specifika för WordPress.com för tillfället. Vi rekommenderar att du tittar på vår guide nedan för jämförelsen mellan de två och om du vill överföra din webbplats från WordPress.com till en självhostad WordPress.org-webbplats.
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
Ben
Jag visste aldrig om "tricket" med example.com/wp-admin/customize.php. Tack! Fungerade som en charm!
WPBeginner Support
Glad we could share this trick with you!
Admin
Dani
Hej där,
Jag vill lägga till anpassad CSS, men hur kan jag ta bort den om något går fel?
Bogdan
Hej, den här artikeln är mycket bra. En fråga dock: Måste jag inte se HTML-sidan för att lägga till anpassad CSS? Hur lägger jag till anpassad CSS om jag inte känner till selektorerna och allt det där?
WPBeginner Support
Vi har en guide om hur man använder Inspektera element som du kan titta på nedan för hur du hittar selektorerna:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
cymon
Jag är en ny bloggare. Finns det ett sätt att lägga till CSS-kod för specifika sidor?
WPBeginner Support
Du skulle behöva lägga till sidans ID som en del av CSS:en, men ja, det kan du.
Admin
Jitin Mishra
Bra artikel för att lägga till anpassad CSS på en WordPress-webbplats. Vi ser fram emot fler sådana informativa inlägg.
WPBeginner Support
Glad you found our guide helpful
Admin
Mohsin
Jag vill ändra min WordPress-meny till en megameny med kodning. Kan jag konvertera min webbplatsmeny till en megameny med hjälp av HTML, CSS och JS? Jag vill inte använda ett plugin för detta arbete. Om vi lägger till ny funktionalitet till WordPress-webbplatsen med anpassad kodning, vad är bästa praxis för att detta anpassade arbete inte ska försvinna vid uppdatering av tema eller WordPress. Tack!
WPBeginner Support
Du vill skapa ett barntema för att hålla dina ändringar säkra, men du kan behöva lite PHP-kodning. Vi har en guide om att skapa ett barntema som du kan titta på nedan:
https://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/
Admin
vijay v
kan vi lägga till en extern CSS-fil (genom att flytta anpassad CSS) för att öka sidhastigheten (efter att jag lagt till anpassad CSS minskade laddningshastigheten), om ja hur gör man det?
tack på förhand
WPBeginner Support
Om vi förstår vad du letar efter korrekt, vill du ta en titt på vår artikel nedan:
https://www.wpbeginner.com/wp-tutorials/how-wordpress-plugins-affect-your-sites-load-time/
Admin
billy king
Är "oortodox" CSS tillåten i Child Theme eller Custom CSS?
WPBeginner Support
Så länge CSS:en riktar sig mot det som finns på din webbplats kan du använda vilken CSS du vill.
Admin
Latonya Moore
Detta är bra men finns det ett sätt att bara lägga till css på en sida? Exempel Jag vill bara visa eller dölja genom att sväva eller muspekaren över en text.
WPBeginner Support
Du skulle antingen behöva lägga till en CSS-klass till det specifika objektet eller lägga till sidans ID i din CSS för att begränsa det till den specifika sidan. För hur du hittar den informationen vill du titta på vår artikel nedan om hur du använder "inspect element":
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Admin
shiva
Jag har gjort några ändringar på min webbplats genom att redigera några CSS-koder i temaredigeraren. Vad händer om jag uppdaterar min WordPress till nästa version. Blir det fel eller återgår det till bas-temat eller kommer min kod att visas även efter att ha uppdaterat min WordPress precis som före uppdateringen.
WPBeginner Support
Om du lade till din CSS i området Utseende>Anpassa>Ytterligare CSS, kommer dina CSS-ändringar att finnas kvar när du uppdaterar din webbplats.
Admin
Jo
Jag har inte riktigt färdigbyggt min webbplats, men har uppgraderat från gratisversionen så att jag kan använda css för att göra ändringar. Min webbplats är inte live än. Med uppgraderingen till premiumversionen har uppdateringsknappen nu ändrats till publicera. Betyder det att när jag klickar på publicera för att spara några ändringar så blir min webbplats live?
Dessutom kommer jag inte ihåg vilken tema jag använde, hur tar jag reda på vilket tema jag använder?
Tack
WPBeginner Support
Det låter som att du är på WordPress.com, om du publicerar ett inlägg så kommer det att vara synligt för de som kan se din webbplats. Med WordPress.com för en privat webbplats är du begränsad till: https://en.support.wordpress.com/settings/privacy-settings
Du bör kunna se vilket tema som är aktivt under Utseende>Teman
Admin
Bruce William Taylor
"Fliken kommer att glida för att visa dig en enkel ruta där du kan lägga till din anpassade CSS. Så snart du lägger till en giltig CSS-regel kommer du att kunna se den tillämpad i din webbplats liveförhandsgranskningsruta."
Jag vet redan VAR jag ska lägga till CSS:en. Hur vet jag vilken CSS jag ska lägga till? Hur vet jag vilka "giltiga CSS-regler" som finns?
WPBeginner Support
Hej Bruce,
För det behöver du lära dig lite grundläggande CSS. Det finns flera webbplatser som har steg-för-steg CSS-handledningar för nybörjare. Vi rekommenderar w3schools eftersom de låter dig öva CSS med en live "prova själv"-ruta.
Admin
Ali
Var lagras anpassad CSS-kod eftersom jag har tappat bort den under en överföring till en ny webbhotell?
mahaveer
jag vill lägga till extern css och lägga till bilder i css.....
Muhammad Adil
Vad var Bonusmetoden?
Är det något plugin som jag inte förstod. Kan du fråga mig?
Tack
Aditya Khuteta
Hej! Jag vill ändra storleken på pristexten på min webbplats eftersom pristexten är för liten där. Vänligen guida mig hur jag gör det.
Tack
Frank Lurz
2 frågor:
1. Bara så att jag förstår, är "plugins" ersättningar för att skriva CSS, en svår uppgift för oss som inte kan något om CSS – stämmer det?
2. Plugins som listas för nedladdning på WP-pluginsidan är endast tillgängliga för installation för prenumeranter som har betalat för "Business"-planen, stämmer det?
WPBeginner Support
Hej Frank,
1. Nej, plugins är inte en ersättning för att skriva anpassad CSS. Du kan skriva anpassad CSS utan att installera plugins. Se vår guide om vad WordPress-plugins är och hur de fungerar för mer information.
2. OM du använder WordPress.com, då ja, du måste uppgradera till affärsplanen. Se vår guide om skillnaden mellan självhostad WordPress.org vs gratis WordPress.com-blogg.
Admin
Annie Mitchell
Hej,
Jag är nybörjare när det gäller att bygga och designa webbplatser och har ingen kunskap om CSS. Jag använder Sydney-temat på min webbplats – och jag har på något sätt lyckats göra min paragraftext vit. Jag har googlat och märkt att en herre hade samma problem. Han löste det genom att ladda ner ett plugin och använda anpassad CSS, men jag har inte haft någon lycka.
CSS:en som han rådde att använda är –
.entry-page p, .entry-post p { color: black !important; margin: 0 !important; padding: 0 !important; }
men jag är inte säker på varför det inte fungerar för mig. All hjälp skulle uppskattas mycket.
Tack,
Annie
WPBeginner Support
Hej Annie,
Först rekommenderar vi att du stänger av alla dina WordPress-plugins genom att inaktivera dem. Besök sedan din webbplats för att se om detta löste ditt problem. Om det gjorde det, betyder det att en inställning i ett av dina plugins orsakade problemet. Om det inte löser problemet, försök att byta till ett standardtema som Twenty Seventeen. Om det löser ditt problem, betyder det att du någonstans i ditt tema har ändrat teckensnittsinställningarna.
Om inget fungerar, kan du prova denna anpassade CSS:
p { color:#000; }1-click Use in WordPress
Admin
Jose
Ett av plugins (Simple Custom CSS) har inte uppdaterats på 2 år, vilket i WordPress-plugins värld är en mycket lång tid. Detta är en säkerhetsrisk, så jag skulle personligen leta efter ett alternativ.
Rebecca
Hej
Tyvärr vet jag inget om CSS och jag försöker lösa ett problem med att inte kunna söka efter plugins, men det är en annan historia! Jag skriver här nu eftersom jag får detta meddelande när jag går till Utseende / Redigera CSS / Ytterligare CSS
” Det finns 1 fel som måste åtgärdas innan du kan spara.
Uppdatera ändå, även om det kan förstöra din webbplats?
Är detta något jag borde oroa mig för?
texten i rutan nedanför lyder...
och precis här finns en röd punkt
Hoppas någon kan hjälpa.
Tack
WPBeginner Support
Hej Rebecca,
Du kan kopiera CSS:en och klistra in den i en textfil och spara den som en säkerhetskopia. Ta nu bort allt i rutan Ytterligare CSS och börja lägga till din anpassade CSS en regel i taget tills felet dyker upp igen. Detta hjälper dig att lokalisera felet och åtgärda det.
Admin
James
Detta fungerar inte längre för gratis konton. CSS-alternativet finns inte längre där och du behöver ett företagskonto för att installera ett relevant plugin.
WPBeginner Support
Hej James,
Du använder förmodligen WordPress.com. Se vår guide om skillnaden mellan självhostad WordPress.org vs gratis WordPress.com-blogg.
Admin
scott
Före WP-version 4.9 brukade jag kunna klippa och klistra in min anpassade CSS (från WP-anpassaren) och klistra in den i Windows Anteckningar (och den skulle behålla formateringen. Jag gjorde detta ofta för att spara den som en säkerhetskopia när jag lade till ny anpassad CSS – ifall jag gjorde ett misstag.
Nu när jag klistrar in det i Anteckningar, körs all CSS bara ihop utan rad-för-rad-formatering i Anteckningar.
Har du någon aning om varför eller hur jag kan fixa det? Jag har redan "radbrytning" inställt i Anteckningar.
Tack.
WPBeginner Support
Hej Scott,
Du kan försöka spara koden i andra textredigerare som Notepad++. Om problemet kvarstår, prova sedan felsökningstips för WordPress.
Admin
Joe MacMillan
Den här webbplatsen är riktigt bra. Min webbplats hade inga länkar färger så jag använde den här koden /* o-besökta länkar blå */
a:link {
Färg: #196380;
}
/* besökt länk grön */
a:visited { color: #248f24; }
/* muspekare över länk orange */
a:hover { color: #ff3300; }
/* vald länk röd*/
a:active {
color: #cc0000;
}
men det ändrade färger för allt som är en länk, till exempel menyer, till en färg.
Jag vill bara ha färgerna för länkning.
Jag skulle uppskatta all hjälp med detta. Tack
WPBeginner Support
Hej Joe,
I din CSS har du inte definierat vilka områden som ska ha länkar i dessa färger, vilket gör att de tillämpas på hela kroppen. För att ta reda på vilka områden du behöver rikta in dig på måste du använda Inspektera element-verktyget för att ta reda på vilken CSS-klass som används av ditt tema för innehållsblocket.
Låt oss anta att innehållsblocket i ditt tema har en CSS-klass site-content, du kommer att använda den i din CSS så här:
.site-content a:link { color: #196380; } .site-content a:visited { color: #248f24; } .site-content a:active { color: #cc0000; } .site-content a:hover { color: #ff3300; }1-click Use in WordPress
Hope this helps
Admin
Rob
Jag älskar din webbplats!
Tack för alla hjälpsamma artiklar.
Jag har en fråga angående min WordPress premiumplan.
Jag vill lägga till följande skript på min webbplats.
var refTagger = { settings: { bibleVersion: “NKJV” }
Kan jag lägga till detta i den anpassade CSS:en?
Jag har inte möjlighet att komma åt sidhuvudet eller sidfoten i den här planen
Tack,
Rob
WPBeginner Support
Hej Rob,
Nej, det kan du inte. Se vår guide om skillnaden mellan självhostad WordPress.org vs gratis WordPress.com-blogg.
Admin
sammy
det här är verkligen en bra artikel, jag måste börja lära mig hur jag gör min egen css för min webbplats
Thomas
Hej,
den här funktionen är inte aktiv för webbplatsadministratören i ett multisite WordPress-nätverk.
Tror du att aktivering av den för webbplatsadministratören (med det här pluginet till exempel:) skulle skapa en säkerhetsrisk?
Tack!
WPBeginner Support
Hej Thomas,
Ja, du kan använda ett plugin för att lägga till anpassad CSS.
Admin
Thomas
Hej,
ja jag vet (jag har redan använt den mycket bra Simple Custom CSS-pluginen), men jag skulle föredra att använda den inbyggda funktionen eftersom den är implementerad i Wordpress.
Denna funktion är dock endast tillgänglig för nätverksadministratören och inte för webbplatsadministratören på en multisite-installation.
Rättigheterna kan enkelt ändras för att tillåta webbplatsadministratören att lägga till sin egen anpassade CSS i anpassaren (med den inbyggda WP-funktionen) (se denna plugin: http://www.wordpress.org/plugins/multisite-custom-css/), och jag undrar om detta skulle skapa en säkerhetsrisk (baserat på antagandet att jag inte kan lita på webbplatsadministratören)?
WPBeginner Support
Hej Thomas,
Sorry, we totally misunderstood your question
Vi håller med om att det kommer att vara ett problem, därför är funktionen avstängd. Om du slår på den, kommer användarna att kunna lägga till ofiltrerad CSS. Du bör hålla den avstängd.
Brice
Jag kan inte mycket om kod så jag undrar bara om jag gör ändringar och klickar på "spara och publicera", finns det ett sätt att få tillbaka den ursprungliga koden om jag inte gillar ändringarna eller behöver jag kopiera och spara den ursprungliga koden om jag vill återställa den?
Ruth Billheimer
This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed
Jos Schuurmans
Hej där,
Det var tidigare möjligt att redigera style.css inifrån WP-admin, under menyn Utseende.
På WP multisite skedde det via nätverkets temameny. Har den funktionen tagits bort?
Skål,
Jos
Judy
Bra inlägg, tack!
Kan någon hjälpa mig med detta? Jag gjorde en liten anpassning av min logotyp med CSS Hero. Sedan kopierade jag exakt dessa 9 kodrader till mitt Simple Custom CSS-plugin, efter att ha inaktiverat CSS Hero. Jag trodde att jag kunde återskapa samma CSS Hero-anpassning på min logotyp med Simple Custom CSS, men istället fungerar det inte.
Jag uppdaterade sidan och rensade cachen, men anpassningen har fortfarande ingen effekt. Varför är det så?
Tack,
Judy
Robin
Det här är allt som finns i mitt CSS-stilark. /* Välkommen till anpassad CSS
För att lära dig hur detta fungerar, se
*/
Ska jag radera hans och lägga till min nya fontkod? Hjälp????
WPBeginner Support
Ja. Dessa är bara kommentarer för att hjälpa nya användare att komma igång.
Admin
Paul H.
UTROLIGT PLUGIN!!!
Jag spenderade mycket tid på att försöka få den inbyggda WP-redigeraren att "styla" min anpassade sida, utan framgång...
Jag sökte efter ett plugin för att se om det fanns ett och hittade ditt… inom några minuter hade jag installerat ditt plugin och aktiverat det, sedan matat in min CSS, klickat på uppdatera och sedan uppdaterat min anpassade sida… det är perfekt!
A+++
Ian
Hej alla,
Jag har installerat pluginet Simple custom CSS och aktiverat det. Jag har en tabell skapad på en av mina webbsidor som jag ville ha en kant runt.
Som ett resultat har jag lagt till följande kod i mitt enkla anpassade CSS-plugin
tabell { kant: 2px solid svart; }
och uppdaterade den anpassade CSS:en men ingenting hände – jag får fortfarande ingen kant på min webbsidetabell.
Några förslag?
Med vänliga hälsningar
Ian
Molly Setzer
Hej Ian,
Det är troligt att du inte anropar det med rätt CSS-selektor. Använd den mest definierade selektorn för att greppa elementet. Till exempel, om din tabell har en klass som heter "info", så hjälper det dig att nå elementet genom att anropa det med den mer specifika table.info. Kontrollera om den har fler selektorer i HTML.
ramneet
Tack för att du delade. Det är ett underbart sätt att lära sig WordPress, jag gillar det.
Estee Peter
Hur lägger jag till anpassad CSS via min befintliga specifika webbplatsplugin
detta är följande kod
.mobileonly { display: none; }
@media screen and (max-width: 480px) {
.mobileonly {
display: inline;
}
}
.hidemobileonly { display: inline; }
@media screen and (max-width: 480px) {
.hidemobileonly {
display: none;
}
}
Gary Zielke
Fungerar Custom CSS-pluginet på enskilda sidor.
alltså kan jag lägga till stil på en enda sida och inte hela temat?
Tack
WPBeginner Support
Nej, det fungerar inte på enskilda sidor.
Admin
Tori Tran
tack ^^
Russell Bruce
Skulle det inte vara användbart att förklara vad CSS gör och varför det är användbart
Joey
Tack, jag önskar att jag hade insett detta tidigare eftersom jag har gjort alla mina CSS-ändringar i filen style.css eftersom jag gör ändringarna lokalt, men menar du att om Genesis av någon anledning bestämmer sig för att uppdatera det specifika barntemat jag använde så kommer jag att förlora dessa ändringar? Jag vet inte om jag någonsin har sett dem uppdatera sina barnteman, även om jag bara har använt Genesis i några månader, så jag antar att det är helt möjligt att de kommer att uppdatera vissa här och där. Jag tror att framöver kommer jag att göra mina ändringar i pluginet, särskilt om webbplatsen är live.
suzie
Använd det tema du gillar och skapa ett 'barn-tema'
Barn-temat är sedan unikt för din webbplats.
Gör alla ändringar endast på ditt barn-tema.
Temadesignern kan uppdatera sitt tema, men dina ändringar kommer att finnas kvar. (Beroende på designerns uppdatering kan du behöva justera dina ändringar, men det är osannolikt).
Rodney
Bra artikel.
Jag ville bara lägga till här. Det finns många alternativ här, särskilt för webbplatser som körs i WordPress, att bygga/skapa anpassad CSS är enkelt. De flesta WordPress-teman stöder vanligtvis att lägga till anpassad CSS utan att behöva skapa eller lägga till ytterligare plugins.
Jag håller också med, och det bästa alternativet här är att använda ett barntema istället.
tack