Vad \u00e4r CSS-redigering?<\/h2>\n
CSS st\u00e5r f\u00f6r Cascading Style Sheets och det \u00e4r det mest popul\u00e4ra webbspr\u00e5ket f\u00f6rutom HTML<\/a>. Dessa tv\u00e5 spr\u00e5k g\u00e5r hand i hand, eftersom CSS anv\u00e4nds f\u00f6r att styla HTML-element<\/a>. HTML l\u00e4gger grunden f\u00f6r en webbplats utseende och CSS anv\u00e4nds f\u00f6r att utforma den ytterligare.<\/p>\n CSS ger dig m\u00f6jligheten att g\u00f6ra en webbplats responsiv<\/a>, l\u00e4gga till f\u00e4rger, \u00e4ndra teckensnitt<\/a>, \u00e4ndra layouten och finjustera en webbplats visuella presentation. Precis som HTML och JavaScript, \u00e4r CSS ett frontend-spr\u00e5k f\u00f6r klientsidan, vilket inneb\u00e4r att det k\u00f6rs hos anv\u00e4ndaren, snarare \u00e4n p\u00e5 backend-servern.<\/p>\n N\u00e4r du djupdyker i WordPress-utveckling \u00e4r HTML, CSS, JavaScript och PHP<\/a> de spr\u00e5k du beh\u00f6ver k\u00e4nna till. Detta \u00e4r vad k\u00e4rnans CMS<\/a>\u00a0\u00e4r byggt av, liksom dess m\u00e5nga teman<\/a> och plugins<\/a>.<\/p>\n Men \u00e4ven om du inte \u00e4r en webbdesigner<\/a> eller utvecklare, \u00e4r det bra att l\u00e4ra sig lite<\/a> CSS. Du kan anv\u00e4nda detta f\u00f6r att flytta eller styla element p\u00e5 din webbplats, eller f\u00f6r att g\u00f6ra sm\u00e5 estetiska f\u00f6r\u00e4ndringar i ditt tema.<\/p>\n\n Inom WordPress \u00e4r CSS lite annorlunda. Det styrs av teman,<\/a> som best\u00e5r av mallfiler, malltaggar och naturligtvis CSS-stylesheet. Men \u00e4ven om det genereras av ditt tema, kan du redigera allt du vill.<\/p>\n Mallfiler<\/a> delar upp din webbplats i sektioner (exempelvis header.php eller archive.php).Mall-taggar<\/a> anv\u00e4nds f\u00f6r att anropa dem och annat inneh\u00e5ll fr\u00e5n din databas. Dessa filer best\u00e5r mestadels av PHP och HTML, men du kan l\u00e4gga till CSS om du vill.<\/p>\n Den viktigaste saken att kolla upp \u00e4r stylesheet<\/a>, eller style.css. Om du vill \u00e4ndra hur webbplatsen ser ut m\u00e5ste du l\u00e4sa om hur du l\u00e4gger till och redigerar kod i den h\u00e4r<\/a>\u00a0filen.<\/p>\n Om du vill anpassa ditt tema<\/a> och \u00e4ndra hur webbplatsen ser ut med CSS m\u00e5ste du antingen l\u00e4gga till din egen kod eller redigera det som redan finns d\u00e4r. Det finns s\u00e4tt att l\u00e4gga till CSS utan att du n\u00e5gonsin beh\u00f6ver r\u00f6ra n\u00e5gra temafiler men f\u00f6r att \u00e4ndra befintliga temakod, m\u00e5ste du komma \u00e5t webbplatsens stylesheet.<\/p>\n N\u00e4r du g\u00f6r dessa \u00e4ndringar, finns det en sak som du b\u00f6r veta: n\u00e4r ditt tema uppdateras<\/a>, kommer alla redigeringar som du har gjort i style.css<\/em>, functions.php<\/em> eller andra tema-mallfiler att raderas. Generellt b\u00f6r du inte g\u00f6ra direkta \u00e4ndringar p\u00e5 din webbplats i redigeraren utan att anv\u00e4nda ett barntema<\/a>.<\/p>\n Stylesheet \u00e4r som en ”lista med instruktioner” f\u00f6r din webbplats, med inst\u00e4llningar exakt f\u00f6r hur den \u00e4r stylad och hur CSS-koden hanteras. Det \u00e4r h\u00e4r du ska g\u00f6ra huvuddelen av din redigering, men vi kommer \u00e4ven att visa dig hur du f\u00e5r tillg\u00e5ng till andra tema-mallfiler, s\u00e5som header.php och footer.php<\/a>.<\/p>\n Det finns tv\u00e5 s\u00e4tt att komma \u00e5t din WordPress-webbplats stylesheet: via WordPress instrumentpanel<\/a> eller via en FTP-klient<\/a>. Vi kommer att g\u00e5 igenom b\u00e5da s\u00e4tten.<\/p>\n K\u00e4nner du dig inte bekv\u00e4m med att g\u00f6ra det h\u00e4r sj\u00e4lv? \u00d6verv\u00e4g d\u00e5 att anlita en WordPress-utvecklare<\/a> f\u00f6r att hantera detta \u00e5t dig.<\/p>\n Det enklaste och bekv\u00e4maste s\u00e4ttet f\u00f6r att komma \u00e5t din CSS stylesheet \u00e4r i WordPress instrumentpanel. D\u00e5 slipper du installera FTP-program eller kodredigerare<\/a>. Du kan direkt redigera valfri fil med inbyggd syntaxmarkering och funktionsdokumentation.<\/p>\n Innan du g\u00f6r n\u00e5gra st\u00f6rre redigeringar av k\u00e4rnfiler, b\u00f6r du alltid s\u00e4kerhetskopiera din WordPress-webbplats<\/a>. Det \u00e4r v\u00e4ldigt l\u00e4tt h\u00e4nt att man g\u00f6r ett misstag som f\u00e5r webbplatsen att krascha om man \u00e4r nyb\u00f6rjare p\u00e5 CSS. Det kan dessutom vara sv\u00e5rt att r\u00e4kna ut hur man f\u00e5r allting att fungera igen.<\/p>\n N\u00e4r du har gjort en s\u00e4kerhetskopia och ett barntema loggar du in i din backend. Du hittar redigeraren genom att g\u00e5 till menyn och klicka p\u00e5 Utseende > Temaredigerare<\/em>.<\/p>\n Det b\u00f6r komma en popup-varning som varnar om faran med att g\u00f6ra direkta redigeringar av dessa filer. Klicka bara p\u00e5 ”Jag f\u00f6rst\u00e5r”. Detta \u00e4r bara ett meddelande om att du ska anv\u00e4nda ett barntema och s\u00e4kerhetskopiera din webbplats innan du g\u00f6r n\u00e5gra st\u00f6rre \u00e4ndringar. Om du g\u00f6r detta, \u00e4r det s\u00e4kert att redigera.<\/p>\n Nu \u00e4r du ig\u00e5ng! Du b\u00f6r vara p\u00e5 stylesheet som standard men titta i menyn till h\u00f6ger f\u00f6r att visa dina temafiler om du mot all f\u00f6rmodan inte \u00e4r det.<\/p>\n F\u00f6rutom style.css, har du \u00e4ven tillg\u00e5ng till mallfiler som functions.php, header.php, och single.php. Alla dessa p\u00e5verkar hur vissa sidor p\u00e5 din webbplats agerar.<\/p>\n Men du b\u00f6r bekanta dig med PHP<\/a> innan du mixtrar med dessa filer.<\/p>\n Kom bara ih\u00e5g: De flesta CSS-\u00e4ndringar du g\u00f6r h\u00e4r kommer att vara globala. Om du exempelvis \u00e4ndrar dina H1-rubriker till ett visst teckensnitt, g\u00e4ller detta f\u00f6r varenda sida p\u00e5 webbplatsen. Du m\u00e5ste anv\u00e4nda en s\u00e4rskild syntax f\u00f6r att anpassa specifika sidors styling.<\/p>\n Vad h\u00e4nder om du inte kan komma \u00e5t Tema-redigeraren eller f\u00f6redrar att g\u00f6ra ditt arbete \u00f6ver FTP? Det \u00e4r enklare att anv\u00e4nda backend-redigeraren, men vissa teman eller plugins kan inaktivera den. Om s\u00e5 \u00e4r fallet m\u00e5ste du ansluta till din webbplats via FTP<\/a>.<\/p>\n FTP, eller File Transfer Protocol, l\u00e5ter dig f\u00e5 fj\u00e4rr\u00e5tkomst f\u00f6r att \u00e4ndra en webbplats filer. Det f\u00f6rsta du beh\u00f6ver g\u00f6ra \u00e4r att ladda ner FileZilla eller n\u00e5gon<\/a>\u00a0annan FTP-klient.<\/p>\n D\u00e4refter b\u00f6r du kontakta din host och be om dina FTP-autentiseringsuppgifter (host, port och anv\u00e4ndarnamn\/l\u00f6senord om till\u00e4mpligt). Om din host har en instrumentpanel kanske du kan hitta dessa uppgifter genom att logga in.<\/p>\n Kinsta-anv\u00e4ndarnas autentiseringsuppgifter finns i mykinsta\u00b4s instrumentpanel<\/a> under Platser > SFTP\/SSH<\/em>.<\/p>\n N\u00e4r du har dessa uppgifter, ska du starta din FTP-klient och ange den informationen. Om det inte fungerar kan du prova att s\u00e4tta sftp:\/\/ ””f\u00f6re webbadressen i avsnittet<\/em>\u00a0Host.<\/p>\n N\u00e4r du v\u00e4l \u00e4r inne, kan du hitta din style.css-fil genom att klicka p\u00e5 wp-content<\/em> mappen f\u00f6r att \u00f6ppna den. \u00d6ppna sedan ditt temas mapp (som med Twenty Twenty\u00b4s<\/em> tema),<\/a> scrolla sedan tills du ser style.css.<\/p>\n Dubbelklicka f\u00f6r att \u00f6ppna den (eller h\u00f6gerklicka och v\u00e4lj Visa\/Redigera<\/em>) och g\u00f6r dina modifieringar. Kom ih\u00e5g att spara och ladda upp tillbaka till servern.<\/p>\n Om du beh\u00f6ver redigera andra mallfiler<\/a> som home.php, single.php eller archive.php, kan du hitta dem i samma mapp som style.css.<\/p>\n Det \u00e4r inte alltid<\/a> n\u00f6dv\u00e4ndigt att redigera dina temafiler, vare sig det \u00e4r via FTP eller instrumentpanelen. I sj\u00e4lva verket \u00e4r det b\u00e4st att undvika att g\u00f6ra detta om du bara l\u00e4gger till lite extra kod.<\/p>\n F\u00f6r sm\u00e5 till\u00e4gg, \u00e4r detta det b\u00e4sta s\u00e4ttet att l\u00e4gga till CSS till din WordPress- webbplats.<\/p>\n Du kanske inte \u00e4r ute efter att redigera den befintliga CSS-koden, utan vill l\u00e4gga till din egen styling ist\u00e4llet? I s\u00e5 fall f\u00f6resl\u00e5r vi att du anv\u00e4nder en av f\u00f6ljande metoder: WordPress-anpassare eller ett dedikerat plugin.<\/p>\n Om CSS-koden l\u00e4ggs till genom en av dessa metoder \u00e4r det mycket l\u00e4ttare att komma \u00e5t och anv\u00e4nda den. Du beh\u00f6ver inte oroa dig f\u00f6r att din nya CSS hamnar p\u00e5 fel plats eller att du gl\u00f6mmer var du har lagt till den om du vill g\u00f6ra \u00e4ndringar senare.<\/p>\n Dessutom kommer CSS som l\u00e4ggs till genom en av dessa metoder inte att f\u00f6rsvinna n\u00e4r ditt tema uppdateras (\u00e4ven om det fortfarande kan f\u00f6rsvinna om du \u00e4ndrar teman<\/a>).<\/p>\n Detta inneb\u00e4r att du inte beh\u00f6ver anv\u00e4nda ett barntema. Om n\u00e5got kraschar, \u00e4r allt du beh\u00f6ver g\u00f6ra att ta bort den CSS du just har lagt till.<\/p>\n Notera att du fortfarande b\u00f6r ha en s\u00e4kerhetskopia av din webbplats<\/a>. Vissa m\u00e4nniskor har n\u00e4mligen rapporterat att de ibland f\u00f6rlorar sina CSS under st\u00f6rre uppdateringar. \u00c4nd\u00e5 \u00e4r denna metod mycket mer tillf\u00f6rlitlig \u00e4n direkt redigering av temafiler.<\/p>\n Du kan tyv\u00e4rr bara l\u00e4gga till kod till style.css, inget mer. Vill du inte skapa ett barntema, g\u00f6ra stora<\/a> redigeringar till befintlig CSS i ditt tema, med risken f\u00f6r att allt ditt arbete raderas? D\u00e5 \u00e4r det b\u00e4st att du antingen anv\u00e4nder ytterligare CSS-alternativ i WordPress customizer eller installerar en plugin.<\/p>\n I st\u00e4llet f\u00f6r att anv\u00e4nda Temaredigeraren kan du pr\u00f6va detta.\u00a0Logga in p\u00e5 din WordPress-backend<\/a> och klicka p\u00e5 \u00a0Utseende > Anpassa f\u00f6r<\/em> att \u00f6ppna sk\u00e4rmen f\u00f6r anpassning av temat. Du kommer direkt att se en f\u00f6rhandsvisning av din webbplats, med alternativ till v\u00e4nster f\u00f6r att anpassa element som f\u00e4rgerna, menyerna eller andra widgetar .<\/p>\n L\u00e4ngst ner p\u00e5 den h\u00e4r menyn b\u00f6r du hitta rutan Ytterligare CSS.<\/em><\/a><\/p>\n Klicka f\u00f6r att \u00f6ppna den. Du kommer d\u00e5 till en ny sk\u00e4rm med en kodinmatningsruta och n\u00e5gra instruktioner. P\u00e5 sk\u00e4rmen Ytterligare CSS ing\u00e5r syntaxmarkering, precis som hos Temaredigeraren, tillsammans med validering som l\u00e5ter dig veta om din kod \u00e4r fel.<\/p>\n All kod du skriver in visas automatiskt i f\u00f6rhandsgranskningsomr\u00e5det till h\u00f6ger om den inte inneh\u00e5ller fel ( du kan dock v\u00e4lja att publicera \u00e4nd\u00e5).<\/p>\n N\u00e4r du har arbetat klart kan du publicera koden, schemal\u00e4gga n\u00e4r den ska b\u00f6rja g\u00e4lla eller spara den som ett utkast f\u00f6r att arbeta med den senare. Du kan \u00e4ven f\u00e5 en f\u00f6rhandsgransknings-l\u00e4nk som du kan dela med andra.<\/p>\n Som du ser \u00e4r sidan Ytterligare CSS p\u00e5 m\u00e5nga s\u00e4tt mer kraftfull \u00e4n Temaredigeraren. Det \u00e4r mycket b\u00e4ttre att l\u00e4gga till kod d\u00e4r \u00e4n att mixtra med k\u00e4rnfiler.<\/p>\n Den CSS-kod du skriver h\u00e4r skriver \u00f6ver standard-stylingen av ditt tema och f\u00f6rsvinner inte n\u00e4r ditt tema uppdateras. Om du inte kan se den ”live” p\u00e5 din f\u00f6rhandsgranskning ska du dubbelkolla att du anv\u00e4nder r\u00e4tt selectors i din CSS-kod.<\/p>\n Precis som med temaredigeraren \u00e4r CSS globalt som standard, men du kan \u00e4ven skriva kod som riktar sig till specifika sidor<\/a>.<\/p>\n Nackdelen \u00e4r att, om du byter teman, kommer allt som du skrivit att<\/a> raderas. Se till att du s\u00e4kerhetskopierar din CSS innan du byter till ett nytt tema, annars kan du f\u00f6rlora en hel del arbete.<\/p>\n Om du st\u00f6ter p\u00e5 problem med det h\u00e4r alternativet, eller vill ha en l\u00f6sning som fungerar p\u00e5 alla teman och l\u00e4ttare kan rikta vissa sidor, b\u00f6r du prova en plugin ist\u00e4llet.<\/p>\n Det finns n\u00e5gra anledningar till att du kanske b\u00f6r anv\u00e4nda en plugin f\u00f6r att l\u00e4gga till CSS till WordPress. Detta liknar visserligen den ytterligare CSS-menyn, men stylingen kommer oftast finnas kvar \u00e4ven om du v\u00e4xlar \/ uppdaterar teman.<\/p>\n Du kanske \u00e4ven gillar deras UI, eller de extra funktionerna som exempelvis automatisk komplettering. Vissa plugins l\u00e5ter dig \u00e4ven bygga CSS genom rullgardins- menyer<\/a>, ist\u00e4llet f\u00f6r att du beh\u00f6ver skriva en s\u00e5dan sj\u00e4lv.<\/p>\n Simple Custom CSS<\/a> \u00e4r det mest popul\u00e4ra pluginet f\u00f6r CSS-redigering. Detta beror p\u00e5 dess anv\u00e4ndarv\u00e4nlighet, dess minimala gr\u00e4nssnitt, och enkla backend. Det \u00e4r me andra ord ett mycket litet WordPress-plugin som klarar mycket.<\/p>\n Inst\u00e4llningen av detta plugin \u00e4r v\u00e4ldigt enkelt och det uppst\u00e5r ingen negativ inverkan p\u00e5 prestandan<\/a>. Det fungerar p\u00e5 vilket tema som helst och inkluderar syntaxmarkering och felkontroll.<\/p>\n Simple Custom CSS and JS<\/a> \u00e4r ett bra alternativ. Det l\u00e5ter dig \u00e4ven rikta sidhuvudet, sidfoten, frontend, och till och med admin-backend.<\/p>\n SiteOrigin CSS<\/a> \u00e4r ett annat alternativ som \u00e4ven inneh\u00e5ller en traditionell CSS-redigerare. Du kan v\u00e4xla mellan den och den visuella redigeraren n\u00e4r<\/a> som helst.<\/p>\n Om du k\u00e4mpar f\u00f6r att l\u00e4gga till CSS p\u00e5 specifika sidor kan du andas ut. WP Add Custom CSS<\/a> l\u00e4gger till en anpassad CSS-ruta p\u00e5 redigeringssk\u00e4rmen, och innefattar \u00e4ven global styling.<\/p>\n Du kanske \u00e4ven vill \u00f6verv\u00e4ga att prova en visuell CSS-redigerare. D\u00e5 slipper du all komplicerad kodning och kan ist\u00e4llet jobba med inmatningsf\u00e4lt och rullgardins- menyer som hanterar alla programmering \u00e5t dig.<\/p>\n CSS Hero<\/a> \u00e4r ett premium visuellt redigerings-plugin med n\u00e5gra v\u00e4ldigt kraftfulla funktioner (animation, enhetsspecifika redigeringar, och icke-f\u00f6rst\u00f6rande redigering f\u00f6r att n\u00e4mna n\u00e5gra).<\/p>\n Redo att f\u00f6rdjupa dig \u00e4nnu mer i CSS? Dessa nyb\u00f6rjar-tutorials kommer att fastst\u00e4lla grunderna och l\u00e4ra dig den syntax som du beh\u00f6ver veta f\u00f6r att skriva din egen funktionella CSS-kod.<\/p>\n Detta kan vara skr\u00e4mmande, men om du inte f\u00f6rs\u00f6ker g\u00f6ra n\u00e5got riktigt avancerat, \u00e4r CSS inte alltf\u00f6r sv\u00e5rt! Enkla saker som att \u00e4ndra bakgrundsf\u00e4rg eller inst\u00e4llning av teckensnitt<\/a> \u00e4r ganska simpelt, och det finns gott om exempel p\u00e5 n\u00e4tet.<\/p>\n (F\u00f6rslag p\u00e5 l\u00e4sning: 50 + Moderna teckensnitt att anv\u00e4nda p\u00e5 din WordPress-sajt<\/a>)<\/p>\n De flesta programmering-tutorials<\/a> som du hittar p\u00e5 internet \u00e4r \u00e4ven dem helt kostnadsfria. Faktum \u00e4r att det finns gott om kostnadsfri information<\/a> d\u00e4r ute.<\/p>\n H\u00e4r \u00e4r n\u00e5gra exempel som g\u00e5r igenom b\u00e4st CSS-tutorials f\u00f6r nyb\u00f6rjare.<\/p>\n M\u00e5nga WordPress-anv\u00e4ndare tycker nog att CSS kan vara f\u00f6rvirrande. Men n\u00e4r du vet hur du redigerar dina temafiler och var du ska l\u00e4gga till styling, b\u00f6r du inte m\u00f6ta fler problem.<\/p>\n Temafiler kan redigeras antingen fr\u00e5n din backend eller via FTP f\u00f6r att \u00e4ndra webbplatsens utseende, men detta b\u00f6r vanligtvis undvikas om du inte beh\u00f6ver redigera den befintliga koden.<\/p>\n Om du bara vill l\u00e4gga till din egen CSS, anv\u00e4nd sidan Ytterligare CSS under Utseende > Anpassa<\/em>, eller prova ett plugin om du beh\u00f6ver n\u00e5got mer kraftfullt.<\/p>\n Redigeringar av ditt stylesheet<\/a> kommer att g\u00e5 f\u00f6rlorade vid temauppdateringen om du inte anv\u00e4nder ett barntema<\/a>. Detta g\u00e4ller inte f\u00f6r Ytterligare CSS. Din kod \u00e4r s\u00e4ker \u00e4ven efter uppdateringar men kom ih\u00e5g: Endast ett plugin kommer att beh\u00e5lla CSS n\u00e4r du \u00e4ndrar teman<\/a>.<\/p>\n![\"Exempel](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/exempel-pa-css-kod.png\")
WordPress och CSS<\/h2>\n
Hur du kan anpassa ditt WordPress-tema med CSS<\/h2>\n
Redigera WordPress CSS i instrumentpanelen<\/h3>\n
![\"G\u00f6ra](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/gora-direkta-redigeringar-i-wordpress-filer.png\")
Redigera temafiler direkt<\/h3>\n
![\"FTP-autentiseringsuppgifter](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/ftp-autentiseringsuppgifter-i-mykinsta.png\")
![\"FileZilla\"](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/anvanda-filezilla.png\")
Hur man l\u00e4gger till egna CSS i WordPress<\/h2>\n
1. Redigera CSS genom WordPress Customizer<\/h3>\n
![\"Ytterligare](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/ytterligare-css-i-wordpress.png\")
2. L\u00e4gga till anpassad CSS till WordPress genom att anv\u00e4nda Plugins<\/h3>\n
Simple Custom CSS<\/h4>\n
![\"Simple](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/simple-custom-css-wordpress-plugin.jpg\")
Simple Custom CSS och JS<\/h4>\n
![\"Simple](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/simple-custom-css-and-js.jpg\")
SiteOrigin CSS<\/h4>\n
![\"SiteOrigin](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/siteorigin-css-wordpress-plugin.jpg\")
WP Add Custom CSS<\/h4>\n
![\"WP](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/wp-add-custom-css-wordpress-plugin.jpg\")
CSS Hero<\/h4>\n
![\"CSS](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/css-hero.png\")
Var kan man l\u00e4ra sig CSS<\/h2>\n
![\"](\"https:\/\/kinsta.com\/se\/wp-content\/uploads\/sites\/9\/2020\/09\/learn-css.png\")
\n
Sammanfattning<\/h2>\n