\u00c4ven om det kan vara en utmaning att skriva din egen CSS fr\u00e5n b\u00f6rjan, b\u00f6r det vara enkelt att l\u00e4gga till f\u00f6rskrivna utdrag.<\/p>\n
I den h\u00e4r handledningen l\u00e4r du dig det enklaste och b\u00e4sta s\u00e4ttet att l\u00e4gga till anpassad CSS p\u00e5 din webbplats s\u00e5 att du kan \u00e4ndra stilarna i ditt WordPress-tema.<\/p>\n
Hur man l\u00e4gger till anpassad CSS<\/h2>\n
Tidigare rekommenderade jag Simple Custom CSS-<\/a> plugin, men du beh\u00f6ver inte l\u00e4ngre en plugin f\u00f6r att l\u00e4gga till CSS p\u00e5 din webbplats.<\/p>\n Ist\u00e4llet kan du anv\u00e4nda det inbyggda avsnittet Ytterligare CSS i Customizer. F\u00f6r att komma \u00e5t den h\u00e4r funktionen, b\u00f6rja med att klicka p\u00e5 menyalternativet Anpassa som finns under Utseende.<\/p>\n \u00d6ppna sedan avsnittet Ytterligare CSS, som b\u00f6r finnas n\u00e4ra botten av Customizer-panelen.<\/p>\n Inuti kan du helt enkelt klistra in den CSS du beh\u00f6ver l\u00e4gga till p\u00e5 din webbplats.<\/p>\n Det som \u00e4r bra med Extra CSS-funktionen \u00e4r att du f\u00e5r en livef\u00f6rhandsvisning av hur den kommer att p\u00e5verka din webbplats. F\u00f6rhandsgranskningen uppdateras omedelbart och bes\u00f6kare kommer inte att se dina \u00e4ndringar f\u00f6rr\u00e4n du klickar p\u00e5 knappen Publicera h\u00f6gst upp.<\/p>\n M\u00e5nga WordPress-anv\u00e4ndare frestas att redigera temats stilmall direkt via Temaredigeringsmenyn.<\/p>\n G\u00f6r aldrig det h\u00e4r.<\/strong><\/p>\n Det st\u00f6rsta problemet med att g\u00f6ra \u00e4ndringar p\u00e5 det h\u00e4r s\u00e4ttet \u00e4r att allt ditt h\u00e5rda arbete kommer att g\u00e5 f\u00f6rlorat n\u00e4r du uppdaterar temat. Om du till exempel anv\u00e4nder Mission News<\/a> version 1.38 och imorgon 1.39 kommer ut, kopierar uppdateringsprocessen alla nya filer \u00f6ver de gamla filerna. Temat kommer definitivt inte att inneh\u00e5lla samma anpassningar som du har gjort, och s\u00e5 kommer de att g\u00e5 f\u00f6rlorade permanent (s\u00e5vida du inte har en ny s\u00e4kerhetskopia<\/a> ).<\/p>\n Detta kan undvikas genom att anv\u00e4nda avsnittet Ytterligare CSS i Customizer, som inte p\u00e5verkas av temauppdateringar.<\/p>\n Den enda utmaningen med Extra CSS-funktionen \u00e4r att det ibland kan vara lite sv\u00e5rare att f\u00e5 din CSS att tr\u00e4da i kraft.<\/p>\n Utan att hamna i ogr\u00e4set anv\u00e4nder CSS ett specificitetssystem f\u00f6r<\/a> att avg\u00f6ra vilka stilregler som \u00e5sidos\u00e4tter varandra.<\/p>\n Ett s\u00e4tt att garantera att dina stilar \u00e5sidos\u00e4tter temats stilar \u00e4r att anv\u00e4nda en Ta detta CSS-utdrag till exempel:<\/p>\n I alla v\u00e5ra teman<\/a> skulle den koden g\u00f6ra webbplatsens titel 28px. Om du inte ser n\u00e5gra \u00e4ndringar efter att ha implementerat den h\u00e4r koden, f\u00f6rs\u00f6k att l\u00e4gga till Med den uppdateringen \u00e4r koden i princip garanterad att tr\u00e4da i kraft s\u00e5 l\u00e4nge den \u00e4r inriktad p\u00e5 r\u00e4tt v\u00e4ljare. F\u00f6rs\u00f6k bara att reservera detta f\u00f6r speciella tillf\u00e4llen, eftersom att anv\u00e4nda det dussintals g\u00e5nger i din kod kan g\u00f6ra det sv\u00e5rare att \u00e5sidos\u00e4tta stilar i framtiden.<\/p>\n Ett vanligt problem som anv\u00e4ndare m\u00f6ter n\u00e4r de anv\u00e4nder den h\u00e4r funktionen \u00e4r att deras kod kommer att fungera n\u00e4r de anv\u00e4nder Live Customizer, men n\u00e4r de v\u00e4l ser webbplatsen normalt visas inte \u00e4ndringarna.<\/p>\n Detta beror n\u00e4stan alltid p\u00e5 cachning, och jag t\u00e4cker l\u00f6sningen i detalj h\u00e4r:<\/p>\n Hur man \u00e5tg\u00e4rdar WordPress-\u00e4ndringar som inte visas<\/a><\/p>\n Det borde bara ta en minut eller tv\u00e5 att reda ut saker.<\/p>\n \u00c4ven om du inte har n\u00e5gon aning om hur du skriver din egen CSS, g\u00f6r funktionen Extra CSS det enkelt att klistra in kod p\u00e5 din webbplats.<\/p>\n Om du vill l\u00e4ra dig mer om att anpassa WordPress-teman med CSS, skulle jag rekommendera min guide f\u00f6r att hitta CSS-v\u00e4ljare<\/a> h\u00e4rn\u00e4st.<\/p>\n Och om du tyckte om att l\u00e4ra dig n\u00e5got nytt om WordPress idag kanske du gillar min gratis e-postkurs:<\/p>\n![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4c6d6cd.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e4f0f93d.png\")
<\/a><\/p>\n![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e510ba49.png\")
<\/a><\/p>\nVarf\u00f6r du aldrig ska redigera style.css<\/h2>\n
![\"Hur](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-185827-61701e5335117.png\")
<\/a><\/p>\nTips f\u00f6r att f\u00e5 din anpassade CSS att fungera<\/h3>\n
!important<\/code>tagg.<\/p>\n.site-title {\n font-size: 28px;\n}<\/code><\/pre>\n!important<\/code>taggen, s\u00e5 h\u00e4r:<\/p>\n.site-title {\n font-size: 28px !important;\n}<\/code><\/pre>\nVad h\u00e4nder om det bara visas i livef\u00f6rhandsvisningen?<\/h2>\n
Enkelt anpassa med CSS<\/h2>\n