{"id":235819,"date":"2022-03-17T12:10:00","date_gmt":"2022-03-17T09:10:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=235819"},"modified":"2022-05-16T10:27:37","modified_gmt":"2022-05-16T07:27:37","slug":"mukautetun-css-n-lisaaminen-wordpress-teemaan-ei-laajennuksia","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/mukautetun-css-n-lisaaminen-wordpress-teemaan-ei-laajennuksia\/","title":{"rendered":"Mukautetun CSS:n lis\u00e4\u00e4minen WordPress-teemaan (ei laajennuksia)"},"content":{"rendered":"

Teemankehitt\u00e4j\u00e4n\u00e4 autan ihmisi\u00e4 muokkaamaan teemaansa CSS:n avulla p\u00e4ivitt\u00e4in.<\/p>\n

Olen jopa julkaissut kokonaisia CSS-katkelmien kirjastoja teemojani<\/a> varten.<\/p>\n

Vaikka oman CSS:n kirjoittaminen tyhj\u00e4st\u00e4 voi olla haastavaa, valmiiksi kirjoitettujen katkelmien lis\u00e4\u00e4misen pit\u00e4isi olla yksinkertaista.<\/p>\n

T\u00e4ss\u00e4 opetusohjelmassa opit yksinkertaisimman ja parhaan tavan lis\u00e4t\u00e4 mukautettua CSS:\u00e4\u00e4 sivustollesi, jotta voit muuttaa WordPress-teeman tyylej\u00e4.<\/p>\n

Kuinka lis\u00e4t\u00e4 mukautettua CSS:\u00e4\u00e4<\/h2>\n

Aiemmin suosittelin Simple Custom CSS<\/a> -laajennusta, mutta et en\u00e4\u00e4 tarvitse laajennusta CSS:n lis\u00e4\u00e4miseen sivustollesi.<\/p>\n

Sen sijaan voit k\u00e4ytt\u00e4\u00e4 mukauttajassa sis\u00e4\u00e4nrakennettua Lis\u00e4-CSS-osiota. P\u00e4\u00e4set t\u00e4h\u00e4n ominaisuuteen napsauttamalla Mukauta-valikkokohtaa Ulkoasu-kohdasta.<\/p>\n

\"Mukautetun<\/a><\/p>\n

Avaa seuraavaksi CSS-lis\u00e4osio, jonka pit\u00e4isi sijaita l\u00e4hell\u00e4 mukautuspaneelin alaosaa.<\/p>\n

\"Mukautetun<\/a><\/p>\n

Sis\u00e4\u00e4n voit yksinkertaisesti liitt\u00e4\u00e4 CSS:n, jonka sinun on lis\u00e4tt\u00e4v\u00e4 sivustollesi.<\/p>\n

\"Mukautetun<\/a><\/p>\n

CSS-lis\u00e4ominaisuuden hieno puoli on, ett\u00e4 saat live-esikatselun siit\u00e4, miten se vaikuttaa sivustoosi. Esikatselu p\u00e4ivittyy v\u00e4litt\u00f6m\u00e4sti, eiv\u00e4tk\u00e4 vierailijat n\u00e4e tekem\u00e4si muutokset, ennen kuin napsautat yl\u00e4reunassa olevaa Julkaise-painiketta.<\/p>\n

Miksi style.css-tiedostoa ei pit\u00e4isi koskaan muokata<\/h2>\n

Monet WordPress-k\u00e4ytt\u00e4j\u00e4t houkuttelevat muokkaamaan teeman tyylitaulukkoa suoraan Theme Editor -valikon kautta.<\/p>\n

\"Mukautetun<\/a><\/p>\n

\u00c4l\u00e4 koskaan tee t\u00e4t\u00e4.<\/strong><\/p>\n

Suurin ongelma muutosten tekemisess\u00e4 t\u00e4ll\u00e4 tavalla on, ett\u00e4 kaikki kova ty\u00f6si menetet\u00e4\u00e4n, kun p\u00e4ivit\u00e4t teeman. Jos esimerkiksi k\u00e4yt\u00e4t Mission News<\/a> -versiota 1.38 ja huomenna ilmestyy 1.39, p\u00e4ivitysprosessi kopioi kaikki uudet tiedostot vanhojen tiedostojen p\u00e4\u00e4lle. Teema ei varmasti sis\u00e4ll\u00e4 samoja muokkauksia, joita olet tehnyt, joten ne katoavat pysyv\u00e4sti (ellei sinulla ole \u00e4skett\u00e4in tehty varmuuskopio<\/a> ).<\/p>\n

T\u00e4m\u00e4 voidaan v\u00e4ltt\u00e4\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 Customizerin Lis\u00e4-CSS-osiota, johon teemap\u00e4ivitykset eiv\u00e4t vaikuta.<\/p>\n

CSS-lis\u00e4ominaisuuden ainoa haaste on, ett\u00e4 joskus CSS:n saaminen voimaan voi olla hieman vaikeampaa.<\/p>\n

Vinkkej\u00e4 mukautetun CSS:n toimimiseen<\/h3>\n

Puuttumatta rikkaruohoihin, CSS k\u00e4ytt\u00e4\u00e4 spesifisyysj\u00e4rjestelm\u00e4\u00e4<\/a> p\u00e4\u00e4tt\u00e4\u00e4kseen, mitk\u00e4 tyylis\u00e4\u00e4nn\u00f6t ohittavat toisensa.<\/p>\n

Yksi tapa varmistaa, ett\u00e4 tyylisi ohittavat teeman tyylit, on k\u00e4ytt\u00e4\u00e4 !important<\/code>tunnistetta.<\/p>\n

Otetaan esimerkiksi t\u00e4m\u00e4 CSS-katkelma:<\/p>\n

.site-title {\n  font-size: 28px;\n}<\/code><\/pre>\n
Kaikissa teemoissamme<\/a> t\u00e4m\u00e4 koodi tekisi sivuston otsikosta 28 kuvapistett\u00e4. Jos et n\u00e4e muutoksia t\u00e4m\u00e4n koodin k\u00e4ytt\u00f6\u00f6noton j\u00e4lkeen, yrit\u00e4 lis\u00e4t\u00e4 !important<\/code>tagi seuraavasti:<\/p>\n
.site-title {\n  font-size: 28px !important;\n}<\/code><\/pre>\n
T\u00e4m\u00e4n p\u00e4ivityksen my\u00f6t\u00e4 koodin taatusti tulee voimaan niin kauan kuin se on kohdistettu oikeaan valitsimen. Yrit\u00e4 vain varata t\u00e4m\u00e4 erityistilaisuuksiin, koska sen k\u00e4ytt\u00e4minen kymmeni\u00e4 kertoja koodissa voi vaikeuttaa tyylien ohittamista tulevaisuudessa.<\/p>\n
Ent\u00e4 jos se n\u00e4kyy vain live-esikatselussa?<\/h2>\n
Yksi yleinen ongelma, jota k\u00e4ytt\u00e4j\u00e4t kohtaavat k\u00e4ytt\u00e4ess\u00e4\u00e4n t\u00e4t\u00e4 ominaisuutta, on se, ett\u00e4 heid\u00e4n koodinsa toimii k\u00e4ytett\u00e4ess\u00e4 Live Customizeria, mutta kun he tarkastelevat sivustoa normaalisti, muutokset eiv\u00e4t n\u00e4y.<\/p>\n
T\u00e4m\u00e4 johtuu melkein aina v\u00e4limuistista, ja k\u00e4sittelen ratkaisun yksityiskohtaisesti t\u00e4\u00e4ll\u00e4:<\/p>\n
Kuinka korjata WordPressin muutokset, jotka eiv\u00e4t n\u00e4y<\/a><\/p>\n
Asioiden selvitt\u00e4miseen pit\u00e4isi menn\u00e4 vain minuutti tai kaksi.<\/p>\n
Mukauta helposti CSS:n avulla<\/h2>\n
Vaikka sinulla ei ole aavistustakaan, kuinka kirjoittaa omaa CSS-sy\u00f6tett\u00e4si, CSS-lis\u00e4ominaisuus helpottaa koodin liitt\u00e4mist\u00e4 sivustoosi.<\/p>\n
Jos haluat oppia lis\u00e4\u00e4 WordPress-teemojen mukauttamisesta CSS:n avulla, suosittelen seuraavaksi oppaani CSS-valitsimien l\u00f6yt\u00e4miseen<\/a>.<\/p>\n
Ja jos pidit oppimisesta jotain uutta WordPressist\u00e4 t\u00e4n\u00e4\u00e4n, saatat pit\u00e4\u00e4 ilmaisesta s\u00e4hk\u00f6postikurssistani:<\/p>\n
Osallistu 7 p\u00e4iv\u00e4n WordPress Mastery -kurssille<\/a><\/p>\n
Se alkaa muutamalla verkkosuunnittelun oppitunnilla ja siirtyy sitten suorituskyvyn optimointiin ja verkkosivuston tulouttamiseen. Jos haluat oppia lis\u00e4\u00e4 WordPressist\u00e4, pid\u00e4t siit\u00e4 varmasti.<\/p>\n
Kiitos, ett\u00e4 luit t\u00e4m\u00e4n oppaan mukautetun CSS:n lis\u00e4\u00e4misest\u00e4 WordPressiin. Harkitse alla olevien painikkeiden k\u00e4ytt\u00f6\u00e4 jakaaksesi sen seuraajillesi.<\/p>\n
:  www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Lis\u00e4\u00e4 mukautettu CSS sivustollesi seuraavien 60 sekunnin kuluessa asentamatta uusia laajennuksia. T\u00e4m\u00e4 on paras l\u00e4hestymistapa aloittelijoille ja asiantuntijoille.<\/p>\n","protected":false},"author":1,"featured_media":22140,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[550],"tags":[843],"class_list":["post-235819","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mukauta-wordpress","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/235819","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=235819"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/235819\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/22140"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=235819"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=235819"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=235819"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}