{"id":239590,"date":"2022-04-14T11:01:00","date_gmt":"2022-04-14T08:01:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=239590"},"modified":"2022-05-16T10:29:50","modified_gmt":"2022-05-16T07:29:50","slug":"teeman-muokkaaminen-mukautetulla-css-lla","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/teeman-muokkaaminen-mukautetulla-css-lla\/","title":{"rendered":"Teeman muokkaaminen mukautetulla CSS:ll\u00e4"},"content":{"rendered":"

Haluatko t\u00e4yden hallinnan sivustosi suunnittelusta?<\/p>\n

Vaikka WordPressiss\u00e4 on paljon k\u00e4ytt\u00e4j\u00e4yst\u00e4v\u00e4llisi\u00e4 mukautusty\u00f6kaluja, pieni CSS voi auttaa sinua valtavasti.<\/p>\n

Voit esimerkiksi suurentaa viestien otsikoiden fonttikokoa tai muuttaa linkkien v\u00e4ri\u00e4. Tuntuu ylivoimaiselta asentaa t\u00e4ysin uusi laajennus johonkin niin yksinkertaiseen.<\/p>\n

CSS on ratkaisu.<\/p>\n

Muutaman rivin CSS avulla voit nopeasti hoitaa pienet tyylin mukautukset. Ja vaikka se on koodia, se ei ole l\u00e4hesk\u00e4\u00e4n yht\u00e4 monimutkainen kuin ohjelmointikieli, kuten Javascript tai PHP.<\/p>\n

Jos olet kirjoittanut hieman CSS:\u00e4\u00e4 siell\u00e4 t\u00e4\u00e4ll\u00e4, hy\u00f6dyt suuresti t\u00e4st\u00e4 oppaasta, mutta jopa aloittelijat voivat l\u00f6yt\u00e4\u00e4 k\u00e4yt\u00e4nn\u00f6n vinkkej\u00e4 t\u00e4\u00e4lt\u00e4.<\/p>\n

Psst!<\/strong> Lue loppuun, jos olet Compete Themes -asiakas. Meill\u00e4 on sinulle ilmaistava bonus (erityisesti hy\u00f6dyllinen aloittelijoille).<\/p>\n

Nopea johdatus CSS:\u00e4\u00e4n<\/h2>\n

Jos olet jo perehtynyt CSS:\u00e4\u00e4n, en halua vaivata sinua pitk\u00e4ll\u00e4 yleiskatsauksella. Jos et ole koskaan ty\u00f6skennellyt CSS:n kanssa tai et ole edes varma, mit\u00e4 CSS on, tutustu ensin aiheeseen liittyv\u00e4\u00e4n artikkeliimme:<\/p>\n

Mik\u00e4 on CSS ja miten se vaikuttaa WordPressiin?<\/a><\/p>\n

Se kattaa perusteet siit\u00e4, miksi CSS:\u00e4\u00e4 k\u00e4ytet\u00e4\u00e4n sivustojen tyyliin ja miten sit\u00e4 sovelletaan.<\/p>\n

Kuinka lis\u00e4t\u00e4 CSS WordPress-sivustollesi<\/h2>\n

On yksi suuri virhe, jonka WordPress-k\u00e4ytt\u00e4j\u00e4t, jotka ovat uusia CSS:n k\u00e4ytt\u00e4ji\u00e4, tekev\u00e4t:<\/p>\n

He mukauttavat teematiedostoja.<\/p>\n

Esimerkiksi joku, joka k\u00e4ytt\u00e4\u00e4 Challenger-teemaa, saattaa tehd\u00e4 CSS-muokkauksensa suoraan style.css-tiedostoon, jota k\u00e4ytet\u00e4\u00e4n Ulkoasu > Muokkaus -valikosta.<\/p>\n

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

WordPress sis\u00e4lt\u00e4\u00e4 nyt ilmoituksen, joka varoittaa sinua muokkaamasta t\u00e4\u00e4ll\u00e4<\/p>\n

Ongelma style.css-tiedoston muokkaamisessa on, ett\u00e4 menet\u00e4t kaikki tekem\u00e4si muutokset, jos p\u00e4ivit\u00e4t uuteen Challenger-versioon. Luota minuun, koodimuutosten menett\u00e4minen, joiden tekeminen kesti kauan, voi olla uskomattoman masentavaa.<\/p>\n

Parempi tapa<\/h3>\n

On parempi tapa lis\u00e4t\u00e4 CSS sivustoosi, jossa sit\u00e4 ei koskaan korvata. Lis\u00e4ksi t\u00e4m\u00e4 koodi lis\u00e4t\u00e4\u00e4n sivustollesi tavalla, joka helpottaa teeman tyylien ohittamista.<\/p>\n

Voit lis\u00e4t\u00e4 CSS:n sivustollesi avaamalla mukauttajan (Ulkoasu > Mukauta) ja napsauttamalla Lis\u00e4-CSS-osiota.<\/p>\n

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

Se on yleens\u00e4 viimeinen osio mukauttajassa<\/p>\n

Jos avaat t\u00e4m\u00e4n osion, n\u00e4et tekstialueen, johon voit lis\u00e4t\u00e4 koodisi. WordPress sis\u00e4lt\u00e4\u00e4 joitain vinkkej\u00e4 t\u00e4h\u00e4n, mutta voit napsauttaa Sulje-linkki\u00e4 poistaaksesi sen ja n\u00e4ytti vain koodin sy\u00f6tt\u00e4misen.<\/p>\n

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

Voit kirjoittaa ja tallentaa mink\u00e4 tahansa CSS:n, jonka haluat lis\u00e4t\u00e4 t\u00e4h\u00e4n.<\/p>\n

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

T\u00e4h\u00e4n lis\u00e4\u00e4m\u00e4si koodi p\u00e4ivitt\u00e4\u00e4 sivuston ulkoasun heti esikatselussa. Kun olet tyytyv\u00e4inen muutoksiin, voit tallentaa muutokset.<\/p>\n

Lis\u00e4bonus CSS:n sijoittamisesta t\u00e4nne on, ett\u00e4 voit seurata p\u00e4ivitysten tapahtumista liven\u00e4, joten voit testata eri koodia nopeasti saadaksesi selville, mist\u00e4 pid\u00e4t.<\/p>\n

Nyt kun olet tutustunut CSS:n lis\u00e4\u00e4miseen sivustollesi turvallisesti, k\u00e4yd\u00e4\u00e4n l\u00e4pi CSS:n kirjoittamisen perusteet!<\/p>\n

Ammattilaisen vinkki:<\/strong> \u00e4l\u00e4 huoli sivustosi rikkomisesta. Jos teet huonon muokkauksen, voit yksinkertaisesti poistaa lis\u00e4\u00e4m\u00e4si CSS:n. On mahdotonta rikkoa sivustoasi kokonaan tai menett\u00e4\u00e4 p\u00e4\u00e4sy j\u00e4rjestelm\u00e4nvalvojavalikkoon lis\u00e4\u00e4m\u00e4ll\u00e4 CSS t\u00e4ll\u00e4 tavalla.<\/p>\n

Kuinka l\u00f6yt\u00e4\u00e4 CSS-valitsimia<\/h2>\n

Jos olet joskus kirjoittanut CSS:\u00e4\u00e4, tied\u00e4t, ett\u00e4 ensimm\u00e4inen askel on valita valitsin, joka kertoo selaimelle, mihin sivuston elementtiin kohdistat. Yll\u00e4 olevassa kuvakaappauksessa kohdistan kaikkiin elementteihin, joilla on "site-title" -luokka.<\/p>\n

Jos et ole varma, kuinka k\u00e4ytt\u00e4\u00e4 CSS-valitsimia, katso t\u00e4m\u00e4 upea SitePointin CSS-valitsimien esittely<\/a>.<\/p>\n

T\u00e4ss\u00e4 on nyt asiaa\u2026<\/p>\n

Jopa monet kokeneet WordPress-k\u00e4ytt\u00e4j\u00e4t etsiv\u00e4t valitsimia v\u00e4\u00e4rin. He tarkistavat style.css-tiedoston l\u00f6yt\u00e4\u00e4kseen teeman jo k\u00e4ytt\u00e4m\u00e4n valitsimen. T\u00e4m\u00e4 on ty\u00f6l\u00e4st\u00e4, etk\u00e4 v\u00e4ltt\u00e4m\u00e4tt\u00e4 edes l\u00f6yd\u00e4 sopivaa valitsinta mukautuksen tekemiseen.<\/p>\n

Haluan tarjota sinulle paljon tuottavamman prosessin.<\/p>\n

Kuinka WP-ammattilaiset l\u00f6yt\u00e4v\u00e4t CSS-valitsimia<\/h3>\n

Kun kirjoitat CSS:\u00e4\u00e4, tarvitset ensin valitsimen, joka kertoo selaimelle, mit\u00e4 elementti\u00e4 haluat muokata. Vaikka voit tarkistaa teemasi tyylitaulukon, on paljon helpompaa l\u00f6yt\u00e4\u00e4 ne selaimesi verkkokehitt\u00e4j\u00e4ty\u00f6kalujen avulla.<\/p>\n

T\u00e4ss\u00e4 on esimerkki siit\u00e4, mit\u00e4 tarkoitan:<\/p>\n

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

T\u00e4m\u00e4 on kuvakaappaus Chromesta, jonka kehitt\u00e4j\u00e4ty\u00f6kalut on avattu<\/p>\n

N\u00e4et jokaisen elementin luokat ja tunnukset avoimissa kehitt\u00e4j\u00e4ty\u00f6kaluissa. Voit sitten k\u00e4ytt\u00e4\u00e4 mit\u00e4 tahansa saatavilla olevien luokkien ja tunnusten yhdistelm\u00e4\u00e4 omien mukautettujen valitsimien kirjoittamiseen.<\/p>\n

T\u00e4ss\u00e4 opetusohjelmassa k\u00e4sittelen t\u00e4t\u00e4 prosessia paljon syvemm\u00e4lle:<\/p>\n

Kuinka l\u00f6yt\u00e4\u00e4 CSS-valitsimia WordPress-sivustoilta<\/a><\/p>\n

Opit k\u00e4ytt\u00e4m\u00e4\u00e4n selaimesi kehitt\u00e4j\u00e4ty\u00f6kaluja, liikkumaan HTML:ss\u00e4 ja l\u00f6yt\u00e4m\u00e4\u00e4n tarvitsemasi CSS-valitsimet.<\/p>\n

CSS:n ominaisuudet ja arvot<\/h2>\n

Nyt kun sinulla on paljon nopeampi tapa saada haluamasi valitsin ja tied\u00e4t kuinka lis\u00e4t\u00e4 koodia Muokaajan Lis\u00e4-CSS-osioon, en\u00e4\u00e4 j\u00e4\u00e4 vain valita ominaisuudet, joita haluat muuttaa.<\/p>\n

Jos esimerkiksi haluat kohdistaa sivuston otsikkoon Challengerissa<\/a> ja suurentaa fonttia, voit tehd\u00e4 t\u00e4m\u00e4n font-size<\/code>ominaisuuden kanssa. CSS-lause saattaa n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n

.site-title {\n  font-size: 32px;\n}<\/code><\/pre>\n
Jos et ole kovin perehtynyt CSS:\u00e4\u00e4n, t\u00e4m\u00e4 luettelo CSS-ominaisuuksista on<\/a> erityisen hy\u00f6dyllinen. Voit etsi\u00e4 luettelosta mit\u00e4 tahansa laatua, jota haluat muokata (taustav\u00e4ri, kirjasinkoko, reunat jne.).<\/p>\n
ILMAINEN valmiiksi kirjoitettu CSS k\u00e4ytt\u00e4jillemme<\/h2>\n
CSS-aloittelija tai mestari, minulla on jotain, josta uskon sinun pit\u00e4v\u00e4n\u2026<\/p>\n
Jos k\u00e4yt\u00e4t jotain teemojamme, tulet rakastamaan valmiita CSS-katkelmien kirjastoja, joita olemme rakentaneet. Esimerkiksi Tracks CSS Snippets -kokoelmassa<\/a> on kymmeni\u00e4 katkelmia, jotka voit kopioida ja liitt\u00e4\u00e4 CSS-lis\u00e4osioon<\/a> muokataksesi sivustoasi:<\/p>\n
\"Teeman<\/a><\/p>\n
T\u00e4m\u00e4 tekee sivustosi mukauttamisesta CSS:n avulla eritt\u00e4in helppoa, vaikka et olisi koskaan aiemmin kirjoittanut CSS:\u00e4\u00e4. Voit yksinkertaisesti kopioida ja liitt\u00e4\u00e4 mink\u00e4 tahansa haluamasi katkelman ja muuttaa sitten arvon haluamaksesi.<\/p>\n
L\u00f6yd\u00e4t teemasi CSS-katkelmat k\u00e4ym\u00e4ll\u00e4 tukikeskuksessa<\/a> ja valitsemalla k\u00e4ytt\u00e4m\u00e4si teeman. Napsauta sitten N\u00e4yt\u00e4 CSS-katkelmat -painiketta sivupalkin alaosassa:<\/p>\n
\"Teeman<\/a><\/p>\n
L\u00f6yd\u00e4t seuraavalta sivulta joukon valmiita katkelmia valitsemastasi teemasta.<\/p>\n
Johtop\u00e4\u00e4t\u00f6s<\/h2>\n
En odota kaikkien Compete Themes -k\u00e4ytt\u00e4jien olevan CSS-mestareita, ja ymm\u00e4rr\u00e4n, kuinka pelottava t\u00e4m\u00e4 opetusohjelma saattoi olla henkil\u00f6lle, joka hallitsee viel\u00e4 WordPressin perusteet.<\/p>\n
T\u00e4st\u00e4 huolimatta on varmasti hy\u00f6dyllist\u00e4 tiet\u00e4\u00e4 mahdollisuuksista mukauttaa CSS:n avulla. Ja lis\u00e4ksi katkelmakokoelmat tekev\u00e4t jalkojen upottamisesta eritt\u00e4in helppoa kopioida ja liit\u00e4 koodilla.<\/p>\n
Saatat palata t\u00e4h\u00e4n asiaan tulevaisuudessa, kun tunnet olevasi valmiimpi mukauttamaan sivustoasi koodilla. Siin\u00e4 tapauksessa merkitse t\u00e4m\u00e4 sivu kirjanmerkkeihin my\u00f6hemp\u00e4\u00e4 k\u00e4ytt\u00f6\u00e4 varten, jotta voit palata ja kokeilla sit\u00e4.<\/p>\n
:  www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Sivuston mukauttaminen CSS:n avulla on helppoa, ja \u00e4l\u00e4 huoli, et voi rikkoa sivustoasi pelk\u00e4ll\u00e4 CSS:ll\u00e4. Aloita noudattamalla n\u00e4it\u00e4 yksinkertaisia \u200b\u200bohjeita.<\/p>\n","protected":false},"author":1,"featured_media":22082,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[550],"tags":[843],"class_list":["post-239590","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\/239590","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=239590"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/239590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/22082"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=239590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=239590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=239590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}